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 to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fadein and out image and text combined

    I have two links: an image and a header text. On mouseover of the header or the image, the image should slowly fade into another image and a text below the heading will slowly show up at the same time. On mouseout it should look like it does from the start with a smooth fadeout.

    I have made an example of this here. What needs to be solved is that I cannot combine the scripts so that the multiple effects happen at the same time (when mouseover on header or image). Link:

    http://www.tilnorsk.com/fade/

    Code:

    [ I could not find an easier version of the two images that fadein/fadeout that works in several browsers than the one below where I could regulate the fadein and fadeout speed ]

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    <title>Fadein and Fadeout</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    <style type="text/css">
    
    #pak {
        margin: 30px 0 0 30px;
        width:400px;
        height:400px;
        background:black url(rainforest1.jpg);
    }
    
    #pak img {
        opacity:0;
        display:block;
    }
    
    #hover {
        font-size: 13px; 
        font-weight: bold; 
        font-family: arial; 
        width: 116px; 
        height: 15px; 
        margin: 30px 0 0 30px;
    }
    
    #hover a {
        text-decoration: none; 
        color: black;
    } 
    
    #effect {
        font-size: 12px; 
        font-family: arial;
        margin: 10px 0 0 30px;
        display: none; 
        color: #999898;
    }
    
    </style>
    
    <script type="text/javascript">
    
    function fade(el, way){
    /*Modern Browser Fader by John Davenport Scheuer
      This comment must remain for Legal Use */
    clearTimeout(el.timer);
    var targ_op=way=='in'&&el.filters&&el.filters[0]? 100 : way=='in'? 1 : 0;
    var waym=way=='in'? 1 : -1;
    var optype=el.filters&&el.filters[0]&&typeof el.filters[0].opacity=='number'? el.filters[0] : el.style;
    var opinc=el.filters&&el.filters[0]? 10 : .1;
    if(/number|string/.test(typeof optype.opacity))
    optype.opacity=optype.opacity*1 + opinc*waym;
    else
    return;
    if(optype.opacity!=targ_op)
    el.timer=setTimeout(function(){fade(el, way)}, 90);
    }
    
    </script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    	$('#hover').hover(
    		function(){$('#effect').fadeIn(1400)}, 
    		function(){$('#effect').fadeOut(1400)}
    	);
    });
    </script>
    
    </head>
    
    <body>
    
    <div id="pak"><a href=""><img border="0" src="rainforest2.jpg" alt="" onmouseover="fade(this, 'in');" onmouseout="fade(this, 'out');"></a></div>
    
    <div id='hover'><a href="">THE RAINFOREST</a></div>
    <div id='effect'>There are many animals in the rainforest</div>
    
    </body>
    
    </html>
    So when mouseover on header I want a text below to fadein slowly and at the same time the image above will slowly fade into another image. On mouseout slowly fade out and back to normal on both. In the same way when mouseover on image it should slowly fade into another image and simultaneously the text below the header should fadein. On mouseout slowly fade out and back to normal on both.

    I am very much appreciating all the help I can get. Thank you.
    Last edited by VIPStephan; 02-18-2013 at 12:31 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,594
    Thanks
    23
    Thanked 646 Times in 645 Posts
    Because Modern Browser Fader by John Davenport Scheuer says it's for images I just took it out of the code.

    This works when the images are the same size! I had some problems when they weren't.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    </head>
    <body>
    
    <div id="start" style="position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
    <img src="http://www.tilnorsk.com/fade/rainforest1.jpg" /><br />
    THE RAINFOREST
    </div >
    <div id="end" style="opacity:0;position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
    <img src="http://www.tilnorsk.com/fade/rainforest2.jpg" /><br />
    There are many animals in the rainforest
    </div>
    
    <script>
      function doit(){
        $("#start").animate({opacity: "0"}, 2500);
        $("#end").animate({opacity: "1"}, 2500);
      }
    
     function jabby(){
        $("#end").animate({opacity: "0"}, 2500);
        $("#start").animate({opacity: "1"}, 2500);
        $("#end").css("opacity", "0");
        $("#start").css("opacity", "1");
      }
    </script>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    pelcones (02-18-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much for your reply.

    It is great that things can be coordinated simultaneously but there are still some challenges remaining with my request (I know it is a bit demanding).

    - One challenge is browser compatibility, to make it work in IE primarily (with opacity). Now it doesn't and the image gets a bit unstable if you move the mousepointer quickly over the image in IE.

    - I would like "THE RAINFOREST" text to remain when the mouseover is active (on the image or the header text itself). It never fades in or out. The descriptive text in grey below it should fade in on mouseover and the new image above the same.

    Here are two links to show what the mouseover and mouseout effects look like (with a little different display but no active effects).

    http://www.tilnorsk.com/fade/mouseout.html [ normal - default ]
    http://www.tilnorsk.com/fade/mouseover.html

    Mouseover on either header or image should give the same fadein effect.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,594
    Thanks
    23
    Thanked 646 Times in 645 Posts
    I have spent more then half of my programming life getting things to look the same in IE. I have decided that they will have to join the web to get things to work cause I will no longer program for them separately. If it looks good OK, but they don't get the bells and whistles.

    For what asked, I have made two divs and change the ID to class so both will respond to the same command.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    </head>
    <body>
    
    <div class="start" style="position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
    <img src="http://www.tilnorsk.com/fade/rainforest1.jpg" />
    </div >
    <div class="start" style="position:absolute;left:420px;">
    THE RAINFOREST
    </div>
    
    <div class="end" style="opacity:0;position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
    <img src="http://www.tilnorsk.com/fade/rainforest2.jpg" />
    </div >
    <div class="end" style="opacity:0;position:absolute;left:420px;">
    THE RAINFOREST<br />
    There are many animals in the rainforest
    </div>
    
    <script>
      function doit(){
        $(".start").animate({opacity: "0"}, 2500);
        $(".end").animate({opacity: "1"}, 2500);
      }
    
     function jabby(){
        $(".end").animate({opacity: "0"}, 2500);
        $(".start").animate({opacity: "1"}, 2500);
        $(".end").css("opacity", "0");
        $(".start").css("opacity", "1");
      }
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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