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

Signaler
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
-
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
-
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 :)

4 réponses

Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
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
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
oh bah si il ya moyen de le faire rapidement en jQuery, je prend :)
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
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 !
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
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)
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
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 ?
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
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 ?
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
Un Bouton alternant 2 fonctions sur le même évènement onClick
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
Ouais mais quelle fonction ?
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
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 :)