Hallo,
Oder was man sonst nehmen kann.
Vielleicht weiß das ja jemand oder hat ähnliches schonmal gemacht.
folgendes mal ganz allgemein zu deinem Vorhaben:
Eine 1:1 Entsprechung der HTML Image-Map in CSS gibt es nicht. Das bedeutet, du brauchst für jeden einzelnen "Hover-Punkt" auch ein eigenes HTML-Element. Diese sind von ihrer (visuellen) Form her immer viereckig. Hinzukommt, dass die IEs <= 6 :hover nur für Links (<a>) unterstützen.
Machbar ist es aber (mit mehr oder weniger viel Aufwand).
Hier nur mal ein Beispiel, wie man so etwas realisieren kann.
Google kann dir ggf. auch noch weiterhelfen.
Ich selbst habe so etwas bisher noch nicht benötigt, deshalb kann ich nicht aus eigener Erfahrung urteilen, aber:
Meiner Meinung nach lässt sich das Ganze wesentlich einfacher (mit viel weniger Aufwand) per Javascript lösen, oder auch mit einer Kombinationslösung aus JS + CSS. Natürlich mit dem Nachteil verbunden, dass es eben bei deaktiviertem JS nicht mehr "funktioniert".
Welche Variante man also wählt, sollte man im Einzelfall sorgfältig abwägen (Aufwand <-> Nutzen).
Gruß Gunther