CSS Rollover – Help Needed

[eyethomson]

Hi. First of all I am new to this forum so It’s great being here. Secondly, I am a complete newbie when it comes to CSS. I have a basic understanding of DW CS4.

I am a photgrapher and have been putting together my own website (any feedback would be appreciated!): http://www.eyethomson.com/. I am designing a webpage to showcase iPhone wallpaper: http://www.eyethomson.com/test_wallpaper/wallpaper/iPhone_wallpaper/iphone_wallpaper_index.html.

As you can see, the central image in the page is a blank iphone. There are thumbnails either side of it. When I rollover a thumbnail I want a rollover image to appear where the blank iphone image is, then restore on mouseout. I am currently using javascript to do this but it is proving to be a bit clunky (I added a DW CS4 behaviour to each thumbnail). Matters are complicated by the fact that I am using tool tips that are giving rise to problems, (i.e. image not restoring on mouse out).

Is there any way to do this with CSS? This is the code that I’m currently using which is attached to each thumbnail:

Code:

I have a vague idea that it can be done in CSS, I am just unsure as to how to apply any script to a page. My apologies for my lack of knowledge.

[Author]

Posts