SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseover difficulties

    I would appreciate any help or insight on the following problem:

    I have a graphic file (.gif) that is an acting as an href to another page, but when the mouse goes over it, I would like to create a mouseover by having it substituted with another .gif file. What I would like to see is the transition of this being instantaneous when the mouse passes over the linked .gif file, but the following code has been problematic for me. Please point out anything that needs changes. Much appreciated.

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>roll over</title>

    <script language="javascript" type="text/javascript">


    iCCCCR = new image

    iCCCCR.src = "images/mouseOCCCCR.gif"




    </script>

    </head>

    <body>
    <a href="target.htm" onmouseover="document.imgCCCCR.src=iCCCCR.src">
    <img src="images/CCCCR.gif" width="146" height="38" border="0"
    name="imgCCCCR" /></a>


    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var iCCCCR = new Image();
    
    iCCCCR.src = "images/mouseOCCCCR.gif"
    You also probably want to add an onmouseout even handler to the <a> tag.

    You can also do instantaneous rollovers with css. See here:

    http://wellstyled.com/css-nopreload-rollovers.html

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why dont you just use:

    <a href="target.htm" onmouseover="imgCCCCR.src='newgif.gif'">
    <img src="images/CCCCR.gif" width="146" height="38" border="0"
    name="imgCCCCR" /></a>

    or depending on how big the image is

    Hope it helps?

    Gav

    <img src="images/CCCCR.gif" width="146" height="38" border="0"
    name="imgCCCCR" onMouseOver="this.src='newgif.gif'" />


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
  •