28112 sujets

CSS et mise en forme, CSS3

Hover sur un map/area

Bonjour à tous,

Un sujet semblable a déjà été préalablement ouvert sur le forum, malheureusement le sujet est clos sans être résolu pour ma part...

La solution de Juju57 ne m'apporte pas la solution escomptée, rien ne se passe.

Auriez-vous une alternative à me proposer pour affecter un style différent aux zones survolées d'une image "mappée"?

Merci pour votre aide,

Reka

NB : j'ai essayé de faire une recherche sur le forum mais, bizarrement, quand je tape "hover map" ou "hover area" (n'importe quand, sujets et contenus des sujets), j'obtiens comme résultat "Aucun résultat : Les termes de recherche doivent être constitués d'au moins 4 caractères."
Or, euh...? Le lien plus haut, je l'ai trouvé via Google, et il répond aux critères de ma recherche il me semble.
Bonjour Reka,

En appliquant une class ou un id à chaque area que tu veux styliser, tu dois pouvoir ensuite à l'aide de jquery (ou autre) modifier le css:


<map name="map" id="map">
    <area title="123" class="area_1" href="#" shape='rect' coords='0,26,192,52' />
    <area title="231" class="area_2" href="#" shape='rect' coords='0,53,192,76' />
    <area title="321" class="area_3" href="#" shape='rect' coords='0,77,192,103' />
</map>



$('.area_1').hover(
       function(){ $(this).css(...) },
)

Modifié par hchtot (27 Feb 2015 - 14:42)
Modérateur
bonjour!

Les areas ne sont pas stylisable par défaut. Si ce serait imaginable avec des rectangles, pour les polygones et les cercles ça nécessiterait pas mal de réécriture des moteurs de style.

Deux manière de faire autrement:

1) Utiliser du svg, c'est fait pour remplacer ces antiquités de map. http://caniuse.com/#feat=svg
2) Tu peux créer un pseudo-polyfill qui va analyser ta map pour poser une div là où il faut quand il faut. C'est assez lourd et très limité (uniquement des rectangles).
Sujet clos
Aller à