Disparition d'image
Résolu
floflo55
Messages postés
221
Date d'inscription
Statut
Membre
Dernière intervention
-
floflo55 Messages postés 221 Date d'inscription Statut Membre Dernière intervention -
floflo55 Messages postés 221 Date d'inscription Statut Membre Dernière intervention -
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
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
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
8 réponses
Voici votre image s'appelle image.jpg
on lui attribue un identifiant : remove_img
voici le code
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>
Il faut jouer avec le css (design) après !
Essaye ceci déjà :
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>
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 :
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)
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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:
Encore merci !!!
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 !!!
Ben on ne met pas un div a cette endroit, ils doivent se trouver entre les balises
"Un homme azerty en vaut deux"
<body></body>
"Un homme azerty en vaut deux"
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>
désoler mais votre code contient 8 erreurs et un avertissement
je l'ai passer au validateur w3c
http://validator.w3.org/
je l'ai passer au validateur w3c
http://validator.w3.org/
<!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"