For some reason I cannot make it work with the roll over image tutorial seen here:

http://iwebfaq.org/site/iWeb_Rollover_images.html

Situation: Using iWeb 09, publishing to a me.com account, checking the published website on both a PC and a MAC. NOT a html expert... at all!

Problems:
1. It WILL not show my original image, the one in the code after: <IMG SRC=, the one that should be showing, when the page is loaded and I have done nothing with the cursor. It only shows a questionmark after publishing. After I have rolled over the question mark the first time, it functions with NO problems! It shows both my normal.jpg and my rollover.jpg. Have been at this for hours now... (have even tried to erase the entire path to this image, after <IMG SRC=, and nothing happens, it just makes NO different!)
2. I cannot make it link to a page in my website!? I thought this would be straight forward, but I simply cannot make it work!

Lost for solution!! Hope anyone can help me!!

Please post your code and a link to the page. Otherwise I can't help you.

Link to the working page in question!:

http://web.me.com/lars.kohler/Skitse02/ ... fotos.html

The roll-over function is only assigned to the top left photo... well It kind of doesn't need explanation, since one is greeted by the questionmark in its place! This is the only thing I am working on here, before I progress with my site, so no other things are working!

Here's the code!:

<A HREF=’Destination URL’ target=”_top”
onmouseover="document.sub_but.src='http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimbasic.jpg'"
onmouseout="document.sub_but.src='http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimwhite.jpg'">
<IMG SRC=”http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimwhite.jpg” WIDTH="120" HEIGHT="120" BORDER="0" ALT="guggenheim" NAME="sub_but">
</A>

I will greatly appriciate your help!!!

Try this code here:

<a href='Destination URL' target="_top"
onmouseover="document.sub_but.src='http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimbasic.jpg'"
onmouseout="document.sub_but.src='http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimwhite.jpg'">
<IMG SRC= 'http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimwhite.jpg' WIDTH="120" HEIGHT="120" BORDER="0" ALT="guggenheim" NAME="sub_but">
</a>

To make a link write the URL instead of "Destination URL". Example:

<a href='http://www.guggenheim.org' target="_top"
onmouseover="document.sub_but.src='http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimbasic.jpg'"
onmouseout="document.sub_but.src='http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimwhite.jpg'">
<IMG SRC= 'http://web.me.com/lars.kohler/photoswebsite/thumbnails/guggenheimwhite.jpg' WIDTH="120" HEIGHT="120" BORDER="0" ALT="guggenheim" NAME="sub_but">
</a>

Regards,
Cédric

Hey Cedric

Thanx alot! It all works now! But the code that is working here, isn't the code you posted in your tutorial!? Do you know what is the reason why the original isn't working for me!?

Got a couple of other questions! Hope you can help me here as well!

1. First of all... managed to solve it, so I could have more than one button at the time on the same page! But It looks like the browser only loads the roll-over buttons, when they are rolled-over the first time!? Is this correct? Would it be possible to preload them, so there wouldn't be this delay in the roll-over function on the buttons?

2. secondly... do you know whether iweb compresses and crops the images placed on the pages and masked when the page is published, so they are not loaded as the original file size, but loaded as an optimised version with only the visible pixels shown? Just wanna know, whether I should do the big job of cropping the orginal high res images to the pixelsize they are placed on the site, or I could do it the fast way, and just drag the high res images in from my iPhoto library and masking them? Doing it the smart way... Cutting corners you know!

Really appriciate your help man!!!

The reason why it wasn't working was that it used quotes instead of apostrophes. It used to work in iWeb '08 anyway but not in iWeb '09. I updated the code on the site.

1. I don't think there is a way to preload the on-roll picture.

2. iWeb resizes the images on its own when publishing. They are full resolution in iWeb to allow you to enlarge or restrict them without quality loss but on the published site they aren't full resolution.

Of course the rollover picture is another issue since you don't publish it through iWeb but you put it directly on the server/MobileMe hence it doesn't get "optimized" by iWeb.

Regards,
Cédric