Utiliser des info-bulles sur plusieurs partie d'une image [Résolu]

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Répondre
PoppyGuy
Lézard vert
Messages : 153
Inscription : 08 oct. 2011, 18:55

Utiliser des info-bulles sur plusieurs partie d'une image [Résolu]

Message par PoppyGuy »

Bonjour,
J'ai une image dans un fichier "Pluie.html".
Voir sur le site :
http://www.meteo-clopiniere-sicaudiere.fr
1) Cliquer sur le bouton "Janvier"
2) Cliquer en haut sur l'icône "Nuage-pluie"

Voici le code de la page html

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Pluie</title>
</head>
<body style="background-color: rgb(30, 70, 130); color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;">
<!--Températures-->
<a href="Tableau_Temperatures.html"><span
style="color: white;"><img
style="border: 0px solid ; width: 54px; height: 54px;" alt="Icone Vent"
src="../../Icones/Thermometre.png"></span></a>&nbsp;&nbsp;&nbsp;
<!--Vent-->
<a href="Tableau_Vent.html"><img
style="border: 0px solid ; width: 70px; height: 42px;" alt="Icone Vent"
src="../../Icones/Vent.png"></a>&nbsp;&nbsp; &nbsp;
<!--Humidité-->
<a href="Tableau_Humidite.html"><img
style="border: 0px solid ; width: 32px; height: 50px;" alt="Goutte"
src="../../Icones/Humidite.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--Soleil-->
<a href="Tableau_Soleil.html"><img src="../../Icones/Soleil.png"
alt="Icone Soleil"
style="border: 0px solid ; width: 54px; height: 54px;"></a>&nbsp;
&nbsp;&nbsp;
<!--Pression--> <a href="Tableau_Pressions.html"><img
style="border: 0px solid ; width: 54px; height: 54px;"
alt="Icone Pression" src="../../Icones/Pression.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--Accueil-->
<a href="../../index.html"><span style="text-decoration: underline;"><img
style="border: 0px solid ; width: 54px; height: 54px;"
alt="Icone accueil" src="../../Icones/Accueil.png"></span></a><br>
<img style="width: 737px; height: 1641px; color: white;"
alt="Tableau Pluie" src="Tableau_Pluie.jpg">&nbsp;<br>
</div>
</body>
</html>
Dans les cases ou il y a en haut à droite un petit triangle rouge (sur EXCEL, il y a un commentaire).
comme je ne peux pas le faire apparaître sur le site (sinon cela cacherait les autres cases)

Ma question est donc:
Est-il possible de faire apparaître en survol au-dessus de chaque case (ou il y a un petit triangle rouge) un commentaire que je mettrais dans une infobulle ?

Merci de votre aide
Cordialement
Dernière modification par PoppyGuy le 23 janv. 2018, 15:39, modifié 3 fois.
http://meteofloralies.free.fr
atheo
Lézard vert
Messages : 181
Inscription : 03 févr. 2010, 15:45

Re: Utiliser une infobulle sur une image de monsite

Message par atheo »

Bonjour

Tu sélectes ton image, click droit, infobulle, tu rentres ton texte.

Et quand tu passeras sur l'image, ton texte s'affichera.
Dans le source, tu auras un truc dans ce genre :

<a title="Bonjour c'est un essai aaaaaaaaaaaaaaaa" href="#"><img class="agauche" style="width: 350px; height: 512px;" alt="mon image" src="mon image" /></a><br />

La partie en gras est ce que tu as tapé. Et comme c'est limité à 80 caractères, rien ne t'empêche dans notepad++ de venir en remettre une rafale.

Enfin si j'ai bien compris ce que tu veux faire...
PoppyGuy
Lézard vert
Messages : 153
Inscription : 08 oct. 2011, 18:55

Re: Utiliser une infobulle sur une image de monsite

Message par PoppyGuy »

Bonjour,
Je ne comprends pas grand chose :(

il faudrait avoir une info-bulle à chaque fois que je passe au dessus d'une case avec le triangle rouge en haut à droite.
Si j'avais un modèle pour 2 ou 3 info-bulle, après, je pourrais (peur-être) faire le reste ?

Merci de votre aide
Cordialement

Voici l'image que j'ai:
Image
Voici la page .html:
https://www.aht.li/3171325/Essai.html
Voici le code de la page:

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Pluie</title>
</head>
<body style="background-color: rgb(30, 70, 130); color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;">
<br>
&nbsp;
<a title="Bonjour c'est un essai aaaaaaaaaaaaaaaa"
href="Tableau_Pluie.html#"><img class="agauche"
style="border: 0px solid ; width: 737px; height: 1612px;"
alt="mon image" src="Tableau_Pluie.jpg"></a></div>
<br>
<br>
</body>
</html>
http://meteofloralies.free.fr
atheo
Lézard vert
Messages : 181
Inscription : 03 févr. 2010, 15:45

Re: Utiliser une infobulle sur une image de monsite

Message par atheo »

Dans ton cas tu n'as qu'une image, qui est en fait ton tableau complet.

La solution que je donnais n'est valable que pour une image dans son ensemble.
Comment dans un jpg inclus dans une page html différencier les zones ?

Il existe (ou existait ?) un logiciel qui permettait de délimiter des zones d'une image et y affecter une adresse.
Je l'ai essayé il y a longtemps.
Mais c'est une usine à gaz si tu dois faire cela pour chaque case.
Mais il y a peut être d'autres méthodes

Mcc HTML Mapper
Regarde quand même là
https://framasoft.org/IMG/zip/article5109.html
PoppyGuy
Lézard vert
Messages : 153
Inscription : 08 oct. 2011, 18:55

Re: Utiliser des info-bulles sur plusieurs partie d'une image

Message par PoppyGuy »

D'accord, mais même avec la seule image du tableau, je ne vois pas comment faire apparaître une info-bulle ou un commentaire ?
Quant on regarde sur mon site, il y a des petites icônes, si je clic dessus, j'ouvre une page (grâce à des gens comme toi, qui mon montré comment faire).
En fait au lieu de la page html, si je pouvais faire apparaître un commentaire ???
http://meteofloralies.free.fr
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Re: Utiliser des info-bulles sur plusieurs partie d'une image

Message par chinon37 »

Bonjour,
S'agissant d'une seule image, il faut que tu fasses des zones réactives (Image map). Ceci est possible avec Gimp ou libreoffice.
Avec libreoffice draw, tu importe ton image, puis édition > image map
Tu vas définir des zones etc..
Avec Gimp, il faut aller dans filtres > web > image cliquable web
Tu trouveras facilement des tutos sur le web pour la marche à suivre.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
PoppyGuy
Lézard vert
Messages : 153
Inscription : 08 oct. 2011, 18:55

Re: Utiliser des info-bulles sur plusieurs partie d'une image

Message par PoppyGuy »

libreoffice draw ??, c'est un tableur ?
http://meteofloralies.free.fr
Avatar de l’utilisateur
Bob49
Animal mythique
Messages : 22585
Inscription : 10 mars 2006, 17:25

Re: Utiliser des info-bulles sur plusieurs partie d'une image

Message par Bob49 »

Salut
PoppyGuy a écrit : 20 janv. 2018, 15:51 libreoffice draw ??, c'est un tableur ?
Internet sert à quoi, avant de poser ce genre de questions ! :)

"Draw est un outil puissant pour faire du dessin, des logos, des affiches, des schémas, des organigrammes…" Phrase à explications complètes, empruntée ici

Voir aussi Initiation à Draw de Floss Manuals, selon préférences d'affichage 2 choix :
https://fr.flossmanuals.net/initiation- ... isir-draw/ (et une mine d'or avec bien d'autres initiations\tutoriels via le lien livres..)
ou
http://flossmanuals.developpez.com/tuto ... fice/draw/ (autres tutoriels en cliquant sur Floss Manuals sous "L'auteur" ; Bien sur, Developpez.com à bien d'autres tutoriels\cours)
Sauvegardez le profil de votre Firefox , avant d'y faire des modifications(install, etc..) ;-)
"Le bonheur est souvent la seule chose qu'on puisse donner sans l'avoir, et c'est en le donnant qu'on l'acquiert." Voltaire
Image
PoppyGuy
Lézard vert
Messages : 153
Inscription : 08 oct. 2011, 18:55

Re: Utiliser des info-bulles sur plusieurs partie d'une image

Message par PoppyGuy »

Voici ce que je souhaiterais (voir image ci-dessous)

Image

Avoir une information quand je survol chaque case

1) Cela peut-être sans image
ou
2) En survolant les images (?)
Avec libreoffice draw, tu importe ton image, puis édition > image map
Je ne vois pas ce que je peux faire avec "LibreOfficedraw"
https://www.google.fr/search?q=libreoff ... e&ie=UTF-8
http://meteofloralies.free.fr
PoppyGuy
Lézard vert
Messages : 153
Inscription : 08 oct. 2011, 18:55

Re: Utiliser des info-bulles sur plusieurs partie d'une image [Résolu]

Message par PoppyGuy »

Bonjour,
Finalement, j'au une solution:

Code : Tout sélectionner

<html>
<head>
<meta charset="UTF-8">
<title>Page d'essai</title>
<style type="text/css">
div.bubble {
height: 18px;
line-height: 18px;
padding: 0px 4px 4px 4px;
position: absolute;
top: 0px;
left: 0px;
background-color: #FFFFAA;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #000000;
}
</style>
<script type="text/javascript">
function coords() {
var datas = {
'cell_R01C03': 'test1',
'cell_R01C04': 'test2',
'cell_R01C05': 'test3'
};
var areas = document.getElementsByTagName('area');
var width = 90;
var height = 36;
var paddingX = 7;
var paddingY = 7;
for (var el of areas) {
var elid = el.id;
el.setAttribute('data-descr', datas[elid]);
var regex = /\d+/g;
var arr = elid.match(regex);
if (arr.length > 1) {
var row = parseInt(arr[0], 10);
var col = parseInt(arr[1], 10);
var offsetX = 146;
if (row < 8) {
var offsetY = 152;
} else if (row < 15) {
var offsetY = 181;
} else if (row < 22) {
var offsetY = 210;
} else if (row < 29) {
var offsetY = 239;
} else if (row < 32) {
var offsetY = 268;
} else {
return null;
}
var x0 = offsetX + (col - 1) * (width + paddingX);
var x1 = x0 + width;
var y0 = offsetY + (row - 1) * (height + paddingY);
var y1 = y0 + height;
el.setAttribute("coords", x0 + "," + y0 + "," + x1 + "," + y1);
}
}
}
function bubblein(el) {
var div = document.createElement('div');
div.setAttribute('class', 'bubble');
div.setAttribute('id', el.id + '_bubble');
var txt = document.createTextNode(el.dataset.descr);
div.appendChild(txt);
document.body.appendChild(div);
}
function bubbleout(el) {
document.body.removeChild(document.getElementById(el.id + '_bubble'));
}
function bubblepos(posi) {
var el = document.getElementsByClassName('bubble')[0];
var posX = posi.clientX + 10 + window.scrollX;
var posY = posi.clientY - 10 + window.scrollY;
el.style.left = posX +"px";
el.style.top = posY +"px";
}
</script>
</head>
<body onload="coords()">
<img
src="http://meteo-clopiniere-sicaudiere.fr/2018/Janvier/Tableau_Pluie.jpg"
alt="Pluviométrie" usemap="#pluviomap"> <map name="pluviomap"
onmousemove="bubblepos(event)">
<area shape="rect" coords="0,0,0,0" id="cell_R01C03"
onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
onmouseout="bubbleout(this)">
<area shape="rect" coords="0,0,0,0" id="cell_R01C04"
onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
onmouseout="bubbleout(this)">
<area shape="rect" coords="0,0,0,0" id="cell_R01C05"
onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
onmouseout="bubbleout(this)">
</map>
</body>
</html>
http://meteofloralies.free.fr
atheo
Lézard vert
Messages : 181
Inscription : 03 févr. 2010, 15:45

Re: Utiliser des info-bulles sur plusieurs partie d'une image [Résolu]

Message par atheo »

Bonjour

Tu as écrit le script ou il a été généré par programme ?
PoppyGuy
Lézard vert
Messages : 153
Inscription : 08 oct. 2011, 18:55

Re: Utiliser des info-bulles sur plusieurs partie d'une image [Résolu]

Message par PoppyGuy »

Je l'ai eu par quelqu'un sur un forum
http://meteofloralies.free.fr
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités