2 replies [Last post]
nielsdl
nielsdl's picture
Offline
newbie
Gothenburg
Last seen: 12 years 15 weeks ago
Gothenburg
Timezone: GMT+1
Joined: 2010-01-21
Posts: 2
Points: 3

Hi there

Im trying to create a rollover image menu that basically has 3 images. One for inactive, one for hover and one for active link. Im currently in Dreamweaver CS4 and have tried using rollover image which doesnt seem to be an option. I have also tried changing the background position depending on status of the current div, such as, a:hover or a:active.
Im unable to get anywhere with these and would be thankful if someone could paste me a couple of lines in the right direction.

Thanks
Niels

tmharsh
Offline
Regular
Owosso, MI
Last seen: 12 years 13 weeks ago
Owosso, MI
Timezone: GMT-5
Joined: 2009-06-22
Posts: 27
Points: 26

DW doesn't generally use the

DW doesn't generally use the best solutions. When DW creates this type of menu, it uses JavaScript, which is unnecessary since it can be done with CSS. You can have each of the anchor behaviors (a:link, a:hover, a:active) have their own background image. However, this will cause the menu items to flash when first used as the images for each state don't load until used. The best way to do this is to create a single image with all three states. You then use the background position property to shift the image for each anchor behavior. This means all of the states load with the page and their will be no blinking.

So lets say you have a menu item that has a height of 20px and a width of 50px. You would then create a background image with the states stacks, so the image will have a height of 60px and a width of 50px. You would have something like this in your CSS...

#menu a {display:block; height:20px; width:50px; background:url(menu_bg.gif) no-repeat 0 0;}
 
#menu a:hover {background-position:0 20px;}
 
#menu a:active {background-position:0 40px;}

nielsdl
nielsdl's picture
Offline
newbie
Gothenburg
Last seen: 12 years 15 weeks ago
Gothenburg
Timezone: GMT+1
Joined: 2010-01-21
Posts: 2
Points: 3

I have tried a similar

I have tried a similar approach but didnt get it working. This seems better though.
Thanks alot!