What is the HTML code for onmouseover?

  • Thread starter Thread starter Justina Q.
  • Start date Start date
J

Justina Q.

Guest
I have 3 thumbnails and one large image. Rollover the mouse on the thumbnail of your choice and that image will appear on the large image. My images are stored on a third party website. I need step by step instructions how to do this please. Thanks!
 
here is an example of a rollover.

<!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=utf-8" />
<title>Untitled Document</title>
</head>


<body>
<img id="image1"
name="image1"
src="Images/turtle.jpg"
onclick=""
onmouseover="changeImage('image1', 'Images/rabbit.jpg');"
onmouseout="changeImage('image1', 'Images/turtle.jpg');"
/>
</body>
<script type="application/ecmascript">

function changeImage(elementID, imageUrl) {

var imageElement = document.getElementById(elementID);

imageElement.src = imageUrl;
}

</script>
</html>



The part that does the work is this part:

function changeImage(elementID, imageUrl) {

var imageElement = document.getElementById(elementID);

imageElement.src = imageUrl;
}

It is actually javascript. You call it in the onmouseover and onmouseout events specifying the id of the image element that you want to change the image for and the path to the image you want displayed. The onmouseout event is important you should revert back to the original image when someone moves away. In your case, it might be better the go to the big image in the onmouseclick event.
 
Back
Top