Javascript Change Image onmouseover

Updated on 25 Jun 2009, Published on 30 Jun 2008

Javascript document object provides the method to access the HTML element such as image <img> HTML tag through its id attribute value that can be used to change the image by raising the onmouseover event of <img> tag. You can access the src attribute/property of <img> HTML tag and change the source image dynamically onmouseover event. You can also use the onmouseout event of <img> tag to set back the initial image when user moves the mouse out of the boundary of image element. getElementId method of Javascript document object allows you to access the src arttribute to get or set the URL location of the image for HTML <img> tag.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

Syntax of Javascript to change the Src Image onmouseover

document.getElementById("id").src = "url Value";

src property can get or set the value only for the <img> HTML tag. You have to pass the id attribute value of <img> tag to access the src property through Javascript and set the source image dynamically to show the image rollover effect.

Example of Javascript Change Image onmouseover

<html>
<head>
    <title>Javascript Change Image Onmouseover</title>

     <style type="text/css">
    p {
    font-family:Verdana;
    font-weight:bold;
    font-size:11px
    }

    img {
    cursor:pointer;
    }
    </style>

    <script language="javascript" type="text/javascript">
    function mouseOverImage()
    {
        document.getElementById("img1").src = "images/green.gif";
    }

    function mouseOutImage()
    {
        document.getElementById("img1").src = "images/blue.gif";
    }
    </script>
</head>

<body>
    <p>
        This Javascript Example will change the image of<br />
        HTML image Tag onmouseover event.</p>

    <center>
        <img id="img1" src="images/blue.gif" alt="image rollover" onmouseover="mouseOverImage()"
        onmouseout="mouseOutImage()" />
    </center>
</body>
</html>

Above example code shows the use of onmouseover and onmouseout events of img tag. onmouseover event calls the client end javascript when user moves the mouse pointer over the image element within its boundaries. When user moves the mouse pointer outside the boundary of image <img> tag, the onmouseout event fires the specified client side javascript function. Also CSS selector rule style for <img> tag cursor CSS style with value "pointer" is used to display the Hand cursor when user moves the mouse over the image.

Output:

You can see the output of above discussed codes from the following link:

Change Image Onmouseover

Continue to next tutorial: Javascript Change Link Text Color onmouseover to learn how to rollover the font color of Hyperlink text using JavaScript DOM style properties.

Product Spotlight

‹‹ Previous Page

Next Page ››

Share it

Rate this article:

Email it:

8 Responses to "Javascript Change Image onmouseover"

Andy

Hi,

Thanks for the code, you just saved me from a couple more hours looking for code that would work. I really appreciate it. My question is: what would the code look like if you had multiple buttons/images?

What I have done is this:
function mouseOverImage()
{
document.getElementById("img1").src = "1.jpg";
document.getElementById("img2").src = "2.jpg";
document.getElementById("img3").src = "3.jpg";
}
function mouseOutImage()
{
document.getElementById("img1").src = "1m.jpg";
document.getElementById("img2").src = "2m.jpg";
document.getElementById("img3").src = "3m.jpg";
}

It works fine, the problem is that the three buttons change at the same time whenever I "mouseover" any of them. Each button does what it is supposed to do, but the image is loaded in all of them at the same time. Could you help me with this? Thanks,
Andy

Top54u

Hi Andy

Here are two alternate methods for JavaScript change image onmouseover. You can create a single JavaScript function that will accept 2 parameters as imgID and imgPath. imgID parameter for associated img tag ID whose image is to be changed. imgPath parameter for passing the image path that is to be set at the time of mouseover event.

<script type="text/javascript">
function rolloverImage(imgID, imgPath)
{
imgID.src = imgPath;
}
</script>

<img src="images/1.gif"
alt="image 1"
id="img1"
onmouseover="rolloverImage(this, 'images/1m.gif');"
onmouseout="rolloverImage(this, 'images/1.gif');" />

In the above code snippet this reference is used to pass the element ID as object.

You can also use the following function:

<script type="text/javascript">
function rolloverImage(imgID, imgPath)
{
document.getElementById(imgID).src = imgPath;
}
</script>

<img src="images/2.gif"
alt="image 2"
id="img2"
onmouseover="rolloverImage('img2', 'images/2m.gif');"
onmouseout="rolloverImage('img2', 'images/2.gif');" />

Hope this will work for you.

Good Luck

Andy

Hi,

thanks very much for the quick reply. It does solve the problem, it seems, however, there is another problem I just can't figure out how to solve. The image (

';

The problem is that this part does not accept inverted comas of any kind inside the brackets:

onmouseover="rolloverImage('img2','images/2m.gif');"

If I remove this coma: ' , the image doesn't change, if I leave it, there is a syntax error; if I put these comas: " , the image doesn't change. Any idea how to solve this mystery. It is driving me nuts!
Thanks,
Andy

Andy

Hi,

I think I just solved it by adding \' \' instead of ' or ". Thanks anyway!
Andy

Top54u

Hi Andy

Yes this is the right way to use the escape character \' \' with ' comma character while passing the parameters to the JavaScript function.

It's gr8 you solved it quickly.

manikandan

Hi,
How to insert text in Img Tag in html

raki

can any body help me onmouseover image(top of the page)
change the image at the bottom.If any body knows pls send me the code.

thanks in advance

Karan

hi
I would like to know how to load an image into html by calling it from a xml file..

Any help would be appreciated..

Thanks in advance.