imagemap : hover plutôt que cliquer

Plus d'informations
il y a 1 mois 1 semaine #807 par JDA
JDA a créé le sujet : imagemap : hover plutôt que cliquer
Bonjour, ma question se trouve dans le titre, je souhaiterais faire apparaître une image au survol de la souris sur une zone de mon imagemap plutôt qu'au click.
J'utilise une carte régionale en imagemap, ce sont des photos miniatures des communes que je veux faire apparaître. Il est possible de les précharger chacune ne pèse que 10Ko maxi.
Pour le moment le fonctionnement au click su mon imagemap est satisfaisant, quoiqu'il faut faire un retour page précédente pour revenir de la photo à l'imagemap.
J'ai fait un petit essai en intégrant onmouseover mais sans résultat, y aurait-il une solution compatible avec le plugin? Merci !

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine - il y a 1 mois 1 semaine #811 par lomart
lomart a répondu au sujet : imagemap : hover plutôt que cliquer
Bonsoir et merci pour cette question qui apporte un plus à imagemap

C'est possible en utilisant d'autres actions en complément d'imagemap

Pour imagemap, il faut ajouter un attribut data-image aux zones area
{up imagemap=images/doc/forme.png | style=border:2px solid red; width:100%}
    [area target="" alt="xx" data-image="/images/image.jpg" title="xx" href="#xx" coords="592,23,778,152" shape="rect"]
{/up imagemap}

pour précharger les images utilisées, on utilise
{up addcodehead=link | rel=preload | href=/images/image.jpg | as=image}

Ensuite, il faut prévoir une image qui servira au survol
{up html=img | id=imghover | src=images/blank.jpg}
avec son css initial
{up addcsshead=#imghover [position:absolute; display:none;]}

Puis un peu de jquery pour terminer
{up addscript | jquery=1}
$("area").mouseenter(function(e) {
    $("#imghover").attr("src", $(this).data("image")).show().css({
        left: e.pageX - 200, 
        top: e.pageY + 0,
        width:200
    });
});
$("area").mouseout(function(e) {
    $("#imghover").hide();
});
{/up addscript}

Je vais ajouter une démonstration sur le site de UP.
C'est vraiment une bonne idée

PS. j'aime bien ce principe d'avoir toutes les composantes visibles (et adaptables) au même endroit
Dernière édition: il y a 1 mois 1 semaine par lomart.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #812 par lomart
lomart a répondu au sujet : imagemap : hover plutôt que cliquer
Bonjour,

Je viens de mettre en ligne la démo : up.lomart.fr/demo/action-imagemap

Bonne journée
Les utilisateur(s) suivant ont remercié: JDA

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #813 par JDA
JDA a répondu au sujet : imagemap : hover plutôt que cliquer
Bonjour,
Merci beaucoup pour cette solution efficace et élégante par l'utilisation d''autres fonctions de UP.
Le résultat est exactement ce que je souhaitais, et je pense que nombre d'utilisateurs seront aussi concernés, donc merci d'avoir aussi pris le temps d'ajouter la démo sur le site.
(et un merci de plus pour la réactivité !!)
Bien cordialement,
Jean-Daniel

Connexion ou Créer un compte pour participer à la conversation.