Results 1 to 2 of 2

Thread: Rollover with java script

  1. #1
    Join Date
    Jun 2012
    Location
    California
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Rollover with java script

    Is there any method of implementing rollover images with JavaScript? I wish to have an explanation at length.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,776
    Thanks
    2
    Thanked 412 Times in 407 Posts

    Default

    4 examples of rollovers using inline event calls

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    // it is better to preload the mouseover images
    var ary=['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'];
    
    for (var src,z0=0;z0<ary.length;z0++){
     src=ary[z0];
     ary[z0]=new Image();
     ary[z0].src=src;
    }
    
    
    function Swap(img,src){
     img.src=src;
    }
    
    function Swap2(img,ary){
     img.src=ary.src;
    }
    
    function Swap3(img,src){
     if (!img.save){
      img.save=img.src;
     }
     img.src=src||img.save;
    }
    </script>
    
    </head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg';" onmouseout="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg';"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg');" onmouseout="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg');"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="Swap2(this,ary[1]);" onmouseout="Swap2(this,ary[0]);"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="Swap3(this,'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg');" onmouseout="Swap3(this);"/>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. dom rollover script
    By emanuelle in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-16-2008, 04:42 AM
  2. Rollover Script
    By JBottero in forum Looking for such a script or service
    Replies: 0
    Last Post: 09-24-2007, 02:33 AM
  3. Java Drop Down Rollover
    By notorious200164 in forum JavaScript
    Replies: 7
    Last Post: 02-01-2006, 05:00 AM
  4. Image Rollover Script
    By giblani in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-15-2005, 09:01 PM
  5. Need help with Rollover, pop up script
    By techgearfree in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-05-2005, 05:10 PM

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
  •