Image Map (Motorblock & daneben Teilebezeichnungen)

[wessli]

Hallo,
ich würde gerne fragen ob folgendes geht:

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.

Freue mich auch über Links zu dem Thema!
Euer wessli

[Felix Riesterer]

Lieber wessli,

ich glaube, eine Image Map ist für Dein Vorhaben ungeeignet. Du willst im Bild ja nichts anklickbar oder "hoverbar" machen, sondern im Bild etwas aufleuchten lassen, wenn man irgendwo anders einen Textbereich hovert.

Mein Lösungsansatz wäre dieser:

<ul id="teileliste">  
    <li id="motorbild"><img src="./pfad/motorbild" alt="Abbildung des Motors" /></li>  
    <li><a href="javascript:;" id="keilriemen">Keilriemen<span></span></a></li>  
    <li><a href="javascript:;" id="kurbelwelle">Kurbelwelle<span></span></a></li>  
...  
</ul>

Das Motorbild (und gleich das ganze erste <li>-Element) müsstest Du dann in seiner Position in Abhängigkeit der ganzen <ul> irgendwie positionieren. Sei es per float oder gar per position.

Und mit CSS kannst Du nun auf die leeren <span>-Elemente "zugreifen", sie absolut positionieren, ihre Größe individuell (dank der ID) einstellen und ebenso ein individuelles Hintergrundbild verpassen, das dann über das Motorbild zu liegen kommt. Wenn man den Link hovert, dann wird das Hintergrundbild des <span>-Elements sichtbar und im Bild leuchtet das entsprechende Teil auf. Und wenn Dein Hintergrundbild auch noch teiltransparent ist (Macken des IE beachten: AlphaImageLoader!), dann hast Du einen visuell sehr ansprechenden Effekt.

Hilft Dir das weiter?

Liebe Grüße,

Felix Riesterer.

[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

[wessli]

Danke Euch!
Ist leider doch nicht so leicht möglich wie ich dachte - mal sehen ob ich es hinkriege.