Utilisation de JQuery hover avec une carte d'image HTML

Question

J'ai une image d'arrière-plan compliquée avec beaucoup de petites régions qui doivent être mises en évidence par une illustration de type "rollover", ainsi qu'un affichage de texte supplémentaire et des liens associés pour chacune d'elles. L'illustration finale empile plusieurs images statiques avec transparence en utilisant l'indice z, et les illustrations de surbrillance doivent s'afficher dans l'une des couches "sandwich" intermédiaires pour obtenir l'effet souhaité.

Après quelques manipulations infructueuses avec des blocs, j'ai décidé que cela pourrait être fait avec une carte image de la vieille école. J'ai fait une carte de test schématique avec quatre contours de formes géométriques et je les ai "remplis" en utilisant des rollovers en png. L'idée est d'associer la carte d'images à la couche de fond inférieure, d'initialiser tous les rollovers avec css {visibility : hidden} et d'utiliser la méthode de survol de Jquery pour les rendre visibles ainsi que pour révéler le texte associé dans un div séparé. La fonction de texte séparé est la raison pour laquelle je n'essaie pas d'utiliser la pseudoclasse :hover au lieu de la méthode jQuery hover. Comme j'utilisais l'image map, j'ai fait en sorte que toutes les pngs de rollover (qui ont des fonds transparents) aient la taille du conteneur complet pour un placement exact, afin que tout s'aligne précisément.

Ce que j'ai obtenu fonctionne... pas vraiment ! L'image map est correctement mappée pour activer uniquement les zones géométriques. Mais le href de chaque zone de rollover ne fonctionne que par intermittence, et l'utilisation de Jquery hover avec la visibilité css est perturbée. Le comportement souhaité est que le fait de rouler dans la zone rende simplement la forme solide. Ce qui se passe en réalité, c'est que tout mouvement à l'intérieur de la forme entraîne un basculement rapide entre visible et caché ; lorsque le curseur s'arrête à l'intérieur de la forme, celle-ci peut être visible ou non. Toute idée est la bienvenue !

exemple de configuration de survol (je vais finalement utiliser des tableaux pour les vrais survols, les liens et le texte associés) :

$('#triangle').hover(
    function() {
        $('#ID_triangle').css({'visibility' : 'visible'});
    },
    function() {
        $('#ID_triangle').css({'visibility' : 'hidden'});
    }
)

carte d'image :

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Answer 1

Vous devriez vérifier ce plugin :

https://github.com/kemayo/maphilight

et la démo :

http://davidlynch.org/js/maphilight/docs/demo_usa.html

si quelque chose, vous pourriez être en mesure d'emprunter un peu de code de celui-ci pour réparer le vôtre.

Answer 2

Cette question est ancienne mais je voulais ajouter une alternative à la réponse acceptée qui n'existait pas à l'époque.

Image Mapster est un plugin jQuery que j'ai écrit pour résoudre certains des défauts de Map Hilight (et c'était initialement une extension de ce plugin, bien qu'il ait depuis été presque entièrement réécrit). Au départ, il s'agissait juste de la possibilité de maintenir l'état de la sélection pour les zones, de corriger les problèmes de compatibilité avec les navigateurs. Depuis sa sortie initiale il y a quelques mois, j'ai ajouté de nombreuses fonctionnalités, notamment la possibilité d'utiliser une autre image comme source pour les points forts.

Il a également la capacité d'identifier des zones en tant que "masques", ce qui signifie que vous pouvez créer des zones avec des "trous" et, en outre, créer des groupements complexes de zones. Par exemple, une zone A pourrait faire en sorte qu'une autre zone B soit mise en évidence, mais la zone B elle-même ne répondrait pas aux événements de la souris.

Il y a quelques exemples sur le site web qui montrent la plupart des caractéristiques. Le site Dépôt Github contient également plus d'exemples et une documentation complète.

Answer 3

J'ai trouvé ce merveilleux mapping script ( mapper.js ) que j'ai utilisé dans le passé. Ce qui est différent à son sujet, c'est que vous pouvez survoler la carte ou un lien sur votre page pour faire ressortir la zone de la carte. Malheureusement, il est écrit en javascript et nécessite beaucoup de codage en ligne dans le HTML. J'aimerais beaucoup que ce script soit porté sur jQuery :P

Regardez aussi toutes les démos ! Je pense cet exemple pourrait presque être transformé en un simple jeu en ligne (sans utiliser le flash) - assurez-vous de cliquer sur les différents angles de caméra.

Answer 4

Bien que le plugin jQuery Maphilight fasse le travail, il s'appuie sur l'imagemap verbose périmée dans votre html. Je préférerais que les coordonnées de la carte soient externes. Cela pourrait être comme JS avec le plugin jquery imagemap mais il manque les états de survol. Une solution intéressante est la visualisation de la carte géographique de Google en flash et en JS. Mais l'avenir de l'opensource pour ce type de données vectorielles est svg, étant donné le support svg dans tous les navigateurs modernes, et le svgweb de google pour une conversion flash pour IE, pourquoi pas un plugin jquery pour ajouter des liens et des états de survol à une carte svg, comme la démo JS. aquí ? De cette façon, vous évitez également l'étape complexe de transformation d'une carte vectorielle en coordonnées de carte d'image.