Remplacer une image par une autre

[Daviloppeur]

Bonjour,

Je voudrais sur une page internet, recharger une image contenu dans un div lors d'un appui sur un bouton.

J'ai donc le code suivant:

Code :

1
2
3
4
5
6
 
<table width="450" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<div id = "onglet"><td><img src="monimage.png" width="450" height="45" border="0" usemap="#Map" /></td></div>
	</tr>
</table>

La fonction javascript AppuiBouton lancé lors de l'appui sur le bouton

Code :

1
2
3
4
5
6
7
8
9
 
function AppuiBouton() {
	var popinimage 	= document.getElementById("newonglet");
	document.getElementById('onglet').innerHTML 			= popinimage.innerHTML;
 
	if ( popinimage.style.display == "none" )
	 	popinimage.style.display = "block";
	else popinimage.style.display = "none";
 }

La nouvelle div qui doit remplacé l'ancienne :

Code :

1
2
3
<div id="newonglet" class="popinong" style="display:none; color:#15498A;">
	<td><img src="image2.jpg" width="450" height="45" border="0" usemap="#Map" /></td>
</div>

et le css correspondant:

Code :

1
2
3
4
 
.popinong {
	display: none !important; 
}

La nouvelle image apparait bien mais au dessous de l'ancienne que je n'arrive pas à enlever (même en décalant la nouvelle avec margin-top), une idée ?

[Ceddoc]

Je n'ai pas creusé plus que ça mais j'ai l'impression que dans ta méthode AppuiBouton il faut que tu rajoute quelque chose qui fait disparaitre l'ancienne image, la tu fais juste apparaitre la nouvelle.

Code Javascript :

1
2
3
4
5
6
7
8
9
10
11
12
function AppuiBouton() {
	var popinimage 	= document.getElementById("newonglet");
	document.getElementById('onglet').innerHTML 			= popinimage.innerHTML;
 
	if ( popinimage.style.display == "none" )
	 	popinimage.style.display = "block";
                document.getElementById("iddonnealapremierediv").style.display = "none";
	else{
 popinimage.style.display = "none";
                document.getElementById("iddonnealapremierediv").style.display = "block";
}
 }

[Daviloppeur]

Merci, suivant ton conseil, j'ai rajouté dans ma fonction:

Code :

1
2
3
4
5
6
7
 
if ( popinimage.style.display == "none" ) {
	 	popinimage.style.display = "block";
	 	document.getElementById('onglet').style.display = "none"; } 
	else { popinimage.style.display = "none";
	 	document.getElementById('onglet').style.display = "block"; 
	 	}

mais la nouvelle image n'apparait plus, seul l'ancienne est visible.

[Ceddoc]

Essaye en donnant un id à la nouvelle et en y accédant avec un getElementById