Image Fade In on link rollover

**jickpictures** · 04-13-2010, 11:23 PM

Hey there,

I'm looking for some type of script that will fade in an image when a user rolls over a link. I've found a few things on Google but I what I want, I couldn't find.

What I want is when a user rolls over a link in one div, an image will fade in in another div.

Any help would be great! I swear I'll love you forever. Thank you kind soul who answers me.

-Jick

**BLiZZaRD** · 04-13-2010, 11:31 PM

The fading part is the stamper. Not that it isn't doable, but fading in and out is a very very CPU intensive scripting process that can grind your site to a halt for those with lower than a T-3 connection.

Obviously Flash can do it, but there are issues with that as well. JavaScript will probably be the answer.

Have you looked into LightBox 2 ?

**jickpictures** · 04-13-2010, 11:45 PM

I'm more talking along the lines of:

http://wiki.github.com/madrobby/scri.../effect-appear

Where the image appears but not in the same div

**BLiZZaRD** · 04-14-2010, 12:19 AM

So you just take the source of that page as given:

Code:

<div id="appear_demo" style="display:none; width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
<ul>
  <li><a href="#" onclick="$('appear_demo').appear(); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('appear_demo').hide(); return false;">Reset</a></li>
</ul>

And just put the JS on the dive where you want the image to appear.

example:

Code:

<html>
<head>
<title appearing images</title>
</head>

<body>
<div>
<ul>
  <li><a href="#" onclick="$('appear_demo').appear(); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('appear_demo').hide(); return false;">Reset</a></li>
</ul>
</div>

<div><p>This is some other dive where nothing but this text appears. Nothing special about it here.</p></div>

<div id="appear_demo" style="display:none; width:80px; height:80px; background:#c2defb; border:1px solid #333;"><p>The Image will appear down here!</p></div>
</body>
</html>