✔ Layer überdecken verhindern

Status
Nicht offen für weitere Antworten.
dynamic-art hat gesagt.:
Probier es doch hier mal: die Wunderwelt CSS in all seinen Ausmaßen! Das ist u.a. eine Möglichkeite eine ImageMap mit CSS zu machen, Du findest aber auf der Page auch noch andere. Schau einfach mal welche Dir am besten gefällt.

http://www.cssplay.co.uk/menu/mantis

Viel Glück
Zum Vergrößern anklicken....

Ok ich hab mir alle Beispiele jetzt angeschaut und zum Entschluss gekommen, dass man mit CSS zwar Imagemaps im klassischen Sinn umgehen kann, jedoch das Überdecken nicht bzw. nur sehr umständlich umgehen kann (siehe Imagemap mit CSS )

oder sehe ich da was falsch?

Gruss Tom


edit:
der Begriff CSS-Imagemaps ist ein wenig irreführend, so etwas gibt es nicht. Die link-Tags bestehen aus Rechtecken und nicht aus Polygonen.
Man könnte dazu eher "Bilder verlinken mit CSS" sagen oder etwas eleganter "CSS-Imagelinking"...
:rolleyes:
 
Zuletzt bearbeitet:
Hallo dateninquisitor,

ich denke auch, dass der Begriff "CSS-Imagemap" irreführend und das "Hunde"-Beispiel von Stu Nicholls kaum praktikabel ist.

Du müsstest m.E. die Image-Map-Grafik über die Puzzelbilder legen, also die Image-Map-Grafik transparent machen und alles andere in mehreren Ebenen dahinter. Etwa so:
HTML: 
<body>
    <div id="rahmen">

        <div class="gebiet1-grn"></div>  <!-- Puzzelgrafik hier im Hintergrund -->
        <div class="gebiet1-glb"></div>
        <div class="gebiet1-rot"></div>
      
        <div class="gebiet2-grn"></div>
        <div class="gebiet2-glb"></div>
        <div class="gebiet2-rot"></div>

        <!-- usw. usf. -->

        <div class="img-map">
            <img src="transparentesBild.png" alt="Karte" usemap="#Landkarte">
            <map name="Landkarte">
                <area shape="poly" coords="..." href="#" alt="Gebiet 1">
                <area shape="poly" coords="..." href="#" alt="Gebiet 2">

                <!-- usw. usf. -->

            </map>
        </div>
    </div>    <!-- /#rahmen -->
</body>
CSS:
Code: 
div#rahmen, div#rahmen div, div#rahmen img {
    width: ...px;
    height: ...px;
}
div#rahmen {
    position: relative;
}
div#rahmen div {
    position: absolute;
}

div#rahmen div.gebiet1-grn {
    background: url(gebiet1_grn.png) no-repeat;
}
div#rahmen div.gebiet1-glb {
    background: url(gebiet1_glb.png) no-repeat;
    visibility: hidden;
}
div#rahmen div.gebiet1-rot {
    background: url(gebiet1_rot.png) no-repeat;
    visibility: hidden;
}

div#rahmen div.gebiet2-grn {
    background: url(gebiet2_grn.png) no-repeat;
}
div#rahmen div.gebiet2-glb {
    background: url(gebiet2_glb.png) no-repeat;
    visibility: hidden;
}
div#rahmen div.g2-rot {
    background: url(gebiet2_rot.png) no-repeat;
    visibility: hidden;
}

/* usw. usf. */
Die Farbe der Gebiete kannst du dann per JavaScript über die CSS-Eigenschaft "visibility" regeln, so wie du das in deinem ersten Beitrag angedeutet hast.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück