HTML, jQuery : Afficher le texte sur la zone de l'image-carte

J'ai une image-map comme:

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

J'utilise jQuery pour ajouter la durée de la zone, mais pas de chance pour montrer quelque chose sur la zone.

Est-il possible d'afficher le texte sur la zone, comme la bulle d'aide, mais sans la souris dessus, sur la zone de texte lorsque la page est chargée?

Merci pour toute aide.

  • Jetez un oeil à la css de positionnement. position et z-index sont les propriétés que vous voulez regarder.
  • Je crois que vous trouverez votre réponse ici: stackoverflow.com/questions/745110/...
  • Marek : j'utilise les deux, mais le problème est: quand ajouter la durée de la zone, il n'y a rien à montrer.
  • Marengo : Merci, mais ils utilisent tous hover, j'ai besoin d'afficher du texte, sans le passage de la souris
  • Vous pouvez probablement utiliser la même méthodologie, juste déclencher onload plutôt que de passer la souris peut-être?
  • Marengo : Oui, je dois le tester.

InformationsquelleAutor Morteza | 2012-01-26
  1. 5

    Lorsque vous ajouter la durée, utilisez quelque chose comme:

    (Pas testé)

    jQuery('map_div').append('span').text('Mercury').css({position:'absolute', left:'10px',top:'10px',z-index:'1'})

    Vous pouvez aussi avoir besoin d'appliquer z-index pour toutes les divs qui sera en dessous de ces travées

    Une autre alternative serait de définir un parent positionné div avec des marges appropriées:

    jQuery('map_div').append('span').text('Mercury').css({position:'relative', margin-left:'-20px',margin-top:'-20px'})

    J'ai tendance à utiliser ces méthodes en fonction du contexte.

    Ici est un travail exemple

    • Im pas sûr si son navigateur spécifique lors de l'utilisation de jsfiddle. Im en utilisant firefox et je peux voir le mot de MERCURE sur le haut de l'image quand je le charger. N'est-il pas l'affichage de cette façon pour vous?
    • Testé sur Firefox et c'est OK.
    InformationsquelleAutor JackalopeZero
  2. 2

    J'ai utilisé le ImageMapper plugin jQuery pour résoudre ce problème. Voici un exemple de code:

    <div>
<img id="ohiomap" src="images/map.png" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="poly" coords="33,140,69,115,85,107,98,97" href="#" name="northwest" />
    <area shape="poly" coords="75,98,76,234,287,65,43,97" href="#" name="centralwest" />
</map>
</div>

    Le javascript ressemble à ceci:

    var image = $('#ohiomap');
image.mapster({
fillOpacity: 0.1,
fillColor: "d42e16",
isSelectable: false,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
toolTipContainer: '<div style="width:100px; height:100px; color:#BBBBBB"> </div>',       
showToolTip: true,
toolTipClose: ["area-mouseout"],
areas: [{
        key: "northwest",
        toolTip: nwTooltip,
    },        
    {
        key: "centralwest",
        toolTip: cwTooltip
    }]
})
.mapster('tooltip','northwest');

    Il fonctionne très bien, et a la valeur ajoutée qu'il s'adapte automatiquement à votre image coords carte lors de l'affichage sur différentes tailles de moniteurs et de résolutions.

    Cependant, la unreleased version 1.2.7 ajoute d'importantes améliorations à l'info-bulle de la fonction -- découvrez cet exemple.

    InformationsquelleAutor cssyphus
  3. 0

    Utiliser la bibliothèque Jquery

    JS:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
    $(function() { 
    $(document).tooltip({position: {at: "left-275 top-375",of: "area"}});
    });
</script>

    HTML:

    <img src ="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"/>
<map name="planetmap">
   <area shape="rect" title= "Sun" coords="0,0,82,126" href="sun.htm" alt="Sun"/>
   <area shape="circle" title="Mercury" coords="90,58,3" href="mercur.htm" alt="Mercury" />
   <area shape="circle" title="Venus" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

    InformationsquelleAutor Suwarnakumar Kanapathipillai