difficulté avec une condition

05 oct. 2006, 13:03

Bonjour,

Voila, je vous explique donc mon problème :

je bosse sur un site web ( jusque la, rien d'anormal !) et dans cette page, il y a de la musique géré par flash. En bas des pages, on retrouve un petit icone qui est animé lorsque il y a de la musique. Si on clic sur cette icone, la musique s'arrette mais je n'arrive pas a affichier le second icone qui lui est fixe.

voici quelques morceau de codes pour vous aider a mieux comprendre ...

Dans la page, ce code appelle la fonction "changezic" et va aussi charger l'image en question dont le chemin se situr dans un fichier CSS :

Code : Tout sélectionner

<a href="#" id="jkbox_on" onclick="changeZic();"></a>

voici la fonction :

Code : Tout sélectionner

<script>
var music=true;
function changeZic(){
if(music){
parent.frames.zic.location="inc/music_off.html";
music=false;
}else{
parent.frames.zic.location="inc/music.html";
music=true;
}
}
</script>

et voici le morceau de code de la page CSS :

Code : Tout sélectionner

#jkbox_on{position:absolute;top:11px;right:2px;width:50px;height:28px;background-image:url('../img/jkbox.gif');}
#jkbox_off{position:absolute;top:11px;right:2px;width:50px;height:28px;background-image:url('../img/jkbox.jpg');}

vous avez du le remarquer, j'ai deja incrementer une position off mais je ne sais pas comment l'appeler ^^ je supose qu'il faut utiliser un if ... then ... mais les différentes syntaxe que j'ai essayer ne fonctionnent pas.

un dernier morceau de code si vous juger utile de l'avoir, le contenu de music.html :

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<link href="../style/base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<embed src="../flash/flash/sarazvati.mp3" autostart="true" loop="true" hidden="true" height="0" width="0">
</body>
</html>

et le code de la page music_off :

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, http://www.pspad.com">
<title></title>
<link href="../style/base.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

voila, j'espère avoir été suffisament clair ^^

merci d'avance pour vos futur contributions[/code]

05 oct. 2006, 15:29

je pense que tu dois définir 2 classes de styles pour ton lien "jkbox" qui afficheront alternativement tes 2 icônes (marche/arrêt)

Dans la fonction javascript tu dois activer sur le lien "jkbox" l'une ou l'autre classe de style et ainsi quand la music chantoit

l'icône dançoit et quand on clique sur cette dernière, la music s'arrête et l'icône change.

comme ça :

Code : Tout sélectionner

<a id="jkbox" class="jkbox_on" href="javascript:changeZic();"></a>


<script> 
var music=true; 
function changeZic(){ 
	if(music){ 
		parent.frames.zic.location="music_off.htm"; 
		document.getElementById("jkbox").className = "jkbox_off";
		music=false; 
	}else{ 
		parent.frames.zic.location="music_on.htm"; 
		document.getElementById("jkbox").className = "jkbox_on";
		music=true; 
	} 
} 
</script>

<style>
.jkbox_on {position:absolute;top:11px;right:2px;width:50px;height:28px;background-image:url('jkbox_on.gif'); cursor:pointer} 
.jkbox_off {position:absolute;top:11px;right:2px;width:50px;height:28px;background-image:url('jkbox_off.gif'); cursor:pointer}
</style>

05 oct. 2006, 15:40

merci, c'est surement sa mais je n'arrive pas a le mettre en place. mon icone ne s'affiche plus sir je copie-colle ton exemple

difficulté avec une condition

Qui est en ligne