Discussion :

[Death83]

Saalut a tous,

j'ai une balise <img src="adresse"> et je souhaiterais pouvoir changer l'adresse de l'image en javascript. C'est possible?

[Mr N.]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

element.src = "new_image.gif";

il faut au préalable identifier l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="the_image" ...

Et ensuite

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

element = document.getElementById('the_image');

Y a plus qu'à remettre dans l'ordre

[Death83]

Ok merci je vais essayer ca.

[Death83]

J'ai essayer avec ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
echo'
							<img src="'.$imagemanga[$i].'" alt="" onMouseOver="this.style.cursor=\'pointer\'; document.getElementById(\'imagemanga\').src=\"'.$imagemanga[$i].'\"; " width="80" style="margin-right:27px;">
 
						';

et l'image a modifier:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id="imagemanga"  height="280" src="../fichiermanganime.0/critiquemanga/alice19th/Tome4/CouvAliceT4vignette.jpg" alt="">

mais ca ne marche pas .

Savez vous pourquoi?

[dasdeb]

C'est pas une histoire d'url absolue ?
Essaye en mettant l'adresse complète de ton adresse ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="imagemanga"  height="280" src="http://manganime.0.free.fr/fichiermanganime.0/critiquemanga/alice19th/Tome4/CouvAliceT4vignette.jpg" alt="">...

Faudra aussi modifier ton code js pour qu'il donne l'adresse complète.

[Death83]

J'aiessayer les deux mais ca ne mrche pas.

EN fait il aime pas le document.src et je sais pas pourquoi

[Mr N.]

montre nous les parties pertinentes de ton code généré

[Death83]

Voici le bloc concerné:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div style="width:300px; height:280px; border-style: ridge; border-width:1px;float:left; margin-left:30px; margin-right: 30px; padding:10px;background-color:#000000" align="center" >
					<img id="imagemanga"  height="280" src="../fichiermanganime.0/critiquemanga/alice19th/Tome4/CouvAliceT4vignette.jpg" alt="">
				</div>
				<div align="left" style="float:left; max-width: 270px; ">
				<?
					$nbimagesmanga=4;
					for($i=1;$i<$nbimagesmanga+1;$i++)
					{
						echo'
							<img src="'.$imagemanga[$i].'" alt="" onMouseOver="this.style.cursor=\'pointer\'; element=document.getElementById(\'imagemanga\'); element.src = \"../fichiermanganime.0/critiquemanga/alice19th/Tome1/Alicedessin1vignette.jpg\";  " width="80" style="margin-right:27px;">
 
						';
 
				?>
				</div>

[Mr N.]

Pour moi ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for($i=1;$i<$nbimagesmanga+1;$i++)
               {
                  echo' .......

n'est ni du html, ni du javascript. On est dans le forum javascript or le javascript s'execute côté client. Alors montre nous le code qui est généré, autrement dit le code qui est reçu par le navigateur ("view page source") afin qu'on puisse t'aider rapidement

[Death83]

le code coté client ca donne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="width:300px; height:280px; border-style: ridge; border-width:1px;float:left; margin-left:30px; margin-right: 30px; padding:10px;background-color:#000000" align="center" >
					<img id="imagemanga"  height="280" src="../fichiermanganime.0/critiquemanga/alice19th/Tome4/CouvAliceT4vignette.jpg" alt="">
				</div>
 
				<div align="left" style="float:left; max-width: 270px; ">
 
							<img src="../fichiermanganime.0/critiquemanga/XXXholic/Tome4/covervignette.jpg" alt="" onMouseOver="this.style.cursor='pointer'; element=document.getElementById('imagemanga'); element.src = \"\;   width="80" style="margin-right:27px;">
 
 
							<img src="../fichiermanganime.0/critiquemanga/alice19th/Tome1/Alicebackvignette.jpg" alt="" onMouseOver="this.style.cursor='pointer'; element=document.getElementById('imagemanga'); element.src = \"\;   width="80" style="margin-right:27px;">
 
 
							<img src="../fichiermanganime.0/critiquemanga/alice19th/Tome1/Alicedessin1vignette.jpg" alt="" onMouseOver="this.style.cursor='pointer'; element=document.getElementById('imagemanga'); element.src = \"\;   width="80" style="margin-right:27px;">
 
 
							<img src="../fichiermanganime.0/critiquemanga/alice19th/Tome1/Alicedessin2vignette.jpg" alt="" onMouseOver="this.style.cursor='pointer'; element=document.getElementById('imagemanga'); element.src = \"\;   width="80" style="margin-right:27px;">
 
										</div>

(j'ai enlever les adresse des document.src pour que ca prenne moin de place mais ca fais pareil quand elle y sont

[Death83]

Arf je viens de voir que les \ foute le bordel dans mon code executé.

[Death83]

comment on l'utilise? Je sais pas faire lol.

[Mr N.]

désolé j'ai supprimé mon post. fausse manip.

[Mr N.]

Je disais donc que si tu utilisais la console javascript de Firefox tu aurais vu tes erreurs tout de suite. Pour acceder à la console Tools>javascript console. Je te laisse le soin de traduire.

[Death83]

J'ai esayer en elvent les antislah mais ca ne marche pas nom plus il interprete le " comme étant la fin du onMousOver

[Mr N.]

Dans ton code php, fais plutot

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

...element.src = \'../fichiermanganime.0/critiquemanga/alice19th/Tome1/Alicedessin1vignette.jpg\';...

(simple quote)

[Death83]

merci camache .

[Mr N.]

Pense au tag [resolu] (le petit bouton en bas à gauche de ton fil de discussion)

[Death83]

Juste un dernier petit truc.

On peu faire:

element.height="100" et element.width="100"?

[SpaceFrog]

si tu rajoute style ... oui !