Infobulle au dessus d'une page HTML
Guy72
Messages postés
973
Date d'inscription
Statut
Membre
Dernière intervention
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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
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
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:
- Infobulle au dessus d'une page HTML
- Supprimer une page word - Guide
- Imprimer tableau excel sur une page - Guide
- Editeur html - Télécharger - HTML
- Créer une page facebook - Guide
- Comment traduire une page - Guide
4 réponses
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
.
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
.
Bonjour,
Désolé, mais je ne comprends rien.
Voici mon image :
Voici le code de ma page .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
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
Voici ce que je souhaiterais (voir image ci-dessous)
Une information quand je survol chaque case
1) Cela peut-être sans image
ou
2) En survolant les images (?)
Une information quand je survol chaque case
1) Cela peut-être sans image
ou
2) En survolant les images (?)
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+
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+
