Expando Image script
Description: Expando is a simple script
for folks who want to have an image expand onMouseover (to its actual size).
This lets you display large images at a reduced size initially (aka
thumbnail size), and have them dynamically expand when the mouse rolls over
them. Installation is simple- install the script in the HEAD section of the
page, then give your "thumbnail" images a CSS class of "expando
".
These thumbnail images should have an explicit width/height attribute that's
less than the actual image's dimensions, so the script has something to
expand to.
Expando Image is AJAX friendly, meaning imported content with
images with the "expando
" class will be immediately recognized by
the script.
Demos:
Step 1: Insert the below code in the HEAD section of your page:
The above code references the external .js file "expando.js", which you need to download (right click, and select "Save As").
Then, all that's left is to shrink those large images on your page (by giving them an explicit width/height attribute that's smaller than the actual dimensions), and adding the CSS class "expando" to them. For example:
<p>
<img class="expando" border="0" src="amster2.jpg"
width="100" height="75">
<img class="expando vacation" border="0"
src="amster3.jpg" width="100" height="66">
<img class="expando" border="0" src="amster4.jpg"
width="100" height="75">
</p>
<p>
<img class="expando cat" border="0" src="cat.png"
width="200" height="88">
</p>
Have fun expandoing images!