Javascript Change Image onmouseover

by top54u.com 30 Jun, 2008

Inside CSS tutorials | DHTML Tutorials | DOM Tutorials | HTML Tutorials | JavaScript Tutorials

CSS Style Image Rollovers Effects Using HTML Image Links

Javascript Code to Change Div Object innerHTML

Javascript Change Div Background Image onclick

HTML Div Tag Overflow CSS Style Scrollbars

Javascript Change Link Text Color onmouseover

Insert Image HTML Tag Using src and alt Attribute

Javascript Code to Change Text Color of HTML elements

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.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Javascript Change Image onmousever</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>

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

</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.

Download the following images to try them with sample code:

blue.gif