Wie können Sie mit CSS Mouseover-Effekte auf Imagemaps erzielen?

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:

<img src="/static/imghwm/default1.png" data-src="{main_photo}" class="lazy" alt="locations map" usemap="#location-map">
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="%7Bsite_url%7Dlocations/grand_bay_al">
    <area shape="rect" coords="307,214,364,226" href="%7Bsite_url%7Dlocations/mobile_al">
    <area shape="rect" coords="317,276,375,290" href="%7Bsite_url%7Dlocations/loxley_al">
</map>

area { border: 1px solid #d5d5d5; }

Nur-CSS-Lösung

Glücklicherweise gibt es einen einfachen Workaround, der nur CSS verwendet:

<div class="area">
<pre class="brush:php;toolbar:false">.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 transparent Über dem Bild werden Blöcke 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.