Probleme infobulles..
Sabrina
-
avion-f16 Messages postés 20367 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 20367 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 !
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 !
2 réponses
SALUT
pourquoi utiliser autant de js pour faire une simple "infobulle" !?
voila un exemple tres simple et assez configurable tout en CSS
RAD
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
