28172 sujets

CSS et mise en forme, CSS3

Appliquer des styles CSS sur les éléments map

Bonjour,

J'ai dans ma page une map en HTML pour avoir une image cliquable, il y a dix liens qui renvoient vers d'autres pages interne du site. Je voudrais appliquer un effet en CSS3 aux liens la map pour qu'au survol de la souris il y ait un effet de grossissement, j'ai inséré les éléments suivants dans ma page mais je n'ai pas l'effet voulu: 

<img src="/images/bandeau.png'; ?>" width="1000" height="152" border="0" usemap="#map"  />

    <map name="map">  
      <area class="communes_map_area" shape="rect" coords="230,122,297,144" href="commune1.html" />
      <area class="communes_map_area" shape="rect" coords="311,127,445,147" href="commune2.html" />
      <area class="communes_map_area" shape="rect" coords="459,132,516,146" href="commune3.html" />
      <area class="communes_map_area" shape="rect" coords="527,131,582,147" href="commune4.html" />
      <area class="communes_map_area" shape="rect" coords="596,133,626,146" href="commune5.html" />
      <area class="communes_map_area" shape="rect" coords="637,131,690,145" href="commune6.html" />
      <area class="communes_map_area" shape="rect" coords="704,128,754,143" href="commune7.html" />
      <area class="communes_map_area" shape="rect" coords="771,122,827,136" href="commune8.html" />
      <area class="communes_map_area" shape="rect" coords="839,113,919,130" href="commune9.html" />
      <area class="communes_map_area" shape="rect" coords="931,99,997,119" href="commune10.html" />
    </map>


Le CSS associé (cela provient de https://github.com/IanLunn/Hover) :

map .communes_map_area {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

map .communes_map_area:hover, map .communes_map_area:focus, map .communes_map_area:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


Auriez-vous une idée d’où vient le souci ?

Merci d'avance
Bonjour,

tu pourrait en passer par display surmap puis area, puis transform:scale(); mais Firefox resteras impassible a tes tentatives.
une démo à voir dans Firefox et les autres : http://codepen.io/gcyrillus/pen/AJHmt
Bref , si tu fais l'impasse sur firefox , tu peut tenter de styler ton map et tes area .... mais ça reste aléatoire, rigide et surtout difficile a maintenir, sans compter des surprises possibles au fur et mesure des mises à jours des navigateurs.
Modifié par gc-nomade (19 Feb 2015 - 21:28)
xillibit a écrit :
Est-ce que j'ai d'autres alternatives qui marcheraient ?

A la suite gc-nomade, je pense à une autre "technique" ; mais là je crains que tu doives reprendre tout ton travail en migrant au .svg (Scalable Vector Graphics) : là, le javascript te permettra une gamme infinie d'effets.

Mais pour m'être plongé moi-même dans le monde du .svg il y a quelques temps, sans pour autant dire que la bête est difficile à dompter, sa maîtrise demande du temps et beaucoup de réalisations. C'en serait presqu'un job de pros ...

A toi d'en déterminer l'absolue nécessité.
Sujet clos
Aller à