Wie würdet ihr es lösen?

[Daniel Richter]

Hallo,

Ich habe ein ein Bild. Bestimmte kleine Bereiche des Bildes sollen sich per mouseover verändern und einen link beherbergen.

Sind die Bereiche rechteckig, oder sollen sie eine beliebige Form annehmen können?

Wäre es sinnvoll das Bild zu zerstückeln und in einer Tabelle wieder zusammenzufügen, oder mit divs zu arbeiten?

Ich würde ein CSS-basierte Lösung bevorzugen!

Wie würdet Ihr es lösen?

Wenn die Bereiche rechteckig sein können, wäre folgendes denkbar:

<ul class="imagemap">  
  <li><a href="..."><span class="alternate">Alternativtext</span></a></li>  
  ...  
</ul>

Anschließend bekommt die "imagemap" das Bild als Hintergrundbild zugewiesen und wird relativ positioniert. Die <li>s wiederum würde ich dann mit "position:absolute" an die vorgesehenen Plätze packen und den Alternativtext mit CSS in den Hintergrund verschieben (z-index).

Den hover-Effekt erreichst du dann mittels
.imagemap a:hover {background: ...}

Vorteil: funktioniert auch ohne JavaScript, und ist auch ohne CSS nutzbar. Selbst wenn Bilder deaktiviert sind.

mfg. Daniel