Discussion :

[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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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