[RESOLU] Jeu de carte

Petit nouveau ! | 1 Messages

09 avr. 2013, 10:43

Bonjour à tous,

Bon voilà, excusez-moi tout d'abord si je ne suis pas dans la bonne section, ou bien si un sujet existe déjà, mais je n'ai rien trouvé avec Rechercher.
Voilà je bosse en ce moment sur un jeu de tarot, il faut que je retourne la carte quand on clique dessus.
Bon pour la première étape je ne m’intéresse qu'à changer l'image en gros (sans donner l'effet de retournement).

Voilà le code que j'ai pour le moment :
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
		<title>Spirit Guidance</title>
	</head>
	<link rel="stylesheet" href="style.css" type="text/css" />
	
	<script>
		function changerImage(){
			document.card1.src = 'C:\Users\...\Card_1.png';
		}
	</script>
	
	<div id="menu">
		<a id="carte1" onclick="changerImage()" /><img class="card1" name="card1" src="C:\Users\...\Card_0_Back.png" ></a>
		<a id="carte2" onclick="changerImage()" /><img class="card2" name="card2" src="C:\Users\...\Card_0_Back.png" ></a>
		<a id="carte3" onclick="changerImage()" /><img class="card3" name="card3" src="C:\Users\...\Card_0_Back.png" ></a>
		<a id="carte4" onclick="changerImage()" /><img class="card4" name="card4" src="C:\Users\...\Card_0_Back.png" ></a>
		<a id="carte5" onclick="changerImage()" /><img class="card5" name="card5" src="C:\Users\...\Card_0_Back.png" ></a>
	</div>
		
	<div id="droite">
		<iframe id="iframe" width="700" height="450" frameborder="0"></iframe>
	</div>
</html>

Petit nouveau ! | 8 Messages

23 avr. 2013, 13:57

Salut Nightshed,

Essaie en CSS avec l'hover ou click dépendant de l'évènement déclencheur que tu préfères le plus, cependant faudra une image qui égale exactement la dimension de la carte qui sera vide (transparente) .png, à travers cette dernière passera les deux images (l'initiale et la nouvelle).

ViPHP
AB
ViPHP | 5818 Messages

23 avr. 2013, 19:27

Je ferais un truc dans le genre :
[javascript]<script type="text/javascript">
function changerImage(id)
{
document.getElementById(id).src="Images/"+id+"_on.png";
}
</script>

<a onclick="changerImage('card1')" /><img id="card1" src="Images/card1_back.png" ></a>[/javascript]

Mais bon tu auras certainement beaucoup de javascript à faire et l'emploi d'une lib comme jquery te faciliteras grandement la tâche