Infobulle au dessus d'une page HTML
Guy72 -  
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

4 réponses

  2.  Guy72 Auteur
    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
    1. Guy72 Auteur
      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
      1. jordane45 Modérateur
        As tu cherché les scripts comme indiqué dans mon premier message ?

        Regarde qtip
        0
      2. Guy72 Auteur
        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
      3. jordane45 Modérateur
        Ton tableau... C'est juste une image ?
        Dans ce cas... Normal que ça ne marche pas.
        Tu dois faire un tableau html...
        0
      4. Guy72 Auteur
        Mais comment je transforme cette image en un tableau html ?
        0
      5. jordane45 Modérateur
        Ben.. il faut le coder en html...
        0
    2. RAD ZONE Contributeur
      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

      Connecté à internet mais rien ne charge
      gandounet

      10 réponses
      Comment "inspecter l'élément" sur Mac ?
      enzo2501

      14 réponses