- WordPress :4.7
- Statut : non résolu
- Ce sujet contient 8 réponses, 4 participants et a été mis à jour pour la dernière fois par
, le il y a 6 années et 8 mois.
-
Messages
-
Bonjour,
Je vous écris pour avoir de l’aide, nous devons finaliser un site sur wordpress, comme indiqué je vous communique des informations :
Ma configuration WP actuelle : version 4.7.2–fr_FR
- Version de PHP/MySQL : phpMyAdmin
- Thème utilisé : Avada 5.0.6
- Extensions en place : Akismet (désactivée), bbPress, Fusion Builder, Fusion Core
- Nom de l’hébergeur : OVH
- Adresse du site :
Problème(s) rencontré(s) :
Mon conjoint a une demande spécifique sur une image insérée dans le blog (précisément, elle est dans un « container » de page parmi d’autres). Il souhaiterait qu’on puisse cliquer sur les différents ouvrages représentés dans la photo et que cela ouvre une infobulle voire un lien.
- J’ai d’abord pensé à Gimp, le problème est que le format de l’image .map n’est pas accepté lors de l’upload.
- Ensuite j’ai essayé de voir pour des plugin/widget, mais je sèche un peu car déjà si c’est en anglais (comme le thème actuel avada) j’ai du mal à m’y retrouver pour l’utilisation. Ensuite j’avais pensé à mettre un widget image ou texte dans ledit container (et non pas dans la sidebar) mais je n’arrive pas à trouver comment faire. Si j’avais le widget image ou texte je pourrais modifier le code html comme indiqué par des blogueurs sur le net (de ce que j’ai trouvé) et insérer des zones cliquables dans mon image (plusieurs zones dans une image).
- Cela revient à la troisième solution envisagée : modifier le code html purement et simplement de ladite page (l’image se trouvant sur plusieurs pages, ndlr). Mais pareil j’ai tenté de voir où je pouvais le faire et je n’ai pas trouvé. De plus je veux être sûre de plusieurs choses : faut-il remplacer le code html de l’image initiale « http://site/wp-content/uploads/2016/12/image.jpg » par le code «
<map id= »map1485722069561″ name= »map1485722069561″><area shape= »rect » coords= »63,20,364,307″ title= »Description bouquin » alt= »blablablabla » href= »http://blogdubouquin.blogspot.fr/p/these.html » target= »_blank »><area shape= »rect » coords= »884,23,1147,303″ title= »My formation » alt= »Mon mémoire de formation » href= »https://wwwsitedemaformation.fr/ » target= »_blank »><area shape= »rect » coords= »1198,348,1199,349″ alt= »Image HTML map generator » title= »HTML Map creator » href= »http://www.html-map.com/ » target= »_self »></map> Et on upload pas d’image, c’est l’initiale qui reste ?
Voilà donc je ne sais pas bien comment faire, et si sa demande est accessible techniquement ou pas.. Et surtout si c’est bien clair car ça fait depuis hier soir que je cherche.
Merci par avance pour votre aide !
Bonjour.
regardes ce plugin (pas testé) https://fr.wordpress.org/plugins/imagelinks-interactive-image-builder-lite/
🙂
Bonjour et merci ! Je vais essayer… si j’y arrive pas, je reviens 😀
(c’est en anglais alors je vais forcément sortir un peu les rames lol)
Me revoilà, j’ai installé le plugin, je vais dans les paramètres, je mets l’url de mon image et ensuite je pense que ça se joue au niveau de « Popover HTML Template », j’ai essayé de copier coller un code que j’avais déjà généré avec des balises <map id […] </map> puis publier, mais rien ne se passe…
Sinon sur le principe on y est bien, mais si ça pouvait fonctionner ! 🙂
Bonjour,
Le gros problème avec ce genre de code, c’est que c’était bien pour les sites statiques (l’image avait toujours la même dimension), mais c’est très compliqué maintenant que tout doit être responsive.
Essayez une de celles-là :
- https://wordpress.org/plugins/responsive-vector-maps/ (mais je ne sais pas si c’est pour les images)
- https://wordpress.org/plugins/draw-attention/
Bonjour et merci !
J’ai réussi avec Draw attention. Pour la communauté et ceux que cela intéresse, j’ai donc installé l’extension. Ensuite j’ai paramétré une image avec des zones (hotspots aeras) – on peut en mettre plusieurs sur la même image, ce que je voulais – délimitées de façon personnalisées (gros +, ça ne se limite pas à un simple carré de sélection).
On paramètre en dessous le « *thème* options » si on veut qu’un en tête apparaisse ou pas, pied de page, slider etc. J’avais tout enlevé pour ne garder que l’image sur une page. On peut voir ce que l’on fait en testant et en regardant sur le permalien en haut au début des paramètres de l’extension (en dessous du titre) : c’est le chemin de la page de l’image modifiée avec les zones cliquables.
Pour l’insérer en particulier dans certaines zones du bloc, il suffit de copier coller le code source html de cette page et de l’insérer ensuite, dans mon cas particulier, dans un container de la page concernée : on ajoute un élément (builder élément) et j’ai choisi </> Code Block.
Après il y a peut-être plus simple mais voilà comment j’ai procédé car je n’ai pas trouvé autrement. J’ai travaillé sous le thème Avada.
NB : Draw attention ne permettrait de traiter qu’une image (sinon il faut prendre la version pro), mais comme je n’ai pas eu à en traiter d’autres cela m’allait très bien.
Voilà et encore merci !
Super, merci des précisions.
Dommage qu’on ne puisse mettre qu’une seule image-map cliquable avec Draw Attention. Ça limite l’intérêt … 🙁
Bonjour,
Je viens d’utiliser « draw attention » pour réaliser une carte de France cliquable par départements.
En traçant des carrés dans chacun d’eux, le commentaire s’affiche bien dans la zone de gauche à côté de la carte de France.
Néanmoins trois problèmes se posent :
D’une part la zone de gauche n’est pas extensible
Par ailleurs il n’est pas possible de changer la police du Titre
Enfin quand on veut indiquer l’url d’une nouvelle page dans la rubrique « action » -go to url – il est impossible de remplacer l’url indiqué par l’url de la page de destination.
Avez-vous connaissance de ce problème et quelle mauvaise manipulation ai-je pratiquée?
Avec mes remerciements pour une réponse,
Bien cordialement,
NK
Bonjour,
Votre demande est tellement précise que seule une personne qui utilise cette extension pourra vous répondre. Vous devriez poser la question dans le support de l’extension.
<map id= »map1485722069561″ name= »map1485722069561″><area shape= »rect » coords= »63,20,364,307″ title= »Description bouquin » alt= »blablablabla » href= »http://blogdubouquin.blogspot.fr/p/these.html » target= »_blank »><area shape= »rect » coords= »884,23,1147,303″ title= »My formation » alt= »Mon mémoire de formation » href= »https://wwwsitedemaformation.fr/ » target= »_blank »><area shape= »rect » coords= »1198,348,1199,349″ alt= »Image HTML map generator » title= »HTML Map creator » href= »http://www.html-map.com/ » target= »_self »></map> Et on upload pas d’image, c’est l’initiale qui reste ?
- Vous devez être connecté pour répondre à ce sujet.