imagemap : hover plutôt que cliquer

JDA
Auteur du sujet
Hors Ligne
Nouveau membre

Plus d'informations

il y a 3 ans 10 mois #807 par JDA

imagemap : hover plutôt que cliquer a été créé par JDA

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.

lomart
Hors Ligne
Administrateur

Plus d'informations

il y a 3 ans 10 mois - il y a 3 ans 10 mois #811 par lomart

Réponse de lomart sur le 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

Code:

{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

Code:

{up addcodehead=link | rel=preload | href=/images/image.jpg | as=image}

Ensuite, il faut prévoir une image qui servira au survol

Code:

{up html=img | id=imghover | src=images/blank.jpg}

avec son css initial

Code:

{up addcsshead=#imghover [position:absolute; display:none;]}

Puis un peu de jquery pour terminer

Code:

{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 3 ans 10 mois par lomart.

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

lomart
Hors Ligne
Administrateur

Plus d'informations

il y a 3 ans 10 mois #812 par lomart

Réponse de lomart sur le 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.

JDA
Auteur du sujet
Hors Ligne
Nouveau membre

Plus d'informations

il y a 3 ans 10 mois #813 par JDA

Réponse de JDA sur le 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.

JDA
Auteur du sujet
Hors Ligne
Nouveau membre

Plus d'informations

il y a 3 ans 8 mois - il y a 3 ans 8 mois #830 par JDA

Réponse de JDA sur le sujet imagemap : hover plutôt que cliquer

Bonjour, je réalise que je n'ai pas donné le lien du résultat de carte interactive que j'ai fait à partir de votre travail pour un site électoral : au survol du nom de la commune la photo de la mairie apparaît. Ca a beaucoup plu, même si les candidats n'ont pas été élus pour autant !