Sujet Précédent Sujet Suivant

Menu deroulant image css html javascript

Fermé
th.bizeul Messages postés 8 Date d'inscription jeudi 11 novembre 2010 Statut Membre Dernière intervention 24 août 2011 - 11 nov. 2010 à 18:52
th.bizeul Messages postés 8 Date d'inscription jeudi 11 novembre 2010 Statut Membre Dernière intervention 24 août 2011 - 12 nov. 2010 à 12:01
Bonjour,
j'essaie de faire un menu deroulant vertical avec des images pour faire les liens.
mais je dois avoir une erreur dans mes script et la blague c'est que je ne sais pas ou elle est --'
je vous copie mes ligne de code html css et javascript

Html
<!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" xml:lang="fr" >
<head>
<title>ustv</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="designustv.css" />
<script type="text/javascript" src="new 4.js"></script>
</head>
<body>
<div id="banniere">
</div>

<div id="menu">
<ul class="nav">

<li><a href="index.html" class="accueil"></a></li>
<li><a href="photo.html" class="photo"></a></li>
<li><a href="videos.html" class="videos"></a></li>
<li><a href="evenement.html" class="evenement"></a></li>
<li><a href="arbitre.html" class="arbitre"></a></li>
<li><a href="staff.html" class="staff"></a></li>
<li><a href="convoc.html" class="convoc"></a></li>
<li><a href="agenda.html" class="agenda"></a></li>
<li><a href="equipe.html" class="equipe"></a></li>
<li><a href="groupement jeune.html" class="group"></a></li>
<li><a href="historique.html" class="niveau1"></a>
<li><a href="#">connexion</a></li>
<li><a href="#">inscription</a></li>
</li>
<li><a href="part.html" class="part"></a></li>
<li><a href="bene.html" class="bene"></a></li>
<li><a href="bi.html" class="bi"></a></li>


</ul class="nav">

</div>

css

/* Le menu */

#menu ul.nav {list-style:none;margin:left;margin-top:40px !important;padding:0;}
#menu ul.nav li {width:200px;}
#menu ul.nav li a.accueil {display:block;background:url(accueil.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.accueil:hover{background:url(accueilh.gif) no-repeat scroll left top;}
#menu ul.nav li a.photo{display:block;background:url(photo.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.photo:hover{background:url(photoh.gif) no-repeat scroll left top;}
#menu ul.nav li a.videos{display:block;background:url(videos.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.videos:hover{background:url(videosh.gif) no-repeat scroll left top;}
#menu ul.nav li a.evenement{display:block;background:url(evenement.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.evenement:hover{background:url(evenementh.gif) no-repeat scroll left top;}
#menu ul.nav li a.arbitre{display:block;background:url(arbitre.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.arbitre:hover{background:url(arbitreh.gif) no-repeat scroll left top;}
#menu ul.nav li a.staff{display:block;background:url(staff.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.staff:hover{background:url(staffh.gif) no-repeat scroll left top;}
#menu ul.nav li a.convoc{display:block;background:url(convoc.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.convoc:hover{background:url(convoch.gif) no-repeat scroll left top;}
#menu ul.nav li a.agenda{display:block;background:url(agenda.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.agenda:hover{background:url(agendah.gif) no-repeat scroll left top;}
#menu ul.nav li a.equipe{display:block;background:url(equipe.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.equipe:hover{background:url(equipeh.gif) no-repeat scroll left top;}
#menu ul.nav li a.group{display:block;background:url(gj.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.group:hover{background:url(gjh.gif) no-repeat scroll left top;}
#menu ul.nav li a.niveau1{display:block;background:url(hist.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.niveau1:hover, #menu ul.nav li a.sfhover ul ul{background:url(histh.gif) no-repeat scroll left top; left:-999em;}
#menu ul.nav li a.part{display:block;background:url(part.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.part:hover{background:url(parth.gif) no-repeat scroll left top;}
#menu ul.nav li a.bene{display:block;background:url(bene.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.bene:hover{background:url(beneh.gif) no-repeat scroll left top;}
#menu ul.nav li a.bi{display:block;background:url(bi.gif) no-repeat scroll left top ;height:37px;}
#menu ul.nav li a.bi:hover{background:url(bih.gif) no-repeat scroll left top;}
#menu{
float : left;
width:200px;
}

et javascript

sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


merci d'avance

A voir également:

7 réponses

Réponse 1 / 7
Twinpics
11 nov. 2010 à 19:26
Bonsoir,
Une erreur dans l'utilisation des balises de liste <ul> qui ne résoudra pas forcément le bug mais du point de vue validation syntaxique du code HTML : 
<li><a href="historique.html" class="niveau1"></a>
<li><a href="#">connexion</a></li>
<li><a href="#">inscription</a></li>
</li>

Si "connexion" et "inscription" constitues un sous-menu alors un <li> ne peut pas contenir d'autres <li> autrement que en ouvrant une sous-liste comme ceci : 
<li><a href="historique.html" class="niveau1"></a>
    <ul>
        <li><a href="#">connexion</a></li>
        <li><a href="#">inscription</a></li>
    </ul>
</li>

PS: le lien historique.html n'a pas de libellé, c'est curieux ?
-----------------------------------------------------------------------------------------------------------------------------------------------
<* Suivez-moi sur FesseS-BouC *>
0
Réponse 2 / 7
th.bizeul Messages postés 8 Date d'inscription jeudi 11 novembre 2010 Statut Membre Dernière intervention 24 août 2011
11 nov. 2010 à 20:17
cest quoi que vous appelez libelle ???
desole je debute :s
0
Réponse 3 / 7
Twinpics
11 nov. 2010 à 20:33
Un libellé c'est ce qui va apparaître dans la page web pour identifier un lien. Un exemple : 
<a href="historique.html" class="niveau1">Historique</a>
0
Réponse 4 / 7
th.bizeul Messages postés 8 Date d'inscription jeudi 11 novembre 2010 Statut Membre Dernière intervention 24 août 2011
11 nov. 2010 à 20:55
ok j'ai aucun libelle parce que dans mon css j'ai mis des images a la place des lien et dans le cas present j'aimerai que quand la souris passe sur l'image historique il ya des image pour envoyer vers les pages "connexion" et "inscription"

et c'est la que je n'arrive pas --'
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Twinpics
11 nov. 2010 à 21:10
Un lien sans libellé ne peut pas fonctionner. Sois tu mets un texte comme dans mon précédent exemple, sinon si tu veux utiliser une image à la place du texte, il faut faire comme ceci : 
<a href="historique.html" class="niveau1"><img src="historique.gif" alt="Historique" /></a>
0
Réponse 6 / 7
th.bizeul Messages postés 8 Date d'inscription jeudi 11 novembre 2010 Statut Membre Dernière intervention 24 août 2011
12 nov. 2010 à 12:01
j'ai mis mes image dans le css avec comme lien entre les deux la class et ça fonctionne
0
Réponse 7 / 7
th.bizeul Messages postés 8 Date d'inscription jeudi 11 novembre 2010 Statut Membre Dernière intervention 24 août 2011
12 nov. 2010 à 12:01
mais pas le deroulant :s
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Image cliquable dans html
pau -
efS -

5 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses