Sujet Précédent Sujet Suivant

Infobulle au dessus d'une page HTML

Fermé
Guy72 Messages postés 907 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 26 avril 2024 - Modifié le 18 janv. 2018 à 16:06
RAD ZONE Messages postés 5226 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 1 juin 2024 - 21 janv. 2018 à 15:15
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"

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)

Voici le code de la page .html 
<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>   
<!--Vent-->
<a href="Tableau_Vent.html"><img
style="border: 0px solid ; width: 70px; height: 42px;" alt="Icone Vent"
src="../../Icones/Vent.png"></a>    
<!--Humidité-->
<a href="Tableau_Humidite.html"><img
style="border: 0px solid ; width: 32px; height: 50px;" alt="Goutte"
src="../../Icones/Humidite.png"></a>      
<!--Soleil-->
<a href="Tableau_Soleil.html"><img src="../../Icones/Soleil.png"
alt="Icone Soleil"
style="border: 0px solid ; width: 54px; height: 54px;"></a> 
  
<!--Pression--> <a href="Tableau_Pressions.html"><img
style="border: 0px solid ; width: 54px; height: 54px;"
alt="Icone Pression" src="../../Icones/Pression.png"></a>     
<!--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"> <br>
</div>
</body>
</html>


Ma question est donc:
Est-il possible de faire apparaître en survol au-dessus de chaque case un commentaire que je mettrais dans une infobulle ?

Merci de votre aide
Cordialement



A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38217 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 juillet 2024 4 680
19 janv. 2018 à 09:09
Bonjour,

Tu trouveras des plugins javascript (et plus particulièrement jquery) qui te permettront de faire ce que tu souhaites
https://www.google.fr/search?q=jquery+tooltip

Celui là est pas mal car très paramétrable
https://github.com/qTip2/qTip2

.
0
Réponse 2 / 4
Guy72 Messages postés 907 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 26 avril 2024 21
19 janv. 2018 à 11:06
Bonjour,
Désolé, mais je ne comprends rien.

Voici mon image :


Voici le code de ma page .html 
<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>
 
<a title="Bonjour c'est un essai"
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>


Et voici la page .html
https://www.aht.li/3171325/Essai.html

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 ton aide
Cordialement
0
Réponse 3 / 4
Guy72 Messages postés 907 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 26 avril 2024 21
21 janv. 2018 à 09:53
Voici ce que je souhaiterais (voir image ci-dessous)
https://www.aht.li/3172184/info_bulle.jpg
Une information quand je survol chaque case
1) Cela peut-être sans image
ou
2) En survolant les images (?)
0
jordane45 Messages postés 38217 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 juillet 2024 4 680
21 janv. 2018 à 10:29
As tu cherché les scripts comme indiqué dans mon premier message ?

Regarde qtip
0
Guy72 Messages postés 907 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 26 avril 2024 21
21 janv. 2018 à 11:14
Oui, j'ai cherché partout, mais je n'ai qu'une info bulle qui apparaît en bas de la page et ne peut rien modifié, je ne mis connais pas assez.
Il n'y qu'avec un modèle .html (avec mes images) que je pourrais essayer de modifier
0
jordane45 Messages postés 38217 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 juillet 2024 4 680
21 janv. 2018 à 11:46
Ton tableau... C'est juste une image ?
Dans ce cas... Normal que ça ne marche pas.
Tu dois faire un tableau html...
0
Guy72 Messages postés 907 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 26 avril 2024 21
21 janv. 2018 à 11:55
Mais comment je transforme cette image en un tableau html ?
0
jordane45 Messages postés 38217 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 juillet 2024 4 680
21 janv. 2018 à 12:08
Ben.. il faut le coder en html...
0
Réponse 4 / 4
RAD ZONE Messages postés 5226 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 1 juin 2024 1 355
21 janv. 2018 à 15:15
Salut

je te conseille de faire un mapping de l image avec un peu de jquery pour les hotspot .

si tu ne sais pas faire voila un generateur qui le fera tres bien avec un tas d option (en british mais pas trop dure ) !

https://www.inabrains.com/tooltip/image-hotspot-creator.html

il faut quand meme un minimum de connaissance en html css pour le mettre en place dans ta page ...!
ne pas oublier de mettre jquery !!!!

A+
0

Discussions similaires

[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse