Des infobulles personnalisées dans une image cliquable
Une astuce pour concevoir des infobulles personnalisables dans une image qui contient des zones cliquables générées avec le traitement d'image libre et gratuit "GIMP".
Je vous propose une version .html dans un Iframe (téléchargeable avec son image mappée ici) car le résultat pourra être utilisé dans GuppY, mais aussi ailleurs et il est possible de le tester dans un navigateur dans passer par un CMS quelconque. De plus le code du .html reste toujours très lisible dans notepad++ par exemple.
MAIS il est bien sûr possible d'intégrer une partie du code directement dans un article de GuppY -voir plus bas-
L'origine de cette recherche est une demande de Han (que je remercie une fois de plus de me faire chercher et donc de me faire progresser une fois de plus ! 
).
Cet exemple ci-dessous est appelé dans un Iframe classique de GuppY. (Les liens renvoient vers des sites informatiques qui ne sont là que pour le fonctionnement.)
Avant tout, il faut utiliser Gimp (le télécharger et l'installer si ce n'est déjà fait... https://www.gimp.org/).
Ensuite il faut avoir travaillé une image pour rendre des zones cliquables : voici une série de tutoriels qui abordent ce sujet, visitez-les et choisissez celui qui vous convient le mieux :
https://www.01net.com/astuces/creez-et-exportez-une-image-cliquable-371100.html
https://josar.free.fr/tutoKompozer/miseEnForme6.html
https://docs.gimp.org/fr/plug-in-imagemap.html
https://gimp-savvy.com/BOOK/index.html?node81.html
...
Il y en a certainement d'autres et je suis tout prêt à allonger la liste si vous me les communiquez...
Notez ici qu'il est possible dans Gimp de générer des infobulles classiques (mais non personnalisables et dont l'affichage ne correspond pas forcément à vos besoins)...
Pour celles et ceux qui cherchent où on peut bien les mettre... Voilà une réponse possible trouvée par hasard :
Dans la fenêtre "Paramètre de la zone n°..." choisissez l'onglet javascript puis dans la fenêtre onmousemove entrez ceci :
title="Le texte que vous souhaitez" et vous aurez une infobulle classique mais qui disparait si on déplace le curseur... peu attrayante 
! (pas d'accent ! ou alors ajoutez <meta charset="UTF-8"> dans le fichier .html généré par Gimp.)
Sinon... Nous, on continue... et vous avez dans le fichier .map généré par Gimp (ou remplacez .map par .html c'est le même texte mais l'.html s'affiche dans un navigateur et vous pouvez le tester !) quelque chose comme cela :
<img src="cube3D.jpg" width="640" height="393" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Jean-Denis -->
<area shape="poly" coords="172,116,172,328,387,367,386,152,171,117" href="https://desandro.github.io/3dtransforms/docs/cube.html" />
<area shape="poly" coords="264,27,177,109,387,147,477,63,266,27" href="https://la-cascade.io/creer-un-cube-en-css/" />
<area shape="poly" coords="481,69,393,150,392,363,480,280,481,71" href="https://davidwalsh.name/css-cube" />
</map>
Et ce sont les parties surlignées en jaune qui nous intéressent, nous allons les copier-coller dans un autre fichier .html que l'on adaptera à ses besoins. Ci-dessous le contenu du fichier .html en téléchargement, commenté le plus possible. Vous y retrouvez les parties surlignées en jaune signalées ci-dessus.
<!DOCTYPE html>
<!--
Map générée par Gimp https://www.gimp.org/
aménagement pour intégration infobulles personnalisables
utilisable dans un iframe dans GuppY ... ou ailleurs...
décembre 2016 JeanDenis https://www.71site.fr
-->
<html lang="fr">
<head>
<title>Cube3D</title><!-- mettre le titre voulu -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
// Script permettant de récupérer les coordonnées du pointeur : NE PAS MODIFIER !!
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<script type="text/javascript">
document.onmousemove = infobulle;
function infobulle(evenement)
{
if(navigator.appName=="Microsoft Internet Explorer")
{
x = event.x+document.body.scrollLeft;
y = event.y+document.body.scrollTop;
}
else
{
x = evenement.pageX;
y = evenement.pageY;
}
}
</script>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
// Style des infobulles repérées chacune par un ID unique et différent pour chaque zone (area)
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<style type="text/css">
* { /* Définition des propriétés de texte pour toutes les balises. */
font-size: 12px;
font-family: Tahoma, Verdana, Arial, serif;
}
#infobulle_faceViolette { /*ID et attributs infobulle*/
position: absolute;
white-space: nowrap; /*empêche le retour à la ligne*/
background: rgba(0,0,0,.5); /*couleur de fond*/
color: #ffffff; /*couleur du texte*/
padding:3px; /*marges intérieures*/
border: 2px solid #800000; /*bordures :épaisseur-nature-couleur*/
border-radius:6px; /*arrondis*/
}
#infobulle_faceVerte { /*ID et attributs infobulle avec le même type de réglage*/
position: absolute;
white-space: nowrap;
background: rgba(0,0,0,.5);
color: #ffffff;
padding:3px;
border: 2px solid #0000FF;
border-radius:6px;
}
#infobulle_faceOrange { /*ID et attributs infobulle : ici, une largeur fixe est prévue*/
position: absolute;
width:100px; /*largeur NOTEZ la suppression dans ce cas de white-space: nowrap; pour un retour automatique à la ligne */
background: rgba(0,0,0,.5);
color: #ffffff;
padding:3px;
border: 2px solid #008000;
border-radius:6px;
}
</style>
</head>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Corps de la page - Source de l'image / Rédaction des infobulles avec les mêmes ID que ci-dessus
// map des zones cliquables -liens-cibles-javascript pour le survol avec les mêmes ID que ci-dessus
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<body style="background:transparent;"><!-- Couleur du fond -->
<div>
<img src="cube3D.jpg" width="640" height="393" border="0" usemap="#map" /><!-- source de l'image -->
<div id="infobulle_faceViolette" style="display:none;"><!-- ID et Contenu de l'infobulle -->
<b>Cette face est <i>plutôt</i> violette.</b><br>
Elle apparait devant.
</div>
<div id="infobulle_faceVerte" style="display:none;"><!-- ID et Contenu de l'infobulle -->
<b>Cette face est <i>plutôt</i> verte.</b><br>
Elle apparait dessus.
</div>
<div id="infobulle_faceOrange" style="display:none;"><!-- ID et Contenu de l'infobulle -->
<b>Cette face est <i>plutôt</i> orange.</b> Elle apparait à droite.
</div>
</div>
<map name="map"><!-- Map : attribut de chaque zone (area) NOTEZ bien les ID des infobulles qui sont reprises 4 fois dans chaque area-->
<area shape="poly" coords="172,116,172,328,387,367,386,152,171,117"
href="https://desandro.github.io/3dtransforms/docs/cube.html" target="_blank"
onmouseover="javascript: getElementById('infobulle_faceViolette').style.display='block';return false;"
onmousemove="javascript: document.getElementById('infobulle_faceViolette').style.left = (x+15)+'px';document.getElementById('infobulle_faceViolette').style.top = (y+2)+'px';return false;"
onmouseout="javascript: getElementById('infobulle_faceViolette').style.display='none';return false;" /><!-- fin area infobulle -->
<area shape="poly" coords="264,27,177,109,387,147,477,63,266,27"
href="https://la-cascade.io/creer-un-cube-en-css/" target="_blank"
onmouseover="javascript: getElementById('infobulle_faceVerte').style.display='block';return false;"
onmousemove="javascript: document.getElementById('infobulle_faceVerte').style.left = (x+15)+'px';document.getElementById('infobulle_faceVerte').style.top = (y+2)+'px';return false;"
onmouseout="javascript: getElementById('infobulle_faceVerte').style.display='none';return false;" /><!-- fin area infobulle -->
<area shape="poly" coords="481,69,393,150,392,363,480,280,481,71"
href="https://davidwalsh.name/css-cube" target="_blank"
onmouseover="javascript: getElementById('infobulle_faceOrange').style.display='block';return false;"
onmousemove="javascript: document.getElementById('infobulle_faceOrange').style.left = (x+15)+'px';document.getElementById('infobulle_faceOrange').style.top = (y+2)+'px';return false;"
onmouseout="javascript: getElementById('infobulle_faceOrange').style.display='none';return false;" /><!-- fin area infobulle -->
</map>
</body>
</html>
Dans la partie <style></style> vous identifierez (ID unique pour chaque infobulle) vos zones (area) et les réglez comme vous le souhaitez (largeur fixe ou non)...
Dans le corps de la page <body></body> pour chaque ID d'infobulle, vous rédigez les textes en y ajoutant si nécessaire des balises <b></b> (gras), <i></i> (italique)... <br> (saut de ligne simple). Voir ici pour une liste de balises utiles par exemple. <u></u> (souligné) semble dépréciée mais fonctionne encore...
Pour les <area /> vous ajoutez avant la fermeture de la balise /> les parties surlignées en vert, en y écrivant les ID de vos infobulles, et en aménageant à votre goût x+15 (écart de l'infobulle à droite du curseur : axe horizontal) et y+2 (écart de l'infobulle en bas du curseur : axe vertical).
Il vous suffit d'éditer le fichier le fichier .html (que vous avez téléchargé ici) avec notepad++ par exemple, de le renommer, et d'y apporter vos modifications en faisant attention au chemin de l'image. Ici l'image est au même niveau que le fichier .html.
Si vous souhaitez utiliser ce code directement dans un article de GuppY, alors vous devrez copier-coller dans le code source la partie <style></style> au début (ou éventuellement dans le fichier styleplus.css de votre skin), la partie <script></script> ensuite (elle, impérativement dans le code source de l'article).
et, là où vous souhaitez l'image, copier-coller ce qui, dans l'.html se trouve entre <body> et </body> (balises non comprise !). Et, n'oubliez pas de corriger le chemin de l'image, par exemple comme ci-dessous si vous l'avez rangée dans le dossier img de GuppY...
<img src="img/cube3D.jpg" width="640" height="393" border="0" usemap="#map" /><!-- source de l'image -->
Attention, car suivant la largeur de votre page GuppY, il est possible que vous deviez ajuster x+15 sur l'axe horizontal... Sur un de mes tests, j'ai dû mettre x-195... donc pas de panique !
Pour toute question ou aide pour utiliser ce dispositif, vous pouvez poster sur le forum de ce site.
Catégorie : Astuces - Changements au survol
Page lue 73272 fois
