Problème script simple: changer d'image lors d'un clic

Sujet résolu

30 juin 2010 à 17:28:28

Bonjour, je début en javascript et j'ai un problème.
J'ai une page ou s'affiche une image, si on clique dessus je veux qu'elle s'agrandisse, si on reclique elle retrecisse.
J'ai donc 2images, une petite, une plus grande.

Voici ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Acueil</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
		<link rel="icon" href="ressources/images/42.ico" type="image/ico">
		
		<script type="text/javascript">
			<!--
			function changeImage()
			{
				var image = document.getElementsByTagName("img")[0];
				var src1 = "ressources/images/simpson.jpeg";
				var src2 = "ressources/images/simpson2.jpeg";
				
				if(image.src == src2)
				{
					image.src = src1;
				}
				else
				{
					image.src = src2;
				}
			}
			//-->
		</script>
	</head>
    <body>
	
		<?php 
			include("banniere.php");
			include("menu.php");
		?>
		
		<div class="corps">

			<p>
				<img src="ressources/images/simpson.jpeg" alt="simpson" onclick="changeImage();" />
			</p>			
			
		</div>
		
    </body>
</html>

Mon problème est que la fonction va toujours dans le else, la comparaison entre les 2 chaines n'a pas l'air de marcher.
Si vous voulez voir ce que sa donne:http://42progs.heb3.org/testJS.php

LCaba

30 juin 2010 à 17:47:00

Salut,
fais un alert(image.src) tu verras que alert.src est l'adresse absolue vers ton image, meme si l'attribut src est en relatif.
Et c'est pas une bonne méthode. Utilise plutot un booleen.

Cabinet vétérinaire à Angers

harfangeek

30 juin 2010 à 17:50:20

Oui j'ai tout d'abord pensé a un booléen mais je ne vois pas comment faire sans variable globale.

LCaba

30 juin 2010 à 17:51:57

Y a pas de mal à utiliser une variable globale pour ça. C'est plus propre que d'utiliser des test douteux :-°

Cabinet vétérinaire à Angers

harfangeek

30 juin 2010 à 17:54:37

Ouai je vais faire sa, merci de ton aide.

LCaba

30 juin 2010 à 17:59:06

Et je préchargerais l'autre image dans un objet image.

Cabinet vétérinaire à Angers

waye

19 juillet 2010 à 17:59:57

bonsoir LCaba est ce que vous pourriez donner la solution directement g le mme probleme seulement je ne suis pas trés calé en javascript

LCaba

19 juillet 2010 à 19:11:55

Tu veux faire quoi ?

Cabinet vétérinaire à Angers

waye

20 juillet 2010 à 11:54:13

Bonjour je souhaiterais afficher ou masquer une partie de la page grace a 2 images + -.
g réussi dejà à afficher / masquer. Seulement je parviens pas à changer l'image. g tester le script mais sa marche pas!!

<script type="text/javascript">
<!--
function changeImage()
{
monimage.src = (monimage.src=="image1.gif" ) ? "image1.gif" : "image2.gif";
}
</script>

LCaba

20 juillet 2010 à 12:15:33

C normal, car monimage.src ne vaut pas 'image1.gif' mais 'http://tonsite.com/dossier/image1.gif';

Le mieux et de faire avec un booléen :

var bIndic = true;
function changeImage(){
  bIndic = !bIndic;
  monimage.src = bIndic ? 'image1.gif' : 'image2.gif';
}

Cabinet vétérinaire à Angers

waye

20 juillet 2010 à 12:46:15

je viens de lestez mais sa ne marche
sur le body :
je viens de lestez mais sa ne marche
sur le body :
<a>
<img align="left" border="0" src="devplus.gif" onclick="changeImage(this)"/>
</a>

LCaba

20 juillet 2010 à 13:01:44

function changeImage(monimage){

Cabinet vétérinaire à Angers

waye

20 juillet 2010 à 13:07:14

great thanks!!!!
merci à la prochaine si vous le voulez bien
bonne journée