Disparition d'image

Résolu/Fermé

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 - 1 nov. 2012 à 15:46
floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 - 2 nov. 2012 à 18:24

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

A voir également:

Disparition d'image
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Image iso windows 10 - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama
Comment agrandir une image - Guide

8 réponses

Réponse 1 / 8

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
1 nov. 2012 à 22:20

Bonsoir,non c est du javascript

Réponse 2 / 8

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
1 nov. 2012 à 22:31

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>

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 4
Modifié par floflo55 le 2/11/2012 à 09:35

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

Blunderer Messages postés 273 Date d'inscription mardi 17 juillet 2012 Statut Membre Dernière intervention 6 décembre 2012 83
2 nov. 2012 à 15:13

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>

Réponse 3 / 8

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
2 nov. 2012 à 16:22

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>

Réponse 4 / 8

Blunderer Messages postés 273 Date d'inscription mardi 17 juillet 2012 Statut Membre Dernière intervention 6 décembre 2012 83
2 nov. 2012 à 16:31

Apprendre css : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#part_13663

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 4
2 nov. 2012 à 16:44

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 !!!

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
2 nov. 2012 à 16:51

hummmmm

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 4
2 nov. 2012 à 16:57

Quelque chose ne vas pas ???

Réponse 6 / 8

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
Modifié par @lobotomix:~# rm -rf * le 2/11/2012 à 16:58

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"

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 4
2 nov. 2012 à 17:03

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>

Réponse 7 / 8

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
2 nov. 2012 à 17:07

désoler mais votre code contient 8 erreurs et un avertissement
je l'ai passer au validateur w3c
http://validator.w3.org/

Réponse 8 / 8

<!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"

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 4
2 nov. 2012 à 17:17

oui mais ca complique les choses, il faut des valeur !!!

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 4
2 nov. 2012 à 18:16

La technique div (quand elle est bien placé) est plus simple !!! Non ??? Quel est votre avis ???

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
2 nov. 2012 à 18:22

si elle se trouve entre les body pourquoi pas

floflo55 Messages postés 221 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 21 août 2014 4
2 nov. 2012 à 18:24

Oui, c'est juste que je ne suis qu'un débutant !!!
Encore merci pour vos conseils :)

Discussions similaires