Kann CSS verwendet werden, um Mouseover-Effekte auf Imagemaps zu gestalten?

Kann CSS verwendet werden, um Mouseover-Effekte auf Imagemaps zu gestalten?

Das Erstellen einer Webseite mit einem Bild, das Links enthält, kann mit einem erreicht werden Bildkarte. Allerdings kann das Hinzufügen eines Hauchs von Interaktivität durch das Gestalten der Bereichsformen beim Mouseover das Benutzererlebnis verbessern. Ist dies mit CSS möglich?

Betrachten wir den folgenden Code:

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

Trotz Versuchen gelingt es diesem Code nicht, die Flächenformen beim Mouseover zu formatieren.

Nur ​​CSS-Lösung:

Anstelle der Verwendung des Image-Map-Ansatzes ist eine alternative Methode unter Verwendung der CSS-Pseudoklasse :hover verfügbar. Hier ist ein Beispiel:

<div class="area"></div>
<div class="area"></div>
<img src="image.jpg" />

.area {
    background: #fff;
    display: block;
    height: [desired height];
    opacity: 0;
    position: absolute;
    width: [desired width];
}
.area:hover {
    opacity: 0.2;
}

Erklärung:

• Das Bild wird auf der untersten Ebene platziert.
• Zwei div Elemente werden absolut über dem Bild mit einer Deckkraft von 0 positioniert.
• Wenn die Maus über diese div-Elemente fährt, erhöht sich die Deckkraft auf 0,2 und zeigt den Inhalt dahinter an.

Diese Methode bietet eine einfache und elegante Möglichkeit, mithilfe von CSS Mouseover-Effekte zu bestimmten Bereichen eines Bildes hinzuzufügen.

Das obige ist der detaillierte Inhalt vonKann CSS verwendet werden, um Mouseover-Effekte auf Imagemaps zu gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!