Menu vertical dynamique

Télécharger le projet
Commenter

Description

Ce menu se deplace sur l'axe des ordonnées selon la position du curseur sur ce meme axe. Le menu est en réalité un tableau dont la hauteur de la premiére ligne change en fonction de la position du curseur.
changement de couleur de la ligne lorsque la souris passe dessus.

Source / Exemple : 


<!--
But: menu dynamique vertical: le tableau qui represente le menu, se deplace verticalement selon
la position du curseur sur l'axe des ordonnées.
Ajout également d'un effet sur la ligne du tableau lors du passage de la souris.
-->
<html>
<head>
	<title>Menu dynamique vertical</title>

<SCRIPT LANGUAGE=JavaScript>
//permet de deplacer sur la hauteur un tableau par le biais d'un changment de taille de la premiere ligne du tableau
function TableauDynamique(e)
{
    //recupére le deplacement du curseur sur l'axe des y
    y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
       // petit calcul pour pouvoir accéder à tout les champ du menu quelques soit la position du menu
    //remarque: si ajout de ligne dans le menu, penser à modifier le calcul si nécessaire
    var taille="";
    if (y<250)
   {
        taille =Math.floor(y/110)*100;
    }
    else if (y<750)
   {
        taille =Math.floor(y/110)*100+50;
    }
   else if (y<850)
   {
        taille =Math.floor(y/110)*100+75;
    }
    else
    {
        taille =Math.floor(y/110)*100+100;
    }
    document.getElementById("cellule").style.height=taille;
}
if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
document.onmousemove =  TableauDynamique;

</SCRIPT>

</head>

<body >

<table  align="left">
<TR>

<TABLE align="left">	
	<TR > 

		<TD id="cellule">
      &nbsp;
		</TD>
			<TD >
			&nbsp;
		</TD>
		</tr>		
		<!-- ceci c'est pour permettre le changement de couleur de la ligne du tableau quand la souris passe dessus -->
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4"> 
		<TD >
			&nbsp;1.
		</TD>
<!--j'ai laisser les lien qui bien sur ne fonctionne pas vu que c'est juste un morceau du code original -->
		<a href="#nb"> 	<TD style="cursor: pointer">
		<p><font color="#3333cc"><SPAN TITLE="Choix du nombre de facteur(s)">Nombre de Facteur(s)</span></font></p>
		</TD></a>
	</TR>
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
		<TD>
			&nbsp;2.
		</TD>
	<a href="#param">	<TD style="cursor: pointer">	
		<p><font color="#3333cc"><SPAN TITLE="Paramétrage de l'analyse: le(s) facteur(s), mesure repeté ou non, post-Hoc, avec ou sans interaction">Paramétrage de l'analyse</span></font></p>
		</TD></a>
	</TR>
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
		<TD>
			&nbsp;3.
		</TD>
		<a href="#option"><TD style="cursor: pointer">
      <p><font color="#3333cc"><SPAN TITLE="Option du post-Hoc">	Options </span></font></p>
		</TD></a>
	</TR>
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
		<TD>
			&nbsp;4.
		</TD>
	<a href="#resultat">	<TD style="cursor: pointer">		
				<p><font color="#3333cc"><SPAN TITLE="Affichage des resultats au format HTML ou RTF (Word)">Résultats</span></font></p>
		</TD></a>
	</TR>

</TABLE>
</table>
</body>
</html>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.