Je cherche un script
yen17
-
PhP Messages postés 1774 Statut Membre -
PhP Messages postés 1774 Statut Membre -
Je cherche un script permettant qu'au passage de la sours apparaisse une bulle sur le lien(image ou bannière) pointé dans laquelle je puisse inscrire le texte voulu...Merci d'avance.Yen17 pour www.gregorio.fr.st
2 réponses
-
Il faut utiliser les onMouseOver et les Layers... Y'a un script OverLib.js qui fait ça. Fais une recherche sur google.fr
Il doit y en avoir pleins d'autres sur les sites javascript.
-= Bobinours =- -
Salut yen17
Voici l'intégralité d'un des scripts que j'ai fait à partir de scripts trouvés sur le net : je réalisé une adaptation pour utiliser des objets JavaScript. C'est mieux, c'est comptatible IE/NS (à tester qd même !). Le but m'afranchir au maximum des différences entres les 2 navigateurs et utiliser des méthodes génériques.
Voici le code (il est un peu long je sais ...) :
<HTML>
<HEAD>
<TITLE>Test de survol de la souris ...</TITLE>
<STYLE>
.abs {position:absolute; left:-5000px;}
</STYLE>
<SCRIPT language="JavaScript">
<!--
// Les objets pour NS
// Objet pour souris format NS
function NS_mouse()
{
this.x=0;
this.y=0;
}
// Convertions les coordonnées relatives de la souris en coordonnées absolues
function NS_mouse_setXY(event_object)
{
this.x=event_object.pageX;
this.y=event_object.pageY;
}
NS_mouse.prototype.setXY=NS_mouse_setXY;
// Créer un objet qui va stocker une référence sur le tag <DIV>
function NS_divTag(id)
{
this.id=id;
}
function NS_divTag_init(id)
{
// Initialisation de la référence du tag <DIV>
this.ref=((id) && (window.document.layers[id])) ? window.document.layers[id]:null;
}
NS_divTag.prototype.init=NS_divTag_init;
// Positionne le tag <DIV> horizontalement à X
function NS_divTag_setX(x)
{
return (this.ref.left=x);
}
NS_divTag.prototype.setX=NS_divTag_setX;
// Positionne le tag <DIV> verticalement à Y
function NS_divTag_setY(y)
{
return (this.ref.top=y);
}
NS_divTag.prototype.setY=NS_divTag_setY;
// Les objets pour IE
// Objet pour souris
function IE_mouse()
{
this.x=0;
this.y=0;
}
// Convertions les coordonnées relatives de la souris en coordonnées absolues
function IE_mouse_setXY(event_object)
{
this.x=document.body.scrollLeft+event_object.clientX;
this.y=document.body.scrollTop+event_object.clientY;
}
IE_mouse.prototype.setXY=IE_mouse_setXY;
function IE_divTag(id)
{
this.id=id; // On conserve l'id
}
function IE_divTag_init(id)
{
// Initialisation de la référence du tag <DIV>
this.ref=((id) && (document.all[id])) ? document.all[id] : null;
}
IE_divTag.prototype.init=IE_divTag_init;
// Positionne le tag <DIV> horizontalement à X
function IE_divTag_setX(x)
{
return (this.ref.style.pixelLeft=x);
}
IE_divTag.prototype.setX=IE_divTag_setX;
// Positionne le tag <DIV> verticalement à Y
function IE_divTag_setY(y)
{
return (this.ref.style.pixelTop=y);
}
IE_divTag.prototype.setY=IE_divTag_setY;
// Les objets communs
function Mouse()
{
}
function DivTag(id,dX,dY)
{
this.x=0;
this.y=0;
this.dX=dX || 0;
this.dY=dY || 0;
this.init(id); //Initialise this.ref ...
}
// C'est ici qu'est le truc :
// DivTag descend d'un objet différent selon le type de navigateur
// Idem pour Mouse
if (document.all)
{
DivTag.prototype=new IE_divTag();
Mouse.prototype=new IE_mouse();
}
else
{
DivTag.prototype=new NS_divTag();
Mouse.prototype=new NS_mouse();
}
// Créé un objet mouse dont le but est de stocker/convertir la position de la souris
var mouse=new Mouse();
// Déplace le divTag à la position de la souris ...
function divTag_moveTo(mouse_event)
{
// Convertion des coordonnées relatives de la souris en coordonnées absolues
mouse.setXY(mouse_event);
this.x=mouse.x+this.dX;
this.y=mouse.y+this.dY;
this.setX(this.x);
this.setY(this.y);
}
DivTag.prototype.moveTo=divTag_moveTo;
// Cache le tag en la placant hors de l'écran : efficace !
function divTag_hide()
{
this.x=-5000;
this.setX(this.x);
}
DivTag.prototype.hide=divTag_hide;
function load()
{
// Déclaration des objets info-bulles
// Un tableau n'est pas obligatore !
bulle=new Array();
bulle[0]=new DivTag("bulle1",10,20);
bulle[1]=new DivTag("bulle2",10,20);
}
// -->
</SCRIPT>
</HEAD>
<BODY ONLOAD="load()">
<a onmouseover="bulle[0].moveTo(event)"
onmouseout="bulle[0].hide()"
href="javascript:void(0)">Passer la souris sur ce lien pour voir l'info-bulle n°1</A>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a onmouseover="bulle[1].moveTo(event)"
onmouseout="bulle[1].hide()"
href="javascript:void(0)">Passer la souris sur ce lien pour voir l'info-bulle n°2</A>
<div id=bulle1 class=abs>
<table>
<tr>
<td bgcolor="#FFFF00"><p color=#0000FF>Et voici l'info-bulle n°1 ...</p></td>
</tr>
</table>
</div>
<div id=bulle2 class=abs>
<table>
<tr>
<td bgcolor="#FFF010"><p color=#0000FF><b>Et l'info-bulle n°2 ... + gras</b></p></td>
</tr>
</table>
</div>
</BODY>
</HTML>
Et voilà ...
@+
Philippe
