css3 übereinanderliegende Schaltflächen

**tschero** · 28.05.2013, 20:34

Hallo Leute,

ich habe vermutlich ein CSS Problem.
Auf folgender, schwindeliger Seite sollen an jeder Seite 2 Schaltflächen für eine individuelle Navigation erscheinen.
Diese, mit einem Bild hinterlegten Links sollen beim MouseOver den Zustand wechseln (anderes Bild).
Klappt auch soweit.

Aber, da die Bilder rechteckig sind wechseln die Zustände zum nächsten Link während der Mauszeiger sich noch auf dem ersten Link befindet.

Ich bin noch nicht ganz so fit in der Materie. Funktioniert sowas nur mit CSS oder muss man dazu scripten?

hier der Link

Gruß
tschero

**InitArt** · 28.05.2013, 20:58

Das kannst du entweder mit (HTML) Image-Maps oder Javascript lösen, rein mit CSS kannst du es ohne massiven extra markup nicht lösen.

***hofff*** · 29.05.2013, 07:44

Das löst du am besten mit einer ImageMap! Alles andere wäre Quatsch! Da gibt es auch eine relativ gute Erweiterung im ER ... nav_imagemap ... oder so.

fg
nicky

**tschero** · 29.05.2013, 07:46

Guten Morgen an alle,

vielen Dank für die Antworten.

habe mir Image Maps mal angesehen und werde das mal umsetzen.
Danke für den Tipp.

Gruß
tschero

**tschero** · 29.05.2013, 21:04

Hallo Leute,

die Sache mit der imagemap gefällt mir gut.
Ich habe, statt der Erweiterung, eigenen HTML Code verwendet und der funktioniert auch.

Wenn man jetzt mit dem Mauszeiger über die shop Schaltfläche "hovert", merkt man dass der Mauszeiger über der Mitte den "pointer" verliert da er sich eigentlich schon über dem Bild der Schaltfläche Kontakt befindet. Hier funktioniert dann auch der Link nicht.

Die div´s wurden absolut positioniert und überlappen sich gegenseitig.

Code:

div#btn_kontakt {
    display: inline;
    height: 185px;
    left: 781px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 201px;
    width: 194px;
}

Code:

div#btn_kontakt {
    display: inline;
    height: 185px;
    left: 781px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 201px;
    width: 194px;
}

Weiterhin suche ich eine Lösung für den "Hover Effekt" ohne Script. Geht das überhaupt?

Hier noch mal der Link.

Und hier der HTML Code für die imagemap:

Schaltfläche shop:

HTML-Code:

<div id="btn_shop" class="img_btn">
<p>
  <img  src="files/shirtqueen24_eu/_images/btn_shop.png" width="247" height="190" alt="shop" usemap="#shop">
  <map name="shop">
    <area shape="poly" coords="26,106, 148,26, 222,54, 86,162"
        href="http://shop.shirtqueen24.de/index.php"   alt="shirtqueen24 shop" title="shop">
  </map>
</p>
</div>

Schaltfläche kontakt:

HTML-Code:

<div id="btn_kontakt" class="img_btn">
<p>
  <img  src="files/shirtqueen24_eu/_images/btn_kontakt.png" width="194" height="185" alt="kontakt" usemap="#kontakt">
  <map name="kontakt">

    <area shape="poly" coords="7,101, 158,3, 175,52, 64,159"
        href="http://shop.shirtqueen24.de/shop_content.php?coID=7"   alt="shirtqueen24 kontakt" title="kontakt">
  </map>
</p>
</div>