web-dev-qa-db-fra.com

Utilisation du survol de JQuery avec une carte-image HTML

J'ai une image d'arrière-plan compliquée avec beaucoup de petites régions qui nécessitent une surbrillance des illustrations, 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 à l'aide de z-index, et les illustrations de survol en surbrillance doivent être affichées dans l'une des couches "sandwich" intermédiaires pour obtenir l'effet souhaité.

Après quelques manipulations infructueuses de blocs, j'ai décidé que cela pourrait être fait avec une carte d'image de la vieille école. J'ai réalisé une carte de test schématique avec quatre contours de formes géométriques et les "remplis" à l'aide de survols en png. L’idée est d’associer la carte-image au calque d’arrière-plan inférieur, d’initialiser tous les survols avec css {visibilité: cachée} et d’utiliser la méthode de survol de Jquery pour les rendre visibles et de révéler le texte associé dans un div séparé. La fonction de texte séparée est la raison pour laquelle je n’essaie pas de faire cela avec la pseudoclassure: hover au lieu de jQuery hover. Parce que j'utilisais la carte graphique, j'ai créé tous les pngs de survol (qui ont des arrière-plans transparents) dimensionnés en fonction du conteneur complet pour un placement exact, de sorte que tout s'aligne avec précision.

Ce que j'ai obtenu fonctionne ... pas vraiment! La carte est correctement mappée pour n’activer que les zones géométriques. Mais la href de chaque zone de survol ne fonctionne que par intermittence et l'utilisation de la fonction de survol de Jquery avec visibilité en CSS est fausse. Le comportement souhaité est que rouler dans la zone rendrait simplement la forme solide. Ce qui se passe réellement, c’est qu’un mouvement à l’intérieur de la forme rend le basculement rapide entre visible et caché; lorsque le curseur s’arrête dans la forme, elle peut être visible ou non. Toutes les idées appréciées!

exemple de configuration de survol (j'utiliserai finalement des tableaux pour des survols réels, des liens et du 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>
javascriptjqueryhoverimagemap
65
boomturn

Vous devriez vérifier ce plugin:

https://github.com/kemayo/maphilight

et la démo:

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

vous pourriez peut-être emprunter du code pour réparer le vôtre.

60
mkoryak

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 certaines des faiblesses de Map Hilight (et c’était initialement une extension de ce plugin, bien qu’il ait été presque complètement réécrit depuis). Initialement, il s'agissait simplement de pouvoir conserver l'état de sélection des zones et de résoudre les problèmes de compatibilité du navigateur. Depuis sa publication initiale, il y a quelques mois, toutefois, j'ai ajouté de nombreuses fonctionnalités, notamment la possibilité d'utiliser une autre image comme source pour les points saillants.

Il permet également d'identifier les zones en tant que "masques", ce qui signifie que vous pouvez créer des zones avec des "trous" et créer en outre des regroupements complexes de zones. Par exemple, la zone A peut entraîner la mise en surbrillance d'une autre zone B, mais la zone B elle-même ne répond pas aux événements de souris.

Sur le site Web, quelques exemples montrent la plupart des fonctionnalités. Le référentiel github a également plus d'exemples et une documentation complète.

42
Jamie Treworgy

J'ai trouvé ce merveilleux script de mappage ( mapper.js ) que j'ai utilisé par le passé. Ce qui est différent, c’est que vous pouvez survoler la carte ou un lien sur votre page pour mettre la zone de la carte en surbrillance. Malheureusement, il est écrit en javascript et nécessite beaucoup de codage en ligne dans le code HTML - J'aimerais beaucoup voir ce script transféré sur jQuery: P

Découvrez également toutes les démos! Je pense que 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.

3
Mottie

Bien que le plugin jQuery Maphilight fasse le travail, il se base sur l’imagemap obsolète dans votre html. Je préférerais garder les coordonnées géographiques externes. Cela pourrait être comme JS avec le plugin jquery imagemap mais il manque des états de survol. Une solution intéressante est la visualisation de géomapes googles en flash et JS. Mais le futur opensource pour ce genre de vectordata est cependant svg, considérant le support de svg sur tous les navigateurs modernes, et googles svgweb pour un flash converti pour IE, pourquoi pas un plugin jquery pour ajouter des liens et hoverstates à une carte svg, comme la démo JS ici ? De cette façon, vous évitez également l'étape complexe de transformation d'une carte vectorielle en coordonnées imagemap.

2
newnomad