Custom shaped HTML link?

Is it possible to make a custom shaped HTML link? Basically I have a circle divided into 4 quarter circles. I want each one to be a separate link with rollover images in each one. Is it possible to do something like this without flash?

Yes. One way is to give the link width and height and set it to display: block. You can then place the image on it as a background, and (preferably with a “sprite” image) have a different hover/rollover state. So it’s all done with CSS.

Look into §13.6.1 Client-side image maps: the MAP and AREA elements. Google will refer you to many examples and tutorials.



Here ya go…

And here’s something on image maps from SitePoint’s own HTML reference:, Enjoy! :slight_smile: