Disparition d'image

Résolu/Fermé
Signaler
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
-
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
-
Salut à tous,
J'ai une question: existe t il y code html qui permet de faire disparaître une image lorsque on clique dessus

Merci d'avance

8 réponses

Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
Bonsoir,non c est du javascript
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
Voici votre image s'appelle image.jpg
on lui attribue un identifiant : remove_img

voici le code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>

	</head>
	<body>
		<img src="image.jpg" alt="mon_image" id="remove_img"/>
		<script type="text/javascript">
			var img = document.getElementById("remove_img");
			img.onclick = function() {
				img.parentNode.removeChild(img);
			}
		</script>
	</body>

</html>

Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
5
Merci beaucoup votre code fonctionne mais il fait apparaître l'image en haut à gauche comment faire pour qu'elle apparaisse ou je veux ???

J'ai essayé de la mettre dans une div mais le code s'applique à l'image en haut à gauche

Un très grand merci d'avance
Messages postés
273
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
6 décembre 2012
86
Il faut jouer avec le css (design) après !
Essaye ceci déjà :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
		<style type="text/css">
		#remove_img
		{
			margin: auto;
		}
		</style>
	</head>
	<body>
		<img src="image.jpg" alt="mon_image" id="remove_img"/>
		<script type="text/javascript">
			var img = document.getElementById("remove_img");
			img.onclick = function() {
				img.parentNode.removeChild(img);
			}
		</script>
	</body>

</html>
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
Re
Content que mon code fonctionne
Comme a dit Blunderer tout se passe dans css
Avec le bout de code que blunbderer ta donné ton image sera centrer
Si tu souhaite la positionner autrement
il existe :
position: relative;

ensuite tu te sert de bottom, top, right, left en français bas, haut, droite , guauche
et tu leur applique une valeur en pixels
Voici un exemple de code ou l'image qui se trouve d'origine en haut à gauche sera 527 pixels plus bas et 326 pixels plus à droite ( ces valeurs sont juste des exemples)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
	<style type="text/css">
		#remove_img
		{
			position: relative;
			top: 527px;
			left: 326px;
		}
	</style>
	</head>
	<body>
		<img src="image.jpg" alt="mon_image" id="remove_img"/>
		<script type="text/javascript">
			var img = document.getElementById("remove_img");
			img.onclick = function() {
				img.parentNode.removeChild(img);
			}
		</script>
	</body>

</html>

Messages postés
273
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
6 décembre 2012
86
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
5
Je vous remerci infiniment, vos codes m'ont été très utile mais pour la position de l'image je viens de trouver une solution plus simple pour moi une balise div

Voici le code:

<div id="apDiv3">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>

	</head>
	<body>
		<img src="1.png" alt="mon_image" id="remove_img"/>
		<script type="text/javascript">
			var img = document.getElementById("remove_img");
			img.onclick = function() {
				img.parentNode.removeChild(img);
			}
		</script>
	</body>

</html>

</div>


Encore merci !!!
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
hummmmm
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
5
Quelque chose ne vas pas ???
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
Ben on ne met pas un div a cette endroit, ils doivent se trouver entre les balises
<body></body>



"Un homme azerty en vaut deux"
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
5
Voici le code entier et ca marche

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">

#apDiv3 {
	position:absolute;
	left:275px;
	top:306px;
	width:3222px;
	height:2497px;
	z-index:1;
}
</style>
</head>
<div id="apDiv3">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>

	</head>
	<body>
		<img src="1.png" alt="mon_image" width="171" height="141" id="remove_img"/>
		<script type="text/javascript">
			var img = document.getElementById("remove_img");
			img.onclick = function() {
				img.parentNode.removeChild(img);
			}
		</script>
</body>

</html>

</div>
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
désoler mais votre code contient 8 erreurs et un avertissement
je l'ai passer au validateur w3c
http://validator.w3.org/
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Document sans nom</title>  
<style type="text/css">  

#remove_img {  
 position:absolute;  
 left:275px;  
 top:306px;  

}  
</style>  
</head>  


 <body>  
  <img src="1.png" alt="mon_image" width="171" height="141" id="remove_img"/>  
  <script type="text/javascript">  
   var img = document.getElementById("remove_img");  
   img.onclick = function() {  
    img.parentNode.removeChild(img);  
   }  
  </script>  
</body>  

</html>  


Voila qui est mieux

"Un homme azerty en vaut deux"
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
5
oui mais ca complique les choses, il faut des valeur !!!
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
5
La technique div (quand elle est bien placé) est plus simple !!! Non ??? Quel est votre avis ???
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
206
si elle se trouve entre les body pourquoi pas
Messages postés
221
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
21 août 2014
5
Oui, c'est juste que je ne suis qu'un débutant !!!
Encore merci pour vos conseils :)