Results 1 to 3 of 3

Thread: Image fader on mouse over

  1. #1
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Image fader on mouse over

    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/s...eset_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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Use jQuery for that, it really simplifies things:

    Code:
    <!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/s...s/hover_in.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Awesome

    thanks a lot

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •