Mouseover each of the images below, and watch it expand and contract. When one of the images is rolled-over, it's width is set to 64 pixels, double it's original size. When the mouse rolls off the image, the image's width is set back to the original size of 32 pixels.
Here is the important part of the image tag:
<img src="..." onmouseover="this.width='64';" onmouseout="this.width='32'" />
Using the "this" keyword allows us to directly access the properties of the image, rather than having to specify an ID, and use getElementById.
Images used in this example are courtesy of the good folks at IconBuffet.com.
Looking for more?
Back to Pew Pew Laser Articles