Insérer plusieurs liens dans une image. (Créer un compte)

  • WordPress :5.4
  • Statut : hors support
  • Ce sujet contient 11 réponses, 2 participants et a été mis à jour pour la dernière fois par neilou2000, le il y a 2 mois.
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #2348096
    neilou2000
    Participant
    Initié WordPress
    12 contributions

    Bonjour,

     

    J’utilise actuellement Elementor, et je cherche à créer une page sous la forme d’une “mindmap”. Je me suis servi du bloc “bannière” d’Elementor pour incruster un diagramme que j’avais réalisé en arrière-plan, et je cherche maintenant à insérer des liens dans cette image: il y a plusieurs cercles, et j’aimerais que chacun d’entre eux redirige vers une autre page. Est-ce possible? J’ai trouvé un petit site qui permettait de faire ça: https://www.html-map.com/index.php , mais je n’arrive pas à utiliser le code HTML créé comme d’une bannière. Y a-t-il une autre solution?

     

    Je joins l’URL de mon image (fond transparent):

    Cordialement,

     

    Neil

    #2348117
    PhiLyon
    Modérateur
    Maître WordPress
    26285 contributions

    Re-bonjour.

    Essaie cette extension https://wordpress.org/plugins/draw-attention/

    🙂

    #2348133
    neilou2000
    Participant
    Initié WordPress
    12 contributions

    Bonjour, merci encore pour votre aide ! Malheureusement, je ne pense pas que cette extension sera compatible avec ce que j’essaie de faire: elle n’est pas compatible avec l’option “bannière” de wordpress (ou bien il faut que je trouve comment insérer un code au lieu d’une image dans le widjet, mais ça ne me paraît pas possible). De plus, l’image que j’ai est transparente à l’origine, mais pas après modification. Pour ceux qui sont dans mon cas, ce deuxième problème se règle sûrement assez facilement, j’ai cru voir une option pour ça.

     

    Si d’autres solutions sont possibles, n’hésitez pas à m’en faire part !

    #2348134
    PhiLyon
    Modérateur
    Maître WordPress
    26285 contributions

    Bonjour.

    Je ne comprends pas bien ce que tu veux obtenir.

    Quel est ton thème déjà ?

    Tu veux que cette image soit transparente ? Pourquoi n’y a-t-il du texte que sur le cercle central ?

    🙂

    #2348135
    neilou2000
    Participant
    Initié WordPress
    12 contributions

    En fait, j’utilise le réglage “elementor canevas” sur Elementor, sans thème pour l’instant, seulement des widjets (je rajouterai sûrement un thème par la suite). J’ai rajouté l’image en bannière (grâce à un widjet que j’ai obtenu sur une extension d’elementor), qui est transparente à l’origine, et la transparence est conservée dans le rendu final, ce qui me convient parfaitement.

     

    Je voulais que cette image soit une sorte de “table des matières” pour mes étudiants, et que chaque cercle représente un chapitre, d’où la raison pour laquelle j’aimerais que chaque cercle soit interactif et redirige vers un lien. Pour l’instant, je n’ai pas encore pris le temps d’écrire le titre des chapitres sur chaque cercle, je modifierai l’image dès que cela sera nécessaire.

    Je joins la page du site juste ici. C’est juste une page expérimentale, d’où l’absence de contenu: http://www.amphyzic.com/vue-densemble-l1/

    J’ai mis à la suite les deux images que j’ai réussi à obtenir. D’abord la fameuse bannière, dont j’aime beaucoup le design mais qui n’offre pas d’interaction possible. Ensuite, l’image que j’ai créé grâce à draw attention, qui est interactive mais opaque, et qui ne peut pas faire banière.

     

    Je vous remercie encore vivement de prendre le temps de m’aider,

     

    Neil

    #2348136
    PhiLyon
    Modérateur
    Maître WordPress
    26285 contributions

    Tu peux obtenir la même chose que dans mon image par exemple, le ” TP Mai ” n’apparait qu’au survol du cercle.

    🙂

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2348138
    neilou2000
    Participant
    Initié WordPress
    12 contributions

    Ca me conviendrait de faire comme ça ! Comment je dois m’y prendre pour arriver à ce résultat? Est ce que l’image que vous avez envoyée est également en mode bannière, ou bien je devrais me contenter d’un design statique?

    #2348139
    PhiLyon
    Modérateur
    Maître WordPress
    26285 contributions

    Le mode bannière, c’est le fait que l’image (les cercles) bouge au survol ? Si oui, je ne peux pas te dire, je n’utilise pas Elementor.

    Pour insérer le diagramme il y a un widget fourni avec Draw Attention, je ne sais pas si tu peux l’utiliser dans ton mode Bannière.

    Pour obtenir l’image en arrière-plan (les mâts dans le ciel) je l’ai fait avec du CSS.

    🙂

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2348141
    neilou2000
    Participant
    Initié WordPress
    12 contributions

    C’est ça oui, et qui fait aussi que le titre s’affiche au survol; j’aime bien, mais ce n’est pas indispensable, surtout pour un site pédagogique. Je vais essayer tout de suite de faire comme ça, il faut juste que je trouve le widget (merci de me l’avoir fait remarquer), et je partage le rendu juste après si j’arrive à faire quelque chose, si jamais c’est utile à d’autres dans mon cas.

    #2348156
    neilou2000
    Participant
    Initié WordPress
    12 contributions

    Bon, malheureusement ce ne sera pas possible d’utiliser la bannière, les deux formats n’ont pas l’air compatibles. Apparemment le widget de draw attention n’est disponible que pour Gutenberg, mais j’utilise le shortcode qui est généré donc pas de problème.

    J’aurais une dernière question: j’essaie de mettre le fond transparent mais je n’y arrive pas. J’ai trouvé un code CSS qui fonctionne d’après les utilisateurs:

     

    body #hotspot-394.leaflet-container,
    body #hotspot-394.hotspots-image-container {
    	background: transparent;
    }

    où 394 est probablement l’ID de mon image (c’est ce que j’ai trouvé en inspectant l’élement sur Chrome)

    J’ai également trouvé une vidéo qui expliquait comment écrire du CSS dans une balise HTML, puisqu’Elementor n’autorise pas le CSS sous sa version gratuite. J’ai compris qu’il fallait rajouter <style> au début, puis notre classe CSS (que j’ai appelé “hey” dans mon exemple) précédée d’un point. Le code donnerait alors:

     

    <style>
    .hey{
    #hotspot- .leaflet-container,
    #hotspot- .hotspots-image-container {
    background: transparent;
    }
    }
    </style>

     

    C’est la première fois que j’écris du code, que ce soit en HTML ou CSS, et malheureusement ça ne fonctionne pas. Est ce que vous avez une idée de la raison? J’ai interprété les “body” au début du code comme des alinéas, même si je ne suis pas sûr que ce soit ça.

     

    • Cette réponse a été modifiée le il y a 2 mois par neilou2000.
    #2348166
    PhiLyon
    Modérateur
    Maître WordPress
    26285 contributions

    Cela ne fonctionne pas pour deux raisons, le CSS de l’extension passe avant ta modif, il faut ajouter !important dans le code, ensuite, à la place de transparent il vaut mieux utiliser des valeurs rgba.

    Colle le code ci-dessous dans Apparence/Personnaliser/CSS additionnel

    #hotspot-2814 .leaflet-container {
        background: rgba(255,255,255,0) !important;
    }

    Mets ton identifiant de hotspot, bien-sûr.

    🙂

    #2348172
    neilou2000
    Participant
    Initié WordPress
    12 contributions

    Ca a fonctionné ! Mais pas exactement avec ce code malheureusement: lorsque je le mets dans le CSS additionnel, le code était bien modifié (j’ai vérifié avec l’outil “inspecter” de Chrome), mais pas de changement visible. J’ai alors repris mon code initial, en rajoutant “!important” comme suggéré, et tout est rentré dans l’ordre. Je joins le code ainsi qu’une capture d’écran du résultat final pour ceux que ça peut aider:

    body #hotspot-434 .leaflet-container,
    body #hotspot-434 .hotspots-image-container {
    	background: transparent !important;
    }

    434 étant mon ID pour cette image.

     

    Encore merci pour votre précieuse aide !

    • Cette réponse a été modifiée le il y a 2 mois par neilou2000.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.