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

Résolu/Fermé

Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 - 11 nov. 2011 à 12:39
Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 - 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 :)

A voir également:

[JS] 2 liens sur un même élément (bouton)
Verifier un lien - Guide
2 comptes whatsapp - Guide
Créer un lien pour partager des photos - Guide
2 ecran pc - Guide
Word numéro de page 1/2 - Guide

4 réponses

Réponse 1 / 4

babane5 Messages postés 99 Date d'inscription mercredi 2 novembre 2011 Statut Membre Dernière intervention 26 juin 2012 11
11 nov. 2011 à 13:05

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

Réponse 2 / 4

Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 8
11 nov. 2011 à 13:06

oh bah si il ya moyen de le faire rapidement en jQuery, je prend :)

Réponse 3 / 4

babane5 Messages postés 99 Date d'inscription mercredi 2 novembre 2011 Statut Membre Dernière intervention 26 juin 2012 11
11 nov. 2011 à 13:18

<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 !

Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 8
11 nov. 2011 à 13:19

ok je vais voir ça, merci beaucoup ;D

Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 8
11 nov. 2011 à 13:32

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 :(

babane5 Messages postés 99 Date d'inscription mercredi 2 novembre 2011 Statut Membre Dernière intervention 26 juin 2012 11
11 nov. 2011 à 13:35

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)

Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 8
11 nov. 2011 à 13:40

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 ?

babane5 Messages postés 99 Date d'inscription mercredi 2 novembre 2011 Statut Membre Dernière intervention 26 juin 2012 11
11 nov. 2011 à 14:02

<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 ?

Réponse 4 / 4

Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 8
11 nov. 2011 à 15:24

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 :)

Discussions similaires

Bouton ON OFF, O ou I ?

Javascript Arrondi à 2 chiffres après la virgule

A3 paysage en deux A4...est-ce possible?

Virus Dr Guard sur mon PC

Brancher 2 tv sur Freebox révolution

Discussions similaires

Newsletters