+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Infobulles Javascript (/showthread.php?tid=175)
Infobulles Javascript - maxtheb - 03-09-2006
Voila depuis un moment je cherchais une infobulle qui restait fixe, qui pouvait contenir des liens, du texte et des images ...
J'ai cherché, trouvé quelques solutions mais rien qui ne me contentait à 100 %, j'ai donc modifié un script existant.
Malheureusement je ne m'y connais pas assez pour répondre à toutes vos questions et le problème majeur de ce script est qu'IL NE FONCTIONNE PAS SOUS FIREFOX ... donc si un gars balèze passe et qu'il réussi à le modifier pour que ca marche je suis preneur !
donc voila les sources :
carte.htm :
Code :
<HTML><BODY style="MARGIN: 0px; WIDTH: 300px; HEIGHT: 160px"></BODY></HTML>fonctions.js :
Code :
domok = document.getElementById;
var skn_to = null; // pointeur vers un timeout pour virer la carte si on va pas dedans
if (domok) {
skn = document.getElementById("topdecklink").style;
}
// affiche la carte de visite
function poplink(e,image,texte1,texte2,lien) {
lien1= '<A HREF="#" onclick="top.location.href=\''+lien+'\'">aller sur le site</A>';
avatar='<IMG SRC="../avatars/'+image+'.jpg" width="100" height="100" BORDER="0">';
var content ='<TABLE BGCOLOR="#000000" CELLSPACING="1" CELLPADDING="0" WIDTH="300" HEIGHT="160"><TD><TABLE border="0" BGCOLOR="yellow" width="298" height="158"><TR><TD><TABLE width="100" height="100"><TD>'+avatar+'</TD></TABLE></TD><TD width="198">'+texte1+'<TABLE><TR><TD>'+texte2+'</TD></TR></TABLE></TD></TR><TR><TD colspan="2" align="center">'+lien1+'</TD></TR></TABLE></TD></TABLE>';
if (domok) {
document.frames("topdecklink").document.body.innerHTML = content;
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.y+document.body.scrollTop;
skn.left = x+10;
skn.top = y+30;
skn.visibility = "visible";
}
}
// lance un appel délayé pour fermer la carte quand on sort de celle-ci
function killlink(e){
if (domok){
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.y+document.body.scrollTop;
if(x <= parseInt(skn.left) || parseInt(skn.left)+300 <= x ||
y <= parseInt(skn.top) || parseInt(skn.top)+160 <= y)
setTimeout('clearlink()', 50);
}
}
// ferme la carte
function clearlink(){
skn.visibility = "hidden";
}
// lance un appel délayé pour fermer la carte lorsqu'on navigue
// sur les liens et les icones qui affichent les cartes
function delaykilllink(){
skn_to = setTimeout('clearlink()', 1000);
}
// cancelle l'appel si on visionne une nouvelle carte
function cancelkilllink(){
if(skn_to){
clearTimeout(skn_to);
skn_to = null;
}
}page1.html :
Code :
<HTML>
<IFRAME id=topdecklink onmouseover=cancelkilllink()
style="VISIBILITY: hidden;MARGIN: 0px; WIDTH: 300px; POSITION: absolute; HEIGHT: 160px"
onmouseout=killlink(event)
src="carte.htm"
frameBorder=0 scrolling=no></IFRAME>
<SCRIPT
src="fonctions.js">
</SCRIPT>
<A
HREF="lien.html"
onmouseover="cancelkilllink();poplink(event,'image1','titre1','texte1','page2.html');"
onmouseout="delaykilllink()">
test1
</A>
<BR><BR>
<A
HREF="lien.html"
onmouseover="cancelkilllink();poplink(event,'image2','titre2','texte2','page3.html');"
onmouseout="delaykilllink()">
test2
</A>
</HTML>Vous n'avez simplement qu'à faire un copier coller des 3 fichiers pour que ca fonctionne
J'attend donc avec impatience vos commentaires
RE: Infobulles Javascript - orditeck - 03-09-2006
L'aide pour ce script ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=275