Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
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 :

<!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

Repost 0
Published by AtChA - dans Programmation
commenter cet article

commentaires

 395149_10150485772854288_664024287_8595839_1160149945_n.jpg

Bonjour et bienvenue.

Je mé présente AtChA.

Je suis Web designer, développeur front end, community manager, gamer et donc forcément geek. Je suis basé à Poitiers.

Né dans les années 80, j'ai grandis avec la nouvelle technologie et ce blog est là pour apporter des connaissances et de la distractions aux âmes qui s'aventurent par ici.

Recherche

Catégories