New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Expando Image script

  Author: Author: John Scheuer | Support

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:


Directions Developer's View

Step 1: Insert the below code in the HEAD section of your page:

Select All

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!