CSS mouseover image hover effect in iWeb?

Question

Level 1

10 points

CSS mouseover image hover effect in iWeb?

I've been trying to create an image hover effect when placing the mouse over an image or clicking on the image on my website made in iWeb. The only problem is that the HTML widget doesn't allow the image hover effect to only activate when the mouse is over the widget and not the image. If anyone know some simple code I could put into my website's HTML file, it would be great. It actually doesn't have to be a hover effect, the image just has to change on mouseover.

My website is temporarily located here: http://dl.dropbox.com/u/19707357/Website/Chocoa/tavlen.html

MacBook, Mac OS X (10.6.7)

Posted on Aug 16, 2012 8:53 AM

Reply

Answer 1

Roddy

Level 6

17,265 points

Aug 16, 2012 9:01 AM in response to Mlindberg

Are any of the examples on this page anything like what you want?

http://www.iwebformusicians.com/Website-Photos/Rollover-Image.html

Reply

Answer 2

Mlindberg Author

Level 1

10 points

Aug 16, 2012 9:24 AM in response to Roddy

I can't find the only on mouseover code on the page, and there doesn't seem to be a way to disable the linking :/

The biggest issue is the only on mouseover code not being there.

Reply

Answer 3

Roddy

Level 6

17,265 points

Aug 16, 2012 9:55 AM in response to Mlindberg

I referred you to that page to see if the effect was what you wanted! The examples use javascript.

You originally asked for CSS and its better to use this since the browser only has to load one image instead of two.

Here's an example of a rollover using CSS and a sprite...

http://www.iwebformusicians.com/iweb-snippets/sprite.html

Reply

Answer 4

Mlindberg Author

Level 1

10 points

Aug 16, 2012 10:07 AM in response to Roddy

Tried it and since the images are different sizes, it doesn't seem to work. The Javascript was actually really reponsive, but the problem is that the top HTML widget overlaps the others.

I was thinking that using CSS code would fix that, but it might not.

http://tavlen.tk/ shows how the top widget overlaps the other ones.

Reply

Answer 5

Roddy

Level 6

17,265 points

Aug 16, 2012 12:32 PM in response to Mlindberg

Try this using text rather than images...

http://96.0.63.10/iWeb-Test-2/tooltip.html

Reply