iWeb FAQ - Rollover buttons (or images)



How can I add a Rollover images or Rollover buttons to my iWeb created site? How can I add a Rollover image with fade effect?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch

What is an image rollover? When you put the mouse pointer over the image (hover) the image changes. It’s pretty easy to have this kind of mouseover effect.

Chapter 1: Rollover buttons or images

Chapter 2: Rollover buttons or images with fade effect

Chapter 1: Rollover buttons or images

All you need to do is copy and paste the following code into an HTML Snippet:

<a href='Destination URL' target="_top" onmouseover="document.sub_but.src='http://yourdomain.com/onroll.jpg'" onmouseout="document.sub_but.src='http://yourdomain.com/normal.jpg'">

<img src="http://yourdomain.com/normal.jpg" width="281" height="55" border="0" alt="Move your mouse over me" name="sub_but">


And change the parameters in red as follows...

- Destination URL: is the URL you want the button to link to.

- target=”_top” opens the link in the same window. If you want it to open in a new window replace _top with _blank

- http://yourdomain.com/onroll.jpg is the url of the image that displays when someone points the mouse over it

- http://yourdomain.com/normal.jpg is the url of the image displaying when the mouse isn’t over it (note that you need to insert it twice in the code)

- Change width and height to fit your case

That’s it.

Example (move your mouse over it):

Don't want it to be a link? Just change

<a href='Destination URL' target="_top"


<a nohref target="_top"

To have multiple rollovers in one HTML Snippet or to add multiple rollovers on the same page with Alternative HTML give each rollover button a different name. In the examples above the name of the button is sub_but displaying three times per code.

How do I know what the url of the image is in my case?

1. Create a new folder in the folder you publish your website to from iWeb

2. Name this new folder something like 'files' or ‘media’ or whatever

3. Copy your .jpg or any other image file to that folder

4. Upload the folder to your server using your FTP application

5. http://yourdomain.com/nameofthefolder/nameofthefile.extension is the address at which the file will be stored on the web

Example: http://yourdomain.com/media/nameofthefile.jpg

More info here.

Chapter 2: Rollover buttons or images with fade effect



How this is done is described in my iWebFAQ.org E-Book (sample)

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.

Thank you for visiting and supporting my website,

- Cédric -