Rechercher : dans
Par :

Changement image OnClick javascript

Dernière réponse le 4 jan 2009 à 20:01:53 Daken, le 4 jan 2009 à 17:07:01 
 Signaler ce message aux modérateurs

Bonjour,

J'essaie de réaliser un programme en PHP/javascript (je suis totalement débutant en javascript) tel que, j'ai une image seule suivie d'un tableau d'image, et lorsque je clique sur l'une des images dans mon tableau je souhaiterai que l'image de tête change pour devenir l'image cliquée.

Malheureusement, lorsque je clique sur une image, rien ne se passe...

Voilà mon code Javascript :


<script language="javascript">

function ChangeImage(Content)
{
window.top.document.getElementById("choix_img").src = "img/editeur/jour/"Content".gif";
}

</script>


Et le code PHP :


echo "<img src='img/editeur/jour/noir.gif' name='choix_img' id='choix_img'><br><br><table border='1'>";

for($i=1;$i<=302;$i++)
{
echo "<tr><td><img src='img/editeur/jour/".$i.".gif' onClick:\"ChangeImage('".$i."')\"></td></tr>";
}

echo "</table><br><br>";


Merci d'avance pour votre aide !

Configuration: Windows XP
Firefox 3.0.5

Meilleures réponses pour « Changement image OnClick javascript » dans :
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Gnome - changer rapidement de fond d'écran VoirChanger rapidement de fond d'écran Vous l'avez peut être remarqué : pour changer le fond d'écran de Nautilus, vous devez ouvrir l'image avec le visionneur, puis faire "image > définir comme papier peint". Ce n'est, ni très pratique, ni très...
Réajuster les dimensions d'une image, en pixels VoirOn peut avoir besoin de réajuster une image, selon un nombre précis de pixels. Cette astuce vous apprendra à utiliser le logiciel Paint.NET pour réaliser cette manipulation. Après l'installation du logiciel, et après avoir ouvert celui-ci,...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...

1

Marco la baraque, le 4 jan 2009 à 17:18:43

Bonjour Daken,
En javascript, l'opérateur de concaténation de chaînes est +
Dans un premier temps, essaie avec "img/editeur/jour/" + Content + ".gif"; , et tiens nous au courant.

Cordialement, rtfm and jfgi
Simple "merci" makes helping people happy :)

Répondre à Marco la baraque

2

Daken, le 4 jan 2009 à 17:34:02

Merci beaucoup de ta réponse.

J'ai modifié ma fonction javascript qui me donne désormais :

<script language="javascript">

function ChangeImage(Content)
{
window.top.document.getElementById("choix_img").src = "img/editeur/jour/"+Content+".gif";
}

</script>


Malheureusement, je n'ai toujours aucune réaction quand je clique sur une image.

Répondre à Daken

3

Marco la baraque, le 4 jan 2009 à 19:23:07
  • +2

Salut Daken,
Je t'ai fait un petit exemple. Tu peux t'en inspirer pour voir où se situe ton problème.

<html>
	<head>
		<title>Test CCM</title>
		<script language="javascript">

		function ChangeImage(url) {
			document.getElementById("img").src = url;
		}

		</script> 
	</head>
	<body>
		<img id="img" src="http://www.nintendo-master.com/zone_membres/image/logo01.jpg"/>
		<table>
			<tr>
				<td><img onClick="ChangeImage(this.src);" src="http://www.nintendo-master.com/zone_membres/image/logo25.jpg"/></td>
				<td><img onClick="ChangeImage(this.src);" src="http://forum.ubuntu-fr.org/img/avatars/32704.jpg"/></td>
			</tr>
		</table>
	</body>
</html>


La différence ici est que j'utilise des url absolues alors que toi tu en auras des relatives (mais cela ne change absolument rien : une fois que tu auras chargé ton tableau avec des images grâce à un chemin relatif, le passage de this.src se fera avec ces adresses et ça va fonctionner).

Cordialement, rtfm and jfgi
Simple "merci" makes helping people happy :)

Répondre à Marco la baraque

4

 Daken, le 4 jan 2009 à 20:01:53

Ca fonctionne à la perfection !

Merci infiniment pour ton aide !

Répondre à Daken