Bien le bonjour,
J'avais récemment créé des infobulles entièrement en CSS, qui marchaient très bien, mais qui n'étaient finalement pas adaptées à mon projet. Je souhaitais par exemple que l'infobulle suive le curseur.
J'ai donc fouillé à droite et à gauche pour récupérer des bouts de code de javascript.
Au final ça donne ça :
Ça marche plutôt pas mal, mis à part :
-Impossible de déclarer le doctype, sinon pffiuut, ça ne marche plus.
-Les infobulles ne sont pas placées relativement aux liens, mais au navigateur et ça, ça me dépasse. Par conséquent, elles n'apparaissent pas au même endroit suivant la taille de la fenêtre.
-Je ne peux pas mettre de caractères spéciaux dans le texte des mes popups (enfin en tous cas dès que je mets une apostrophe, l'infobulle n'apparait plus)
Hm, je pense que c'est tout. Pourriez vous me donner un coup de patte ?
Voici un lien vers ce que je tente de faire : http://www.raphael-bigot.info/admin/hebergements/poplink/poplink.html
(la forme n'a aucun intérêt, hein, c'est juste un test pour comprendre comment ça marche
)
Modifié par Ralf (21 Mar 2009 - 23:18)
J'avais récemment créé des infobulles entièrement en CSS, qui marchaient très bien, mais qui n'étaient finalement pas adaptées à mon projet. Je souhaitais par exemple que l'infobulle suive le curseur.
J'ai donc fouillé à droite et à gauche pour récupérer des bouts de code de javascript.
Au final ça donne ça :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#global {
background-image: url(fond_global.jpg);
height: 640px;
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
}
a {
height: 50px;
width: 250px;
position: absolute;
background-color: #00FF00;
}
.popup {
position: relative;
visibility: hidden;
}
.infobulle {
background-image: url(infobulle.png);
background-repeat: no-repeat;
height: 150px;
width: 271px;
padding-top: 30px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.elvis {
top: 100px;
left: 100px;
}
.dunhill {
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="global">
<div class=popup id=popbox></div>
<script type="text/javascript">
if (document.getElementById){
box = document.getElementById("popbox").style;
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = pointer;
}
function poplink(contenu){
var content ="<div class=infobulle>"+contenu+"</div>";
if (document.getElementById)
{
document.getElementById("popbox").innerHTML =
content;
box.visibility = "visible";
}
}
function pointer(e)
{
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
box.left = x+20;
box.top = y+20;
}
function closepopup()
{
if (document.getElementById)
box.visibility = "hidden";
}
</script>
<a class="elvis" href="" onMouseOver="poplink('<img src=\'CD_Elvis.jpg\' alt=\' \'>Elvis, le plus grand rocker de tous les temps ? Ben tiens...');" onmouseout="closepopup()" ></a>
<a class="dunhill" href="" onMouseOver="poplink('<img src=\'dunhill_3D.jpg\' alt=\' \'>Fumer c est mal. Très mal. Trèèèèèèès très mal !');" onmouseout="closepopup()" ></a>
</div>
</body>
</html>Ça marche plutôt pas mal, mis à part :
-Impossible de déclarer le doctype, sinon pffiuut, ça ne marche plus.
-Les infobulles ne sont pas placées relativement aux liens, mais au navigateur et ça, ça me dépasse. Par conséquent, elles n'apparaissent pas au même endroit suivant la taille de la fenêtre.
-Je ne peux pas mettre de caractères spéciaux dans le texte des mes popups (enfin en tous cas dès que je mets une apostrophe, l'infobulle n'apparait plus)
Hm, je pense que c'est tout. Pourriez vous me donner un coup de patte ?
Voici un lien vers ce que je tente de faire : http://www.raphael-bigot.info/admin/hebergements/poplink/poplink.html
(la forme n'a aucun intérêt, hein, c'est juste un test pour comprendre comment ça marche
) Modifié par Ralf (21 Mar 2009 - 23:18)
