Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hide image upon mouseover

    Hi,

    What I want to do:

    I have a img tag, which I want to fade out upon mouseover, showing the text underneath it, and then fade in upon mouseout behaviour.

    The following is the code:

    Code:
    <div id="box1" class="rollover1" style="background:#d61c5c;">
           <img src="uploads/images/box1.jpg" width="147" height="147" alt="About Us" class="fade"/>
           <a href="#"><div id="rollover_text"><strong>ABOUT US</strong><br /><br />
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br /><br /><p align="right"><u>More</u></p>
           </div></a>
    </div>
    With the following jQuery code:
    Code:
    $(document).ready(function () {
    	$("img.fade").hover(function(){
    		$(this).fadeTo("slow", 0);
    		},function(){
    			$(this).fadeTo("slow", 1);
    	});
    });
    What is actually happening is this:
    Upon mouseover, it does successfully fades out the image, but it doesn't show the text underneath it, only the background colour of the div.

    What I think might be happening is that the fadeout behaviour is simply decreasing image opacity, instead of removing it altogether. But even if this is what it's doing, it should still show the text in the background div.

    What am I doing wrong, and how can I achieve the desired results?

    Thanks in advance!

    Mark

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    There is no text in the background behind the image ... there is text underneath the image. If you fade out the image, the text will not "move up" to replace the image.

    The text would move up if you use hide() and show() ... but then the hover will not work any longer (it will repeatedly show and hide because the mouse cursor will eventually leave the image when the image is being hidden which will result in it being shown again and so on).

    The only solution (or rather workaround) I see would be to work with position: absolute for the div and the img and then set the image to a high z-index to cover the text in the div.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option without jQuery.

    As the image fades out, the text underneath fades in and vice-versa.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #imgContainer {
                    position: relative;
                }
                #img1 {
                    opacity: 100;
                    filter:alpha(opacity=100);
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }
                #imgContainer div {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }
            </style>
            <script type="text/javascript">
                var speed = 0.2;
                var fadeTimerImg, fadeTimerTxt;
                function fade(obj,dir){
                    if(fadeTimerImg){clearInterval(fadeTimerImg);}
                    if(fadeTimerTxt){clearInterval(fadeTimerTxt);}
                    fadeTimerImg = setInterval(function(){setOpacity(obj,dir)},100);
                    fadeTimerTxt = setInterval(function(){setOpacity(oTxtContainer,-dir)},100);
                }
                function setOpacity(obj,dir) {
                    obj.curOpac = obj.curOpac + (speed * dir);
                    if(obj.curOpac < 0){obj.curOpac = 0;}
                    if(obj.curOpac > 10){obj.curOpac = 10;}
                    if(typeof(obj.style.opacity) == 'string'){
                        obj.style.opacity = obj.curOpac/10;
                    } else {
                        obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
                    }
                }
                window.onload=function(){
                    var oImg1 = document.getElementById('img1');
                    oImg1.curOpac = 10;   //10 = opaque
                    oTxtContainer = document.getElementById('txtContainer');
                    oTxtContainer.curOpac = 0;  //0 = transparent
                    oImg1.onmouseover = function(){fade(this,-1);}
                    oImg1.onmouseout = function(){fade(this,1);}
                }
            </script>
        </head>
        <body>
            <div id="imgContainer">
                <div id="txtContainer">
                    some text<br />
                    more text <br />
                    some more text
                </div>
                <img id="img1" src="num1.jpg" alt="" />
            </div>
        </body>
    </html>
    Last edited by bullant; 03-22-2011 at 01:53 AM.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I love this bit of Code Bullant

    I am also new to Javascrpt...

    I was wondering it i had more than one fading picture on a page would this code work? If not how do I go about adapting it?

    Thanks George


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •