18041 sujets

Questions générales et questions de débutants

[Résolu] Info-bulle sur image

Bonjour,
Je m'explique
Pour moi, c'est tellement compliqué, que je ne sais pas comment m'expliquer.

Est-il possible d'avoir, l'image (info.png) dans l'angle haut droit de chaque case et avoir une info en passant dessus (ou en cliquant) avec la souris ?

Au moins 2 ou 3 modèles (sans modèle, je ne sais pas capable de le faire).

Voici mon image principale:
https://www.aht.li/3171324/Tableau_Pluie.jpg
Voici l'image pour l'infobulle)
https://www.aht.li/3171977/info.png
Voici mon code simplifié: 
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Pluie</title>
<style></style>
</head>
<body style="background-color: rgb(30, 70, 130); color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<img style="width: 20px; height: 20px;" alt="Infobulle"
src="../../Icones/aide.png">
<div style="text-align: center;">&nbsp; <img
style="width: 734px; height: 1612px; color: white;" alt="Tableau Pluie"
src="Tableau_Pluie.jpg"><br>
</div>
<br>
<br>
</body>
</html>


Merci pour votre aide
Cordialement
http://www.meteo-clopiniere-sicaudiere.fr
Modifié par PoppyGuy (20 Jan 2018 - 18:40)
Modérateur
Hello,

Pourquoi n'intègres tu pas le tableau en html et ensuite, tu te crées une infobulle en html via ton image aide.png ? Il me semble qu'il y ait un cours sur Alsa pour créer ses petits infobulles et créer cette petite interaction.
Bonjour,
Parce que je ne sais pas faire sans modèle.
J'aurais voulu faire la même chose que EXCEL avec les commentaires quand on survole le triangle rouge à gauche de la cellule.

Voici ce que je souhaiterais (voir image ci-dessous)
upload/1516523810-41027-infobulle.jpg
Une information quand je survol chaque case
1) Cela peut-être sans image
ou
2) En survolant les images (?)
Modifié par PoppyGuy (21 Jan 2018 - 09:41)
Modérateur
Hello,

Désolé si je te réponds tardivement. J'ai été très occupé ces derniers jours (c'est encore le cas)

Le mieux étant que tu le fasses en intégrant complètement du html et css. Mais cela requiert un peu de connaissances (qui ne sont pas du tout difficiles à aborder). Sinon, tu peux toujours utiliser la technique du map area. Mais cela veut dire que tu vas devoir incruster ton image 'help' à différents endroits du tableau via un logiciel comme GIMP, ou fireworks, ou Photoshop ( Photoshop pour ça, ça craint). Cependant, cette solution requiert un script en JS. Moi qui suis sur GNU/Linux depuis des plombes, je ne connais pas bien GIMP. Je connais beaucoup totoshop. Bref, il me semble bien que GIMP puisse te mâcher le travail pour ton map area. Je t'invite à faire une recherche dans ce sens là sur Google si tu décides d'opter pour cette solution.
Modifié par niuxe (23 Jan 2018 - 14:06)
Bonjour,
C'est pas grave, j'ai eu une solution:
<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>

Modifié par PoppyGuy (23 Jan 2018 - 15:35)
Sujet clos
Aller à