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>

[CODE]

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.