Display the frame of an image on mouse-over

Dress up your pages with stunning mouse-over effects. For example, you can display a frame around your images when the mouse cursor is placed over them.

To obtain this result, simply add two small attributes to the definition of your image:

<img name="image_1" src="my_picture.gif" onmouseout="this.border=0" onmouseover="this.border=1" border="0">

Don't forget to personalize this code with the filename that corresponds to your image (here my_picture.gif) and the name of your image within the page (here image_1). This last tip can be useful if your image is used for other JavaScript or DHTML functions.

Result:



Discover all Webmaster tips.