Overblog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

AtChA's blog est avant tout là pour donner mon avis et apporter de l'aide dans la création Web. J'exprime aussi mes humeurs et mon ressentit à travers des vidéos et des critiques.

Publicité

Menu type fisheye javascript

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.

Publicité
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article