Barres déroulantes

Description

Des barres situées sur le coté qui se déroulent lorsque l'on passe la souris dessus.

Source / Exemple :


<html>
<head>
<title>Iwaweb - Barres déroulantes</title>
<script language="javascript">
window.status="Cliquez sur le document pour faire rentrer les barres";
xr=["voirscript","telecharger","documentation"];
occupe=0;
xt=0;
function effacer()
{
	for(i=0;i<3;i++)
	{
		eval("document.all."+xr[i]+".style.pixelLeft=-108");
	}	
}
function derouler(xs)
{
	occupe=1;
	xt=xs;
	for(i=0;i<3;i++)
	{
		if(i!=xs)
		{
			eval("document.all."+xr[i]+".style.pixelLeft=-108");
		}		
	}
	function action()
	{
		eval("document.all."+xr[xs]+".style.pixelLeft=document.all."+xr[xs]+".style.pixelLeft+2");
	}
	if(eval("document.all."+xr[xs]+".style.pixelLeft")<0){action();}
	if(eval("document.all."+xr[xs]+".style.pixelLeft")<0)
	{
		appel=setTimeout("derouler("+xs+")",12);		
	}
	else{occupe=0}
}
function attente(xs)
{
	if(!occupe){derouler(xs);}
	else{if(xs!=xt){clearTimeout(appel);occupe=0;}}
}
</script>
</head>
<body onclick="effacer()">
<div id="voirscript" style="position:absolute;height:22px;width:130px;left:-108px;top:200px" onmouseover="attente(0)">
<a href="barres.htm"><img src="images/voir script_interface.jpg" height="22" width="130" border="0"></a>
</div>
<div id="telecharger" style="position:absolute;height:22px;width:130px;left:-108px;top:232px" onmouseover="attente(1)">
<a href="download/barres.zip"><img src="images/telecharger_interface.jpg" height="22" width="130" border="0"></a>
</div>
<div id="documentation" style="position:absolute;height:22px;width:130px;left:-108px;top:264px" onmouseover="attente(2)">
<a href="javascript:alert('Pas de documentation pour ce script !')"><img src="images/documentation_interface.jpg" height="22" width="130" border="0"></a>
</div>
</body>
</html>

Conclusion :


Retrouvez toutes les MAJ de ce script sur http://www.iwaweb.net/

@+

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.