How To Create Rollovers in iWeb Easy!

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

Hi, thanks for the tutorial.

I have been wanting to get rollover menus into my new iWeb site...

http://www.gotgotneed.com

...so tried your technique, but am not having any luck. I have zero html experience, so your very informative explanation has pointed me in the right direction, although I am inevitably doing something wrong. I set up a test page, with one button from my site, and was looking to make the type turn from white to black when rolled over. However, nothing seems to be happening.

There are differences in your html example and mine, but I assume that's down to our differing website. My files were all created in iWeb and have been saved as .png as opposed to .jpg, but I wouldn't have thought that mattered.

I have attached two images, mirroring your images from your explanation. Plus the files I am using, "shapeimage_1.png" was the original, "shapeimage_1a.png" the rollover effect.

http://www.gotgotneed.com/gotgotneed_1.jpg

http://www.gotgotneed.com/gotgotneed_2.jpg

http://www.gotgotneed.com/files.jpg

Can you tell me what I'm doing wrong?

Thanks in advance for your help,

Adam.

Here are some Ideas to try.

1. Make sure that after your .png or .jpg therea a identical ';"


2. All your rollovers and images are in a folder called images inside the site folder. Not the iweb _files folder.

3. After <img there should be the src=" line. You may want to remove the usemap=#map1" id=shapeimage_1" line.

4.have a look at my html work on site it was made with iweb.



5. Lastly i was only successful because i followed the video:

http://karreth.com/files/wordpress/v...s/rollover.mov

with the coinciding code:

<a href="URL"

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

<img src="PATH TO NORMAL IMAGE"
border="0" width="WIDTH IN PIXEL" height="HEIGHT IN PIXEL"
name="rollover1">

</a>





wish you luck.

Thanks again for getting back to me.

I have done a test at work on iWeb06, with a dummy site (as opposed to my main site at home using iWeb08) and the rollover links work just fine. The main mistake I was making was following your tutorial to the letter, so I replaced...

4. Replace 'PATH TO NORMAL IMAGE' with "images/50-3.jpg" (with my equivalent file)

...exactly, i.e. using "images/50-3.jpg"as opposed to 'images/50-3.jpg'

Now just to work out how to implement this onto my main site. The main headache I can see is what you referred to at the end of your guide - that every time you publish a site from iWeb it replaces EVERYTHING in the iWeb folder, which then obliterates the amended HTML and added files (for rollovers). Have you got a good system for this?

Thanks.

Yes, but it still requires me to cut and paste coding for the page i want to edit

When everything is finished i upload using Fetch. There my site can be untouched and wont be replaced when i save iWeb, since it's on a server. On the server you can add individual files without changing everything, like iWeb would.

It might seem crazy why i would use iWeb when i have GoLive and Dreamweaver.

He i tried to do this, but is doesnt work it only linkt to another html page but the images doesnt change.

<a href="route.html"

onmouseover="rollover1.src="image/route.png"';"
onmouseout="rollover1.src="image/route2.png"';">

<img src="route_files/route2.png" "name="rollover1" alt="" style="border: none; height: 225px; width: 300px; " />

</a>


could someone tell me what i am doing wrong?

I had similar problems. Try removing the inverted commas and replace with apostrophes, so instead of...

onmouseover="rollover1.src="image/route.png"';"
onmouseout="rollover1.src="image/route2.png"';">

you have...

onmouseover="rollover1.src='image/route.png';"
onmouseout="rollover1.src='image/route2.png';">

Also, try removing the inverted commas before name...

<img src="route_files/route2.png" "name="rollover1" alt="" style="border: none; height: 225px; width: 300px; " />

so it's just...

<img src="route_files/route2.png" name="rollover1" alt="" style="border: none; height: 225px; width: 300px; " />

Okay it works fine now, thanks
But uhhm someone knows if i clould change the position of the second picture when i rollover.

onmouseover="rollover1.src="image/route.png"';"

I want that this picture comes higher than the other.