Javascript

Résolu/Fermé
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 6 déc. 2009 à 04:08
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 6 déc. 2009 à 15:03
Bonjour,
J'ai fais un menu sur mon site à l'aide d'un javascript assez simple.
N'ayant aucune connaissance en ce domaine pour le moment, je me tourne vers vous.

Je m'explique:
Mon menu se présente comme suis:
- J'ai un script que j'ai récupérer sur un site:
<script type="text/javascript">
function switchMenu(obj)
{
var el = document.getElementById(obj);
if(el.style.display != "block")
{ el.style.display = "block"; }
else
{ el.style.display = "none"; }
}
</script>

- J'ai un lien:
<h3><a onclick="switchMenu('m_tr');" href="#" >Travaux</a></h3>

- Et j'ai un div qui est masqué et qui s'affiche quand je clique sur le lien sans recharger la page (ce qui est le but).
<div id="m_tr" style="display:none;">
<p><a href="lien1.html">Lien 1</a></p>
<p><a href="lien2.html">Lien 2</a></p>
<p><a href="lien3.html">Lien 3</a></p>
</div>


Ce que je voulais faire c'est rajouter une petite flèche vers le bas que le lien et qui pointe vers le haut quand le menu est déplié.
En fait je voudrai juste un script qui s'ajoutant au miens ferai pivoter la flèche dans un sens ou dans l'autre suivant que le menu soit afficher ou non.

J'espère que je me suis bien fait comprendre.
Merci d'avance pour votre aide.

1 réponse

PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
6 déc. 2009 à 09:09
Bjr

En ajoutant une liste d'icônes que tu synchronises lors de l'appel à switchMenu

Ex

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test menu</title>

<style>
*
{
	font-family : arial;
	font-size : 12pt;
}
</style>


<script>
function switchMenu(obj)
{
	var elIcon = document.getElementById(obj+"_icon");
	var el = document.getElementById(obj);
	if(el.style.display != "block")
	{ 
		el.style.display = "block"; 
		elIcon.src = icons["up"].src;
	}
	else
	{ 
		el.style.display = "none"; 
		elIcon.src = icons["down"].src;
	}
}

var icons = new Object();

function load()
{
	icon = new Image();
	icon.src = "fleche_haut.jpg";
	icons["up"] = icon;
	
	icon = new Image();
	icon.src = "fleche_bas.jpg";
	icons["down"] = icon;	
}

</script>
</head>
<body onload="load()">
<h3><a onclick="switchMenu('m_tr');" href="#" ><img id="m_tr_icon" src="fleche_bas.jpg" />Travaux</a></h3>
<div id="m_tr" style="display:none;">
	<p><a href="lien1.html">Lien 1</a></p>
	<p><a href="lien2.html">Lien 2</a></p>
	<p><a href="lien3.html">Lien 3</a></p>
</div>

</body>
</html>
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
6 déc. 2009 à 15:03
Merci beaucoup, c'est parfait.
Le résultat ici: http://arthezius.fr/accueil.html
0