7 novembre 2008
5
07
/11
/novembre
/2008
19:25
Un petit travail fait en TP web dynamique, travail assez simple mais intéressant et que vous pouvez adapter sur des images ou autre sur un site :
Tout d'abord le xhtml :
Le css :
Et enfin le javascript :
C'est pas tout à fait au point donc si vous avez des suggestions ça pourrait être simpa. Merci et j'espère vous apporter quelque chose.
Tout d'abord le xhtml :
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <title>Menu</title> <script src="fisheyes.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="menu1"> <a href="#" >lien1</a> <a href="#">lien2</a> <a href="#">lien3</a> <a href="#">lien4</a> <a href="#">lien5</a> <a href="#">lien6</a> <a href="#">lien7</a> </div> </body> </html> |
Le css :
| #menu1 { /*background: #FF0000;*/ height:100px; width:400px; } a { text-decoration:none; } a:hover { text-decoration:underline; } a:visited { color:#CCCCCC; } a.voyante { font-size :30px; font-weight: bold; } a.intermediaire { font-size : 20px; font-weight: bold; } a.discrete { font-size : 15px; } |
Et enfin le javascript :
| window.onload = init; function init() { var Lien = document.getElementById('menu1').getElementsByTagName('a'); var menu = document.getElementById('menu1'); for(var i=0; i<Lien.length; i++) { Lien[i].addEventListener("mouseover", rendreVoyante, false); } menu.addEventListener("mouseout", rendrePetit, false); } function rendreVoyante() { var Lien = document.getElementById('menu1').getElementsByTagName('a'); for(var j=0; j<Lien.length; j++) { Lien[j].setAttribute('class', 'discrete'); //test si le premier lien est survollé if(this==Lien[0]) { Lien[j].setAttribute('class', 'voyante'); Lien[j=j+1].setAttribute('class', 'intermediaire'); //boucle pour mettre les autre lien en discret for(j=2;j<Lien.length; j++) { Lien[j].setAttribute('class', 'discrete'); } //arret de la fonction pour empecher le elseif de se réaliser break; } //fonctionement normal du menu else if(this==Lien[j]) { Lien[j-1].setAttribute('class', 'intermediaire'); Lien[j].setAttribute('class', 'voyante'); Lien[j=j+1].setAttribute('class', 'intermediaire'); } } } function rendrePetit() { var Lien = document.getElementById('menu1').getElementsByTagName('a'); for(var j=0; j<Lien.length; j++) { Lien[j].setAttribute('class', 'discrete'); } } |
C'est pas tout à fait au point donc si vous avez des suggestions ça pourrait être simpa. Merci et j'espère vous apporter quelque chose.
Partager cet article
