Log in

View Full Version : Image fader on mouse over


bootersbooters
12-25-2011, 03:18 AM
Hello everyone.

i have a page where i have many images, all are dull, when i move my mouse over them they should fade and glow.

Any such script will be helpfull?

am a newbie pls help

example is the one monalisa painting..

http://home.comcast.net/~jscheuer1/side/files/fade_advanced_preset_write.htm

i want to use multiple such images, i dont understand what to do.

please show me what to edit there in the script.
jscheuer1
12-25-2011, 03:48 AM
Use jQuery for that, it really simplifies things:


<!DOCTYPE html>
<html>
<head>
<title>jQuey Hover Fade In Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.faders').css({opacity: 0.5}).hover(function(){
$(this).stop().animate({opacity: 1});
}, function(){
$(this).stop().animate({opacity: 0.5});
});
});
</script>
<style type="text/css">
body {
color: #ccc;
background-color: #000;
}
</style>
</head>
<body>
<p><img class="faders" src="photo1.jpg" alt="original image" title=""></p>
<p><img class="faders" src="photo2.jpg" alt="original image" title=""></p>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/files/hover_in.htm
bootersbooters
12-25-2011, 04:05 AM
Awesome :cool:

thanks a lot