L'Image de la Carte avec l'Image de popup sur survolez hotspot

Je fais construire un calendrier des événements sur certains jours. Le calendrier est un jpg que j'ai créé une image de la carte pour. Lorsque vous passez la souris sur un hotspot ou un "événement" sur le calendrier, je veux une image de pointer à côté du pointeur de la souris qui permettra d'avoir des informations sur l'événement, puis disparaissent lorsque la souris passe hors de la zone d'accès. J'ai six points chauds, et une fonction javascript pour chacun d'eux. Les fonctions de remplacer l'image popup avec la bonne image. Ci-dessous est un exemple de l'un des domaines avec une fonction (les autres sont identiques w/image différente des noms et coordonnées)

J'avais les images de l'événement popping up ci-dessous le calendrier sur le vol stationnaire, mais la page a refusé de déplacer la position de l'image à l'actuel emplacement de la souris. Comment puis-je faire de l'image popup déménager? Ce que je fais mal? ou dois-je utiliser une autre méthode?

JS:

function pop(e) { //function called by first hotspot
        Image.src = "../img/Bubble - Aloha.png" //event image
        document.popup1.src = Image.src; 
        var thing = document.getElementById("popup1");

        $("#popup1").toggle();
        thing.style.left = e.screenX + 'px';
        thing.style.top = e.screenY + 'px';

        return true;
        }

CARTE:

<map id="feb1050" name="feb1050">
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);"  onMouseOut="pop(event);"/>
...</map>

HTML:

<ul><li>
        <img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050">
    </li>
    <li>
        <div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;> 
        </div><br />Click Here To RSVP! 
    </li>
</ul>
InformationsquelleAutor woodlumhoodlum | 2013-03-01
  1. 3

    Peut-être plutôt que de la manipulation de la position de l'image elle-même, vous pouvez positionner le bloc à l'intérieur de la div. Pour le HTML:

    <div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar"> 
<br />Click Here To RSVP!</div>

    Avec un peu de CSS de la div:

    .popup {
        position:absolute;
        z-index:20000;
        top: 0px;
        left: 0px;
        display: none;
}

    Et puis le JS:

    function pop(e) { //function called by first hotspot

    Image.src = "../img/Bubble - Aloha.png" //event image
    document.popup1.src = Image.src; 
    var thing = document.getElementById("popup");

    thing.style.left = e.clientX + 'px';
    thing.style.top = e.clientY  + 'px';
    $("#popup").toggle();

    return true;
 }

    Remarque que je voudrais aussi utiliser clientX et clientY plutôt que screenX et screenY:

    Quelle est la différence entre screenX/Y, clientX/Y et pageX/Y?

    Exemple de travail sur JSFiddle

    • Je l'avais essayé avant, et c'est pourquoi j'ai créé à l'origine div. Mais bon bout sur l'utilisation de clientX au lieu de cela, j'ai essayé tous les trois et il n'était pas vraiment sûr de leur différence.
    • Pas de soucis. Ne pourriez-vous pas le faire fonctionner? Je pense que le clientX / clientY chose a été le principal changement dont vous avez besoin, le code semble fonctionner parfaitement par la suite.
    • Nope, changé la clientx/y et il n'a pas aidé. L'image était encore coincé en dessous.
    • Bien sûr, vous aurez besoin de mettre à jour votre JS pour afficher le div plutôt que de simplement l'image. Découvrez ce JSFiddle, placez le pointeur sur le premier du mois: jsfiddle.net/SiCurious/CjrU4
    • wow! je vous remercie. Il semble y avoir un problème w/ mon css, je pense que j'ai eu en conflit code qui a empêché "position:absolute" de faire du travail de popup. J'apprécie le travail par exemple.
    • Pas de soucis, content que tu ai eu de travail 🙂

    InformationsquelleAutor Simon Adcock
  2. 0

    Une chose que j'ai fait (dans une situation presque exactement comme ceci: Un client voulait des prix des boîtes à apparaître lors du survol d'un prix à la clé) est presque purement CSS et HTML. Vous pouvez générer le popup zones à l'intérieur <a> balises, qui sont ensuite placés à l'intérieur de certaines <span> (ou positionnement absolu <div>) placé à côté du hover zone. Vous assurez-vous que ceux span/div éléments ne sont définies que pour les a:hover sélecteur, et vous les mettez à display:none; sur le reste de la a:x sélecteurs, de sorte que le span/div zone s'affiche uniquement lorsque vous survolez l'ancre, et disparaît lorsque vous n'êtes pas.

    • J'avais essayé environnant les "popup" div avec une plage, mais pour une raison que je ne pense pas que j'ai été en mesure de mettre la "en haut" et de "gauche" pour toute valeur de a atterri l'image dans l'image. Comme si c'était la forçant ci-dessous le calendrier. Je vais essayer avec la balise d'ancrage, c'est peut-être le truc. Ou il pourrait être à bc je l'ai placé à l'intérieur d'une liste de balises. Je vais vous laisser savoir comment ça se passe demain.
    InformationsquelleAutor L0j1k