Bildkarten-Mouseovers mit CSS gestalten

Beim Erstellen interaktiver Webseiten ist es oft notwendig, Bilder mit anklickbaren Bereichen einzubinden. Typischerweise wird dies mithilfe von Imagemaps erreicht. Es hat sich jedoch als schwierig erwiesen, diese Bereiche beim Mouseover zu gestalten, um zusätzliche Interaktivität zu bieten.

In der Vergangenheit war der Versuch, diese Bereiche mithilfe von CSS zu gestalten, nur begrenzt erfolgreich, wie das folgende Beispiel zeigt:

area { border: 1px solid #d5d5d5; }

Nur-CSS-Lösung

Glücklicherweise gibt es eine einfache Problemumgehung, bei der nur CSS verwendet wird:

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}
Bei diesem Ansatz werden transparente Blöcke über dem Bild platziert, die jeweils einen anklickbaren Bereich darstellen. Indem die Deckkraft standardmäßig auf 0 gesetzt und beim Schweben auf 0,2 erhöht wird, wird ein subtiler Mouseover-Effekt erzielt.