Javascript Change Image onmouseover

by top54u.com 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.

 

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

 


green.gif

Spotlight.....

Currently rated 2.0 by 2 people

  • Currently 2/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , , , , , , , , , ,

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

10/11/2008 3:18:26 AM




related videos.....
recent posts.....
top54u ezines.....