SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Mouse Over Changes Image

    Hello all

    I am struggling with a solution. Here is what I want to accomplish.

    I have an image and next to the image is text. When the user mouses over the text, I want the image to change to a different image. How would I go about accomplishing this?

    I know how to change the text color using CSS ( :hover) but I am not sure if I can change an image when I hover over text. Any help would be appreciated.

    Thanks in advance for your time.

  2. #2
    SitePoint Enthusiast myinnet's Avatar
    Join Date
    Jul 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could use:
    Code:
    <img src="javascript_off.gif"  onmouseover="this.src='javascript_on.gif';"/>

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the post.

    If I put alerts in the below code, it works (as in the alerts in the JavaScript say mouseOut and MouseOver) but when I put the image code in there, nothing happens. I do not get a JavaScript error either.

    Any thoughts on how I could get this to work?

    Code:
    <html>
    
    <head>
    
    <script language="JavaScript">
    
    function mouseOver1()
    {
       document.getElementById("image").src='image1.gif';
    }
    
    function mouseOut()
    {
       document.getElementById("image").src='image2.gif';
    }
    
    </script>
    
    </head>
    
    <body>
    
    <div id="image">
       <img src="image1.GIF" />
    </div>
    
    <a onMouseOver="javascript: mouseOver1();" onMouseOut="javascript: mouseOut();">Test</a>
    
    </body>
    
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I got it.

    I needed to have the id tag on the img not the div tag.

    Here is the code.

    Code:
    <html>
    <head>
    
    <script language="JavaScript">
    
    function mouseOver()
    {
       document.getElementById("image").setAttribute('src',image2.gif');
    }
    
    function mouseOut()
    {	
       document.getElementById("image").setAttribute('src','image1.gif');
    }
    
    </script>
    
    </head>
    <body>
    
    <a onMouseOver="javascript: mouseOver();" onMouseOut="javascript: mouseOut();">Test</a>
    
    <p>
    
    <img src="image1.gif" id="image" />
    
    </body>
    </html>


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
  •