iWeb Tip #13 – Rollovers in iWeb

It’s always fun to add some user interaction to your website and currently the only rollover like interaction iWeb gives us is text rollovers as links.  Well this post is to show you how to get image rollovers on your iWebsites.  Here we go:

See Demo

Step 1) Make 2 graphics. One that is the up/normal state, or what you want to be up when the users mouse is not over the image.  Then make the other graphic the rollover state or what the graphic will look like when you roll the mouse over it.

Step 2) Size those 2 graphics as small as you can get them without losing quality.  Photoshops save for web features works good for this, but you can get this effect just as easy by opening it with Preview and saving as jpeg and adjusting the quality.

Step 3) Put those 2 graphics on your server.  You can use the iDisk with MobileMe or your own server.  Just make a folder somewhere on the server perhaps call it “rollover_images” or something like that.  If your putting it on MobileMe make the folder in this location: iDisk/Web/Sites/rollover_images . Then the URL to the images will look something like this: For MobileMe—https://web.me.com/username/rollover_images/rollover.jpg or if you using your own host it would be —https://www.yoursite.com/rollover_images/rollover.jpg in which you would put the folder right on the root level of your public server.

Step 4) Then simply copy the code below and paste into a snippet.

<script type="text/javascript"> function mouseOver()
{document.rollover_one.src ="https://web.me.com/username/rollover_images/rollover.jpg"}
function mouseOut()
{document.rollover_one.src ="https://web.me.com/username/rollover_images/normal.jpg"}
</script>
<a href="https://www.your_button_link_here.com">
<img alt="Link Title" src="https://web.me.com/username/rollover_images/normal.jpg" name="rollover_one" width="175" height="175" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>

Step 5) Replace what’s in red with your URL’s to your images and image sizes and put in what link you want it to go to by replacing the iwebunlimited link and your set.

Note: If you’d like the link to open in a new page replace the link

<a href="https://www.iwebunlimited.com">

with

<a href="https://www.iwebunlimited.com" target="_blank">