Onmouseover in div- bzw. map-tag

[Gunnar Bittersmann]

@@Noz:

nuqneH

Mal sehen ob ich alles verstanden habe: Ich sollte ein Gesamtbild machen, in dem ich die hotspots markiere.

Ja.

(Kann man auf einem HG-Bild hotspots platzieren?)

Nein. Das Gesamtbild müsste ein 'img'-Element mit @usemap sein.

An die area-Elemente knüpfe ich dann "Die Javascript-Lösung mit onmouseover-Handler". Wie?

<area shape="…" coords="…" onmouseover="…"/>. Noch besser: HTML und JavaScript getrennt.

Es bietet sich aber an, das Bild im Hintergrund zu lassen und unsichtbare clickbare Bereiche draufzulegen. Dann kannst du auch die von Martin vorgeschlagene CSS-Lösung verwenden (abgewandelt):

<ul id="foo">  
  <li id="area1"><img src="…" alt=""/></li>  
  <li id="area2"><img src="…" alt=""/></li>  
</ul>

mit

#foo  
{  
  background: url(…);  
  width: …;  
  height: …;  
  position: relative;  
}  
  
#foo li  
{  
  position: absolute;  
}  
  
#foo li img  
{  
  opacity: 0;  
  position: absolute;  
}  
  
#area1  
{  
  width: …;  
  height: …;  
  left: …;  
  top: …;  
}  
  
#area1:hover img  
{  
  left: …;  
  top: …;  
  opacity: 1;  
}  
  
#area2  
{  
  width: …;  
  height: …;  
  left: …;  
  top: …;  
}  
  
#area2:hover img  
{  
  left: …;  
  top: …;  
  opacity: 1;  
}

Vermutlich sollen da Links rein?

<ul id="foo">  
  <li id="area1"><a href="…">Link 1</a> <img src="…" alt=""/></li>  
  <li id="area2"><a href="…">Link 2</a> <img src="…" alt=""/></li>  
</ul>

Die Linktitel sollten vorhanden sein und mit CSS versteckt werden:

#foo li a  
{  
  opacity: 0;  
}

Qapla'