Est-il possible de styliser un survol de souris sur une image cliquable en utilisant CSS ?

Question

J'ai une image sur une page Web qui nécessite également des liens. J'utilise une carte-image pour créer les liens et je me demande s'il existe un moyen de styliser la forme de la zone au passage de la souris pour une touche mineure d'interactivité. Est-ce possible?

J'ai essayé ceci sans succès :

html

 <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>

css

 area { border: 1px solid #d5d5d5; }

Aucune suggestion?

Answer 1

Avec des pseudo éléments.

HTML :

 <div class="image-map-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />
    <div class="map-selector"></div>
</div>

<map name="image-map" id="image-map">
    <area alt="" title="" href="#" shape="rect" coords="54,36,66,49" />
    <area alt="" title="" href="#" shape="rect" coords="72,38,83,48" />
    <area alt="" title="" href="#" shape="rect" coords="56,4,80,28" />
    <area alt="" title="" href="#" shape="rect" coords="7,7,45,46" />
    <area alt="" title="" href="#" shape="rect" coords="10,59,76,125" />
    <area alt="" title="" href="#" shape="rect" coords="93,9,199,122" />
</map>

quelques CSS :

 .image-map-container {
    position: relative;
    display:inline-block;
}
.image-map-container img {
    display:block;
}
.image-map-container .map-selector {
    left:0;top:0;right:0;bottom:0;
    color:#546E7A00;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, color;
}
.image-map-container .map-selector.hover {
    color:#546E7A80;
}

.map-selector:after {
    content: '';
    position: absolute;
    top: inherit;right: inherit;bottom: inherit;left: inherit;
    background: currentColor;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, background;
    pointer-events: none;
}

JS :

 $('#image-map area').hover(
    function () { 
        var coords = $(this).attr('coords').split(','),
            width = $('.image-map-container').width(),
            height = $('.image-map-container').height();
        $('.image-map-container .map-selector').addClass('hover').css({
            'left': coords[0]+'px',
            'top': coords[1] + 'px',
            'right': width - coords[2],
            'bottom': height - coords[3]
        })
    },
    function () { 
        $('.image-map-container .map-selector').removeClass('hover').attr('style','');
    }
)

https://jsfiddle.net/79ebt32x/1/

Answer 2

Je ne pense pas que cela soit possible en utilisant simplement CSS (pas du moins un navigateur croisé), mais le plugin jQuery ImageMapster fera ce que vous recherchez. Vous pouvez définir, colorier ou utiliser une image alternative pour les états de survol/actif sur une image cliquable.

http://www.outsharked.com/imagemapster/examples/usa.html

Answer 3

Voyez si ce lien vous aide : http://www.frankmanno.com/ideas/css-imagemap/