Skip to main content

Dynamic HTML (DHTML) Features

We can dynamically change web pages using scripts, eg: changing the size of text as the mouse pointer rolls over it. By far the most popular special effect on the Web is the mouseover (also known as a rollover): When the user places his mouse over an image, it gets replaced with a different image. (The usual effect involves restoring the original image when the user moves his mouse off the new image.) Unlike some effects that serve no useful purpose, a well-done mouseover can enhance the user's experience of the page by supplying visual cues about image links.

For example, the mouseover image could be a "highlighted" version of the image or an arrow that appears alongside the image. You can also use mouseovers to supply extra information about what an image link does. For example, the mouseover could display a text image that offers a description of the link.

How a mouseover might work:

Set up a handler for the MouseOver event that changes the src property of an Image object to display a different file. The MouseOver event is supported by the Link object. To use we surround the img tag with a href and a, and then add the onMouseOver attribute to the a href tag. For example, if the original image is named image1.gif and the mouseover image is named image2.gif, then we set up the mouseover as follows:

<a href="javascript:void(0)"
   onMouseOver="document.images['my_image'].src = 'image2.gif'">
<img src="image1.gif" name="my_image"></a>

The image is given the name my_image, so the image is changed to image2.gif by using the following MouseOver event handler statement:

document.images['my_image'].src = 'image2.gif'"

Congratulations! You've now reached the end of this section. You can go back to any topic by selecting it from the menu at the left-hand side of the page, or return to the home page for the Unit by clicking on the HN Computing logo at the top left-hand side.