Probleme infobulles..

Sabrina -  
avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je suis entrain d'essayer de faire des infobulles sur un site et j'ai quelques difficultés. J'aimerais que lorsque la souris passe par-dessus du texte, qu'un petit carrée s'affiche à côté avec un description à l'intérieur. Cependant, présentement le petit carrée affiche mais dans le coin supérieur gauche de mon écran et non à côté de mon texte. Quelqu'un peut m'aider ?

http://www.ebev.ca/test/infobulle.html

Merci !
Configuration: Mac OS X
Firefox 3.5.3

2 réponses

  1.
    RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    SALUT

    pourquoi utiliser autant de js pour faire une simple "infobulle" !?

    voila un exemple tres simple et assez configurable tout en CSS 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="http://radservebeer.free.fr" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <style type="text/css">
/*<![CDATA[*/
    body {
      background-color: #464646;
      color: #564b47;
      font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
      font-size: 12px;
      text-align: center;
    }

    #content {
      background-color: #fff;
      height: 400px;
      left: 50%;
      margin: -200px 0 0 -400px;
      position: absolute;
      text-align: left;
      top: 50%;
      width: 800px;
    }

    p {
      margin: 5px;
      text-indent: 5px;
    }

    img {
      border: none;
    }

    em.infobulle {
      color: #FF0000;
    }
      /*        DEBUT CSS INFOBULLE            */
    em.infobulle b, a.infobulle b {
      display: none;
    }

    em.infobulle:hover, a.infobulle:hover {
      border: 0;
      position: relative;
      z-index: 500;
    }

    em.infobulle:hover b, a.infobulle:hover b {
      background-color: #CCFF66;
      color: #000;
      text-align: center;
      font-size: 10px;
      position: absolute;
      display: block;
      width: 200px;
       padding:5px;
      top: 20px;
      left: 30px;
        /*        DONNE LA TRANSPARENCE DU BACKGROUND           */
      -moz-opacity: 0.80;
      filter:alpha(opacity=80);
      opacity: 0.80;
            /*        DONNE LA TRANSPARENCE DU BACKGROUND           */
    }
     /*        FIN CSS INFOBULLE            */
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="content">
      <p>
        Eu faucibus mauris. <a class="infobulle" href="#">LIEN AVEC infobulle CSS <b>RAD ZONE
        <br />
        Webcreation</b></a> .Lorem ipsum dolor sit amet consectetuer pede lacinia Duis Cum laoreet. Interdum Fusce
        Curabitur pede aliquet Nulla ut eros condimentum orci porttitor. Nunc.
      </p>
      <p>
        Lorem venenatis id et elit at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi Quisque Morbi vel
        Nam sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
      </p>
      <br />
      <p>
        SUR UNE IMAGE.<em class="infobulle"><img src="http://pics.mediaplazza.com/t_15/64x64/sexy3.jpg" width="48" height="36" alt="img" /><b>RAD ZONE
        <br />
        Webcreation</b></em> at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi Quisque Morbi vel Nam
        sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
      </p>
      <br />
      <p>
        Lorem venenatis id et elit .<em class="infobulle">SUR UN TEXTE <b>RAD ZONE
        <br />
        Webcreation<br /><img src="http://pics.mediaplazza.com/t_15/64x64/sexy3.jpg" width="48" height="36" alt="img" /></b></em> consectetuer pede lacinia Duis Cum laoreet. Interdum Fusce Curabitur pede aliquet Nulla ut
        eros condimentum orci porttitor. Nunc.
      </p>
      <p>
        Lorem venenatis id et elit at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi Quisque Morbi vel
        Nam sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
      </p>
    </div>
  </body>
</html>


    RAD
    3
  2. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Si tu veux un autre script...
    0

Discussions similaires

Créer infobulles Excel?
sucrette83 -
pijaku -

11 réponses