Image contextuelle sur le survol, avec texte contextuel tiré de la base de données

J'ai une carte personnalisée des États-Unis avec environ 20 points chauds polygonaux. Je voudrais qu'une boîte apparaisse à côté de chaque point chaud en vol stationnaire, avec du texte et des liens tirés de ma base de données spécifique à l'emplacement. J'aurais pensé que c'était une situation courante, mais je ne trouve pas de solution qui fonctionne. J'ai essayé d'utiliser un asp: imagemap et un extendeur de popup ajax mais vous ne pouvez pas assigner d'ID aux hotspots et il ne supporte pas les événements mouseover. J'ai essayé css avec une carte d'image html mais je ne peux pas comprendre comment utiliser les solutions CSS avec des points chauds polygonaux, et je ne sais pas comment le lier pour obtenir les données de la db sans cibles asp (je suis pas très familier avec jquery, ce qui fonctionnerait, je devine). Quelqu'un sait-il des solutions simples là-bas?Image contextuelle sur le survol, avec texte contextuel tiré de la base de données

Source

2010-05-13 lbholland

Le meilleur exemple du type de fonctionnalité de boîte de pop-up dont j'ai besoin est Google Maps, avec des boîtes de pop-up qui restent ouvertes pour que l'utilisateur puisse accéder aux liens qu'il contient. Je suis prêt à abandonner la fonctionnalité hover et à me contenter de clics. En fait, je voulais simplement utiliser Google Maps, mais le concepteur insiste sur l'utilisation d'un graphique de carte personnalisé. – lbholland

Cela nécessite une solution javascript (avec des données fournies bien sûr côté serveur). Avez-vous déjà vu Using JQuery hover with HTML image map pour vous aider à démarrer? En fait, la réponse fournie fournit un lien vers http://plugins.jquery.com/project/maphilight et une démo au http://davidlynch.org/js/maphilight/docs/demo_usa.html. Ce n'est pas exactement ce que vous cherchez, mais c'est proche.

Je serais heureux de vous indiquer comment intégrer au mieux vos données côté serveur à votre surbrillance de carte côté client, mais vous aurez besoin de plus d'informations.

Source

2010-05-13 00:33:27 Ted

Salut, oui, j'ai regardé ce fil et la démo de Map Hilight mais cela ne semble pas applicable parce que je ne veux pas mettre en surbrillance, et la boîte popup est destinée uniquement à une petite quantité de données statiques un db. Fondamentalement, je veux une boîte popup à venir lorsque vous survolez les hotspots imagemap, et à l'intérieur de ce popup serait d'environ 5 à 10 paragraphes d'adresses et de liens pour cette zone particulière. Je divise la carte des États-Unis en plusieurs régions d'état (nord-est, etc.) pour la simplicité. Tout est sur une page aspx. – lbholland

Le problème principal avec MapHilight est que le pop-up ne reste pas ouvert en vol stationnaire, donc je ne pouvais pas utiliser de liens à l'intérieur. – lbholland

Je ne vois pas pourquoi c'est différent de créer un popup dans un autre contexte. Il existe un certain nombre de façons d'attacher des "données" à un élément area. Le plus simple que je puisse penser est d'utiliser l'attribut alt.

Découvrez par exemple this demo. (Code ci-dessous.)

HTML

<body> 
<p>Hover on the sun or on one of the planets to get its info:</p> 
<div id="map"> 
    <div id="overlay"></div> 
    <img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> 
</div> 
<map name="planetmap"> 
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/TAGS/sun.htm" /> 
    <area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/TAGS/mercur.htm" /> 
    <area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/TAGS/venus.htm" /> 
</map> 
</body>

$('area').each(function(){ 
    var area = $(this), 
     alt = area.attr('alt'); 
    area.mouseenter(function(){ 
     $('#overlay').html(alt); 
    }).mouseleave(function(){ 
     $('#overlay').html(''); 
    }); 
});

CSS

#map { 
    position: relative; 
} 
#overlay { 
    position: absolute; 
    background: #000; 
    color: #fff; 
    top: 20px; 
    left: 20px; 
}

Pas d'appels AJAX, mais celles-ci pourraient facilement être ajouté aux événements mouseenter et mouseleave de chaque élément area.

Source

2010-05-13 00:43:19 Adam

Salut, comment voulez-vous utiliser cette méthode pour forcer les popups à planer à côté de la hotspot réelle, au lieu de dans un endroit fixe, sans avoir à créer un div pour chaque hotspot (j'en ai trop pour qu'il soit pratique code dur les)? – lbholland

En outre, la boîte contextuelle doit rester ouverte pendant que vous passez la souris dessus ainsi que le hotspot, de sorte que l'utilisateur peut cliquer sur des liens http dans (comme Google Maps).Fondamentalement, je veux quelque chose de très similaire à la fonctionnalité popup sur google maps. – lbholland

Image contextuelle sur le survol, avec texte contextuel tiré de la base de données

Répondre

Questions connexes