Larger Image on mouseover

InfoInfo
Search:    

[WWW]The live example

ridge.gif Save that as ridge.gif

Now in webstudio, drag on an HTML object attach the above image (or use one of your own).
Double click on it and paste in this cool bit of css / javascript / html combo

<img src="$thisfolderurl$ridge.gif" style="width:100px;
border:2px solid black;" onmouseover="this.style.width='400px'" onmouseout="this.style.width='100px'" alt="" title="" />

Now when you mouse over the picture it'll be larger, then go back when you take your mouse off.


What's happening there?
You see the width:100px that's telling the browser to put the image on the screen at 100 pixels wide,
then I put a border around the image 'cause I like that look you can just delete that if you want to? border:2px solid black;
Then a bit of javascript tells it to be 400 pixels wide when you mouse is over the image and to go back to 100 again after the mouse is off.

You can change those if you want to but the 100 / 100 have to be the same, the 400 can be any size you want (within reason of course) ;)

It's a neat little trick.
I'd suggest using a placeholder graphic for the HTML object, that way it'll look like the picture on your page while you working on it.

webstudio2a.wmv A video of the above tutorial using the windows media player
[WWW]You Tube Video Right click open in a new tab

This is a Wiki Spot wiki. Wiki Spot is a 501(c)3 non-profit organization that helps communities collaborate via wikis.