Onmouseover in div- bzw. map-tag

[Der Martin]

Hi,

bitte lass doch die Zitatmarkierungen, wie sie sind, damit man besser erkennt, was zitiert ist und was du neu hinzugefügt hast. Danke.

Zwischenfrage: Wozu die div-Elemente? [...]
Zwischenantwort: Die div-Elemente waren ein Tip. Die einzelnen Bilder müssen passgenau aneinanderkommen, weil sie gemeinsam ein großes Bild darstellen. Falls eine so genaue Positionierung auch ohne div möglich ist, will ich es versuchen.

Jedes Element lässt sich mit CSS positionieren. Ob das nun ein div, ein li oder ein img-Element ist, spielt zunächst keine Rolle.

Was meinst du mit "nicht überdecken, sondern zusätzlich erscheinen"?
Das neue Bild soll nicht an derselben Stelle erscheinen, an der der onmouseover-Effekt passiert, sondern an einer anderen Stelle.

Ja, das war anhand deiner Beschreibung klar.

Also: Ich gehe mit der Maus über ein Bild, dieses Bild bleibt sichtbar, und gleichzeitig erscheint an einer anderen Stelle ein anderes, ein zusätzliches Bild.
Das Problem wird noch größer: Jeder der Hotspots auf den Bildern im Kreis soll einen onmouseover-Effekt bekommen. Jeder mit einem anderen Bild, aber immer an der gleichen Stelle (in der Mitte des Kreises).

Wieso ist das ein Problem?

Ich hoffe es ist ein wenig deutlicher geworden?

Ja, ich denke schon. Geht sogar komplett ohne Javascript, rein mit CSS.

Dann denke ich mal ins Unreine. Ich sehe vor meinem geistigen Auge eine Liste (ol-Element). Jedes li-Element enthält zwei Bilder; eins ist außen auf einem Kreis positioniert, eines in der Mitte.

Das HTML dazu könnte trivial aussehen (ich hab's mal auf nur 4 Bilder außenrum beschränkt):

<ol id="karussell">  
 <li id="item00">  
  <img src="bild0.jpg" alt="1" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h1" class="hover" width="80" height="80">  
 </li>  
 <li id="item01">  
  <img src="bild1.jpg" alt="2" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h2" class="hover" width="80" height="80">  
 </li>  
 <li id="item02">  
  <img src="bild2.jpg" alt="3" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h3" class="hover" width="80" height="80">  
 </li>  
 <li id="item03">  
  <img src="bild3.jpg" alt="4" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h4" class="hover" width="80" height="80">  
 </li>  
</ol>

Das zugehörige CSS wird ein wenig umfangreicher und wächst natürlich mit der Zahl der Listenelemente:

#karussell  
 { position: relative;  
   width:    400px;  
   height:   400px;  
   background-color: #8080FF;  
   list-style-type: none;  
   margin: 0;  
   padding: 0;  
 }  
#karussell .menu  
 { position: absolute;  
   width:    80px;  
   height:   80px;  
 }  
#karussell .hover  
 { position: absolute;  
   width:    80px;  
   height:   80px;  
   top:      160px;  
   left:     160px;  
   display:  none;  
 }  
#item00 .menu  
 { top:      160px;  
   left:     0px;  
 }  
#item01 .menu  
 { top:      0px;  
   left:     160px;  
 }  
#item02 .menu  
 { top:      160px;  
   left:     320px;  
 }  
#item03 .menu  
 { top:      320px;  
   left:     160px;  
 }  
#item00:hover .hover  
 { display:  block;  
 }  
#item01:hover .hover  
 { display:  block;  
 }  
#item02:hover .hover  
 { display:  block;  
 }  
#item03:hover .hover  
 { display:  block;  
 }  

Ich gehe fest davon aus, dass es noch elegantere Lösungen gibt; das ist nur, was mir so auf die Schnelle einfiel. Für IE6 und älter versagt der Ansatz, weil diese Dinos :hover nur für Links unterstützen.

So long,
 Martin