18041 sujets

Questions générales et questions de débutants

Survol d'un lien = description qui suit la souris

Bonjour,

Je souhaite créer un lien qui, lorsqu'on le survol, possède une description avec images.

Voici un exemple concret de ce que je souhaite effectuer: http://www.javascriptfr.com/
les descriptions des liens suivent la souris et s'affichent lors du survol des liens.

Merci pour vos solutions pour réaliser ce code!
Bonjour,
Je principe est là, a toi d'ajouter ce que tu veux dans tes bulles

<html>                          
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html;CHARSET=iso-8859-1">
<script language="javascript" src="bulles.js"></script>
</head>
<body bgColor="#ffffff">
<a href="#" onmouseover="javascript:Labule('voila une belle<br>image',12,150);" onmouseout="javascript:EfaceHelp();">
<img src="http://www.fox-infographie.com/zzz/oliband2.jpg" border="0"  id="Lhome" NAME="Lhome"  /></A>
<a href="#" onmouseover="javascript:Labule('et ici une autre<br>image',132,150);" onmouseout="javascript:EfaceHelp();">
<img SRC="http://www.fox-infographie.com/zzz/oliband1.jpg" border="0"  id="Lbt0x" name="Lbt0x"   /></a>
</body></html>


Le javascript est ainsi

function Labule(texte,Lnx,Lny) {
  PreBule="<table border='0' cellspacing='0' cellpadding='3'><tr bgcolor='#eeeeff'><TD><table border='0' cellpadding='2' cellspacing='0' bgcolor='#122884'><tr><TD><FONT size='-1' face='arial' color='#eeeeff'>"+texte+"</FONT></TD></tr></table></TD></tr></table>";
  if (document.layers) {
    document.layers["Help"].document.write(PreBule);
    document.layers["Help"].document.close();
    document.layers["Help"].top=Lny;
    document.layers["Help"].left=Lnx;
    document.layers["Help"].visibility="show";}
  if (document.all) {
    Help.innerHTML=PreBule;
    document.all["Help"].style.top=Lny;
    document.all["Help"].style.left=Lnx; 
    document.all["Help"].style.visibility="visible";
  }
  else if (document.getElementById) {
    document.getElementById("Help").innerHTML=PreBule;
    document.getElementById("Help").style.top=Lny;
    document.getElementById("Help").style.left=Lnx;
    document.getElementById("Help").style.visibility="visible";
  }
}
function EfaceHelp() {
        if (document.layers) {document.layers["Help"].visibility="hide";}
        if (document.all) {document.all["Help"].style.visibility="hidden";}
        else if (document.getElementById){document.getElementById("Help").style.visibility="hidden";}
}

function FaitHelp() {
        if (document.layers) {
          document.write("<layer name='Help' top='150' left='0' visibility='hide'></layer>");
	}
	if (document.all) {
                document.write("<div id='Help' style='position:absolute;top:150;left:0;visibility:hidden'></div>");
	}
	else if (document.getElementById) {
                document.write("<div id='Help' style='position:absolute;top:150;left:0;visibility:hidden'></div>");
	}

}
FaitHelp();
Ok, merci, je vais essayer tout ça!

Es-ce que les images se chargent lors du chargement de la page ou seulement lorsque nous passons sur le lien?
Et je voulais réaliser le contraire... le lien est en texte et le bloc qui apparait en image tout en suivant le mouvement de la souris!

Merci d'avance pour vos solutions!
samroud a écrit :
Et je voulais réaliser le contraire... le lien est en texte et le bloc qui apparait en image tout en suivant le mouvement de la souris!

Merci d'avance pour vos solutions!
Bonjour,

Je rappel, à tout hasar, que le but du forum n'est pas d'obtenir une solution clé en main, mais d'aider à corriger les problèmes de solutions déjà un minimum implémenté (ce qui peut se faire aussi au niveau fonctionnel, sans qu'il n'y ai de ligne de code, mais ce n'est pas le cas ici)...
Sujet clos
Aller à