• Sur ce site, vous trouverez :
    Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

  • ...un Audio Player dans un Iframe... ...et un autre intégré dans Guppy

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

 
Vous êtes ici :   Accueil » Des infobulles personnalisées dans une image cliquable
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier
Astuces

imasso.gif

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

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 ! wink).

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 :

http://www.01net.com/astuces/creez-et-exportez-une-image-cliquable-371100.html
https://docs.gimp.org/fr/plug-in-imagemap.html
http://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...laugh

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 angry! (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 http://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.


Date de création : 31/12/2016 @ 07:14
Catégorie : Astuces - Changements au survol
Page lue 621 fois


Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » Des infobulles personnalisées dans une image cliquable
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe


  Nombre de membres 31 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
tXGMc
Recopier le code :
10 Abonnés