Cutting up a human face for links

So I'm trying to use a face as sort of a navigation tool in jQuery/css/html page. Is the best way to do this is by cutting up each element like the eyes the nose and the mouth and than align the开发者_开发技巧m using square divs on html? I feel that no matter how much I try it's not going to end up properly aligned? anyone have any suggestions?

Or you could use an image map : http://www.w3schools.com/TAGS/tag_map.asp

EDIT As Nick points out in the comments, you can have circle shapes as well. Best option for heads and eyes etc

I would leave the image fully intact as a single background image and position invisible <a> tags over the proper locations to act as links

I would not use CSS sprites here but leave it as a single image and overlay each "hot-spots" with anchor tags or the like. However CSS sprites are really cool and in other similar scenario's may be the best solution.

http://www.alistapart.com/articles/sprites

Do it as SVG? You could still use javascript to manipulate the location of parts of the SVG document.