Question Balise de zone visible?


Comment puis-je rendre un html <area /> visible à tout moment, pas uniquement sur le focus?

Semble qu'il devrait être aussi simple que cela:

html:

<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>

css:

area {border: 1px solid red}

Peu importe ce que je fais, il semble que je ne peux pas affecter le style du tout, il semble vraiment immunisé contre les CSS. Des idées? Aussi, d'autres exemples de tags non-style-capable?


16
2017-12-15 11:13


origine


Réponses:


Plugin jQuery, MapHilight:

Vous pourriez trouver le plugin jQuery MapHilight (lien mort !!!) pour être intéressant ici.

Nouveau lien: https://github.com/kemayo/maphilight

Nouvelle démo: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/

Alternative HTML / CSS

Je suggère d'utiliser une div, avec des liens absolus à l'intérieur. La raison en est que cela va très bien se dégrader et afficher toutes les options comme une liste de liens. Les cartes d'images ne seront pas aussi conviviales. De plus, cette alternative donnera les mêmes résultats, avec des pratiques plus propres et plus modernes.

#myImage {
  position:relative; width:640px; height:100px; 
  background-image:url("bkg.jpg");
}
a.apples {
  display:block; position:absolute; 
  top:0; left:0; width:100px; height:100px;
  border:1px solid red;
}
a.taters {
  display:block; position:absolute;
  top:0; left:200px; width:25px; height:25px;
  border:1px dotted orange;
}
#myImage a span {
  display:none;
}

-

<div id="myImage">
  <ul>
    <li><a href="page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>

25
2017-12-27 03:39



le area tag définit simplement l'espace dans lequel l'utilisateur peut cliquer, il n'y a pas de représentation visuelle de celui-ci, donc vous ne pouvez pas vraiment utiliser CSS pour le styliser. J'aime l'endroit où vous vous dirigez, mais malheureusement, vous devrez probablement utiliser javascript pour superposer une image transparente en haut de votre carte-image pour accomplir ce que vous essayez de faire.


15
2017-12-15 15:50



Donc, ta question me touche. J'adorerais pouvoir faire quelque chose de similaire en utilisant des étiquettes de zone pour obtenir de belles petites «formes» autres que carrées pour les zones d'intérêt. J'ai donc fait quelques recherches et voici ce que j'ai trouvé:

http://www.netzgesta.de/mapper/

Ne semble pas que 100% fera ce que vous voulez, mais c'est peut-être un point de départ.


11
2017-12-29 19:53



Si seulement c'était si facile.

Si vous voulez dessiner des formes simples, vous pourrez peut-être y accéder en utilisant l'élément HTML <canvas>, qui est ce que les bibliothèques utilisent comme flot (IE nécessite l'émulateur excanvas).

Cela nécessitera toujours pas mal de Javascript, mais cela pourrait être plus facile / plus efficace que de manipuler des images superposées, surtout si les tailles de vos formes ne sont pas statiques. Il y a un bon tutoriel ici.


3
2017-12-27 03:57



Il y a une autre option. Vous pouvez écrire un SVG. Ensuite, vous pouvez voir la forme en définissant le remplissage: vert; opacité de remplissage: 1;

<svg height="300" width="200">
  <a xlink:href="http://stackoverflow.com/">
    <ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
  </a>
</svg>

2
2018-02-03 13:33