SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru coiL's Avatar
    Join Date
    Sep 2001
    Location
    QLD, Australia
    Posts
    666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image rollover script

    Hi,

    I've spent a lot of time searching for what I need but so far haven't been able to find it. So could someone please give me the code for a compliant image rollover script?

    At the moment, I'm using the code posted below, but it is becoming a nuisance (and very very long). I don't need a pre-loader, just the mouse over part.

    any help is much appreciated.

    Code:
     
    <script language="Javascript" type="text/javascript">
    <!--
    if (document.images) {
    image1 = new Image();
    image1.src = 'green_cube.gif';
    image1over = new Image();
    image1over.src = 'green_cube_on.gif';
    }
    //-->
    Code:
     <a href="main.html" onmouseover="document.main.src=""image2over.src;" onmouseout="document.main.src=""image2.src;"><img tag stuff here></a>

    Thanks.
    coiL
    "cradled in the learning curve"

  2. #2
    SitePoint Zealot Saj's Avatar
    Join Date
    May 2003
    Location
    USA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, try this on the link:

    Code:
    <a href="main.html><img src="originalimage.gif" onmouseover="this.src='newimage.gif'" onmouseout="this.src='originalimage.gif'" /></a>

  3. #3
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an efficient rollover script I wrote...I'm sure this is exactly what you're looking for...

    Code:
    <HTML>
    <HEAD>
    <Script language="JavaScript">
    function changeImage(imgName, fileName)
    {
    var PreLoadImg = new Image();
    PreLoadImg.src = "images/"+fileName+".jpg";
    var imgObj = eval("document."+imgName);
    imgObj.src = "images/"+fileName+".jpg";
    }
    </script>
    </HEAD>
    <BODY>
    <a href="page.html" OnMouseOut="changeImage('swap1','mouse_out')" 
    OnMouseOver="changeImage('swap1','mouse_over')"> 
    <img src="images/mouse_out.jpg" name="swap1" border="0"></a>
    </BODY>
    </HTML>
    Whenever you want to do an image swap, just call the changeImage() function and pass it two values: the name of the image area (you must use the name attribute inside each image tag), and the name of the image file itself. This script basically displays either mouse_out.jpg or mouse_over.jpg. And "swap1" is the name of the image tag.


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
  •