Recherche dans le forum:
Rechercher


« Voir le sujet précédent :: Voir le sujet suivant »  
Auteur Message
Message17/10/2008, 10 10 20 (UTC)    
Sujet du message: Script pour une info Bulle

Bonjour à tous,
Je suis modelisateur 3D et programmeur dans divers sujets,comme les jeux vidéos,le web etc.
Toujours est-il que je vais vous apprendre ici à faire une infos bulles.
Ce script est de moi,totalement de ma composition.

Faire une info-bulle au passage de la souris sur un lien.
C'est la gestion événementielle. Il faut mettre ces codes dans sa page source.


Code:
<script type="text/javascript">
<!-- script de modelisation.fr.gd -->
function initBulle() {
if (document.getElementById) {
document.write("<div id=\"divBulle\"></div>");
}
}
function infoBulle(text) {
if (document.getElementById) {
var div=document.getElementById("divBulle");
div.innerHTML=text;
div.style.visibility="visible";
var X=posX
if (X<0)  X=0;
var Y=posY+20;
div.style.top=Y+"px";
div.style.left=X+"px";
}
}
function hideBulle(){
if (document.getElementById){
document.getElementById("divBulle").style.visibility="hidden";
}
}
var posX=0,posY=0
document.onmousemove=getMousePos;
function getMousePos(e) {
if(document.all {
posX=event.x+document.body.scrollLeft;
posY=event.y+document.body.scrollTop;
}else{
posX=e.pageX;
posY=e.pageY;
}
}
</script>
<style type="text/css">
//Personnalisation de l'info Bulle
#divBulle {
position:absolute;
visibility:hidden;
font-family:arial;
font-weight:bold;
border:1px solid:#999;
background-color:#DDD;
color:#000;
padding:4px;
font-size:10pt;
}
</style>
Voici les liens avec les infos bulles:
<a href="http://modelisation.fr.gd" onmousemove="infoBulle('Mettez ici vos commentaires<br />Infos Bulle')"
onmouseout="hideBulle()">Tout l'univers de la modélisation</a>

<script type="text/javascript">
initBulle();
</script>

Continuez ensuite tout les liens et faites de la meme manière pour afficher les infos bulles.

Attention:Si il y a une erreur dans le code,c'est une faute de frappe,merci de me prévenir dans ce cas là.

INFO:
Mettre se code en le personnalisant si vous le voulez dans sa page en cliquant sur source précédemment.


Dernière édition par modelisation le 04.09.2012, 21:34; édité 4 fois
Montrer les messages depuis:   


Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com