The problem is pretty obvious…how can I restrict the clickable area to the link while still displaying the background images…in order to avoid all the jitter…thanks again…sorry for the multiple posts…
@CentauriJan 06.2008 — #Interesting effect - couldn't get it to flicker all three at once though ?
Pulling off something like this requires a bit of forward planning. The flicker is due to moving the link backwards in the z-index on hover to place the image behind the others. A better approach is to decide that what you have is going to be the final placement relationship between the circles, and include the overlap of adjacent circles within each graphic. The graphics should be pulled in as tight as possible around each circle (92px square in this case), and the rollover state can be included in each one as well to avoid the delay loading the second image. I reworked the graphics as such, and they are attached here.
The menu should be marked up as an unordered list (for semantics). The <a>s can floated and sized to the graphic (92px square) and the <li>s can also be floated and positioned in relationship with each other using negative margins to provide the overlap. As each graphic contains segments of the adjacent circles, the link can now be brought to the top on hover, giving an acceptable action of hovering off the currently hovered circle to activate the next.
Try this demo with the images I attached (images go in the /images folder) :[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } #nav { float: left; margin: 25px 0 0 15px; } #nav li { list-style: none; float: left; display: inline; } #nav a { float: left; width: 92px; height: 92px; line-height: 92px; text-align: center; text-decoration: none; color: #FF0000; text-transform: capitalize; background-image: url(images/circleft.gif); background-position: left top; } #nav a:hover { background-position: left bottom; color: #FFFFFF; position: relative; z-index: 10; } #nav .navlife { margin-left: -22px; } #nav .navlife a { background-image: url(images/circright.gif); } #nav .navhome { margin-left: -126px; margin-top: 58px; } #nav .navhome a { background-image: url(images/circbott.gif); } --> </style> </head>