[JS] 2 liens sur un même élément (bouton)

Résolu

Digit@lChord Messages postés 141 Statut Membre -
Digit@lChord Messages postés 141 Statut Membre - 11 nov. 2011 à 15:24

Bonjour,
J'aimerais faire une sorte de bouton en javascript, de sorte que le lien du bouton change une fois qu'on a cliqué dessus et redevienne comme le lien de départ quand on clique pour la 2eme fois.

Pour faire plus simple, au départ je souhaiterais qu'il affiche ça :

<img src="pause.png" onclick="pause()">

et une fois qu'on a cliqué dessus et que sa a mis la musique sur pause, j'aimerais qu'à se même endroit, cette image devienne :

<img src="play.png" onclick="play()">

Un bouton quoi ^^'

Merci d'avance :)

Afficher la suite

4 réponses

Réponse 1 / 4
babane5 Messages postés 108 Statut Membre 11

Es-ce que tu veux juste le faire avec du JS, ou tu peux le faire avec une bibliothèque javascript, telle que jQuery ??? Si oui, moi j'ai une solution a ton problème
0
Réponse 2 / 4
Digit@lChord Messages postés 141 Statut Membre 8

oh bah si il ya moyen de le faire rapidement en jQuery, je prend :)
0
Réponse 3 / 4
babane5 Messages postés 108 Statut Membre 11
```
<script src="js/jquery.js" type="text/javascript"></script>

<a href="#" class="button">Salut</a>

<script type="text/javascript">
$(document).ready(function(){
	var passage = 1;
						  
	$('.button').click(function()({
		if(passage==1){
			$('.button').addClass('actif');
			passage = 2;
		}
		else if(passage==2){
			$('.button').removeClass('actif');
			passage = 1;
		}
		
	});					  
});
</script>
```
Puis, tu crées dans le css une class qui s'appelle actif, que tu met le design que tu veux !
En cas de question je suis là =D--
L'habit ne fait pas le moine, donc Dreamweaver ne fait pas de vous un webmaster !
0
1. Digit@lChord Messages postés 141 Statut Membre 8
  
  ok je vais voir ça, merci beaucoup ;D
  
  0
2. Digit@lChord Messages postés 141 Statut Membre 8
  
  Bon si j'ai bien compris, le class de "salut" est censé passer de "bouton" à "actif" une fois que l'utilisateur a cliqué dessus ?
  Sa m'a l'air bon mais chez moi sa ne fonctionne pas, "salut" reste avec le class bouton quoi que je fasse :(
  
  0
3. babane5 Messages postés 108 Statut Membre 11
  
  Tu as télécharger la fichier jquey ?? http://code.jquery.com/jquery-1.7.min.js => copie le texte et met le dans un fichier qui s'appelle jquery.js (le tout qui est dans un dossier js)
  
  0
4. Digit@lChord Messages postés 141 Statut Membre 8
  
  Ah ok j'ai compris sa ne marchais pas parceque j'avais d'autre .js lié à la page, là si je les enleves, bah mon bouton fonctionne mais si je les remet sa ne fonctionne plus :/ Comment sa se fait ?
  
  0
5. babane5 Messages postés 108 Statut Membre 11
  
  <a href="#" class="button">Salut</a> <script type="text/javascript"> $(document).ready(function(){ var passage = 1; alert('salut'); $(".button").click(function(){ if(passage==1){ $(".button").addClass("actif"); passage = 2; return false; } else if(passage==2){ $(".button").removeClass("actif"); passage = 1; return false; } }); }); </script>
  
  Réessaye avec sa... Mais juste, il doivent de permettre de faire quoi ce liens ?
  
  0

Digit@lChord Messages postés 141 Statut Membre 8

J'ai trouvé comment faire finalement :)
Pour les fonctions j'en parlais dans ma 1ere question (play et pause)


<script type="text/javascript">	
function playbutton(){
	play();
	document.getElementById('play').style.display = 'none';
	document.getElementById('pause').style.display = 'block';
}
function pausebutton(){
	pause();
	document.getElementById('pause').style.display = 'none';
	document.getElementById('play').style.display = 'block';
}
</script>
<img id="play" src="img/player_hover_play.png" onclick="playbutton()" style="display:none">
<img id="pause" src="img/player_hover_pause.png" onclick="pausebutton()" style="">

Merci quand même :)

[JS] 2 liens sur un même élément (bouton)

4 réponses

Discussions similaires

Newsletters