While current versions of iWeb weren't designed with Rollover Images in mind, there is no reason why you can't write them yourself. Today I'm going to share with you what I've learned. In Five Steps we will locate and edit the source code for a functional Image Rollover or two...



1. Locate Picture:

If your familiar with iweb you may have noticed that when saving your work under the "Publish To Folder " option, iWeb creates a file called "Site". All Your html files and pictures are within this folder. Sometimes iWeb
changes picture names while saving, so it's important that you locate where within this file and what your "image" is titled. Write it down.




2. Locate Picture in source code
Now that you know the location and title of your picture, lets find it in the source code.

1. From the site folder open the .html page that will display the image rollover. Then select View + Page Source
(copy all the code into Text Edit, making sure Text Edit is set on plan text .)

Now you are ready to find your picture within this coding.

2. Use Edit+find and type the title of your picture. Mine is 50-3.jpg
Once found, the code surrounding your image will look like this:

<img src="Images/50-3.jpg" alt="" style="border: none; height: 461px; left: 237px; opacity: 1.00; position: absolute; top: 139px; width: 373px; z-index: 1; " />

( 50-3.jpg being your pictures title, notice that the coding starts with <img and ends with /> ) double space the surrounding area to eliminate confession, like i did in the photo:

http://i177.photobucket.com/albums/w...como/code1.jpg




3. Replace and edit lines

Follow each step carefully. Bolded characters refer to portions of the script above.

1. After the /> type </a>

2. Type name="rollover1" after the .jpg" extension of your picture's title. Use a space before and after.

3. Now paste the following code above and before the <img

<a href="URL"

onmouseover="rollover1.src='PATH TO ROLLOVER IMAGE';"
onmouseout="rollover1.src='PATH TO NORMAL IMAGE';">


4. Replace 'PATH TO NORMAL IMAGE' with "images/50-3.jpg"
(with quotations. My picture is 50-3.jpg so you would type yours there instead.)

5. Replace 'PATH TO ROLLOVER IMAGE' with the title of your second image. Don't forget to add the "Images/ " because this represents the Images folder.

Lastly URL is a link. Try replacing it with the title of another .html file or web address.


Save your document as the .html page were you copied the source code from. This means you will save-overwrite a .html file from the site folder.


http://i177.photobucket.com/albums/w...ycomo/pic2.jpg


4. Add second image and your finished

Drop your second rollover image into the same location where you located the first one. You can now successfully view a working rollover.





5. Multiple Rollovers
Adding Multiple rollovers is fairly easy. Remember step 2 you located your image from the source code and wrote name="rollover1" after the title, well instead of writing name="rollover1"for your next rollover you'll write
name="rollover2" and also change the
onmouseover="rollover1.src= and onmouseout="rollover1.src= to two's and so forth.

Basically your adjusting the number of the rollover code.





Warning:
Saving in iWeb erases code and any other pictures not seen from iWeb.

Also remember that if you've created a shortcut such as a cut and past template for coding, the pictures on iWeb can't be moved around without having too adjust the coordinations in your coding.




Fin........
There is much trial and error involved but my advice would be to code last.



Credit to Max Karreth