Log in

View Full Version : 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 (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm) ?
jickpictures
04-13-2010, 11:45 PM
I'm more talking along the lines of:

http://wiki.github.com/madrobby/scriptaculous/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:




<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:



<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>
clausiaa2
04-15-2010, 02:32 PM
I'm more talking along the lines of:

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

Where the image appears but not in the same div

Thanks so much for the link. Hope I can find more info from it.
:)
__________________
The Joneses (http://watchhotmoviesonline.com)
markup
04-16-2010, 01:53 AM
Did you try some jquery scripts ?