Fadein and out image and text combined

pelcones · 02-18-2013, 09:41 AM

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.

sunfighter · 02-18-2013, 06:58 PM

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>

pelcones · 02-18-2013, 09:58 PM

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.

sunfighter · 02-20-2013, 03:34 PM

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>