Image Map (Motorblock & daneben Teilebezeichnungen)

[Der Martin]

Moin,

Image Map wo links ein Motor abgebildet ist und rechts im Bild eine textuelle Motor-Teileliste.
Bewege ich jetzt den Mauszeiger rechts auf einen Eintrag der Teileliste (z.B. Keilriemen) soll gleichzeitig links im Motorbild der Keilriemen farblich hervorgehoben werden.
Das ganze soll soll OHNE Javascript - nur mit HTML & CSS realisiert werden. Es muß auch keine Image Map sein wenn es anders besser geht.

ja, das ist möglich - aber es wird eine ziemliche Fleißarbeit.
Du brauchst das Gesamtbild des Motors, und ein eingefärbtes Teilbild für jedes Teil, das du hervorheben willst. Diese Teilbilder müssen einerseits Kindelemente des Listenelements sein, über dem du "hovern" willst, andererseits aber absolut außerhalb dieses Elements positioniert werden, damit sie an der richtigen Stelle das Gesamtbild überlagern.

Schematisch:

<ul id="sketch">  
 <li><a href="schwungrad.htm">Schwungrad<img src="schwungrad.png" alt="" id="schwungrad"></a></li>  
 <li><a href="keilriemen.htm">Keilriemen<img src="keilriemen.png" alt="" id="keilriemen"></a></li>  
</ul>

#sketch  
 { position: relative;  
   padding: 0;  
   width: 800px;  
   height: 400px;  
   background-image: url(motor.png);  
   background-repeat: none;  
   background-position: left top;  
   list-style-type: none;  
 }  
#sketch li  
 { margin-left: 500px;  
   padding: 0.25em 0;  
 }  
#sketch li img  
 { display: none;  
 }  
a:hover #schwungrad  
 { display: block;  
   position: absolute;  
   top:  281px;  
   left: 104px;  
 }  
a:hover #keilriemen  
 { display: block;  
   position: absolute;  
   top:  164px;  
   left:  72px;  
 }  

Ich habe hier das Gesamtbild als Hintergrundbild einer Liste gesetzt, halte die li-Elemente über ein großzügiges, der Bildbreite entsprechendes margin-left auf Abstand und positioniere dann jedes overlay-bild absolut innerhalb des ul-Elements. Damit das ul als Bezugspunkt für absolute Positionierung gilt, bekommt es selbst ein position:relative.

Falls einem der IE6 egal ist, kann man die Links innerhalb der li-Elemente auch weglassen und stattdessen auf li:hover aufbauen.

Der ganze Entwurf soll nur als Denkanstoß gelten - ich habe ihn vor allem nicht getestet.

So long,
 Martin