Problème innerHTML = " "

Résolu/Fermé

pilooFR Messages postés 20 Date d'inscription samedi 5 mai 2012 Statut Membre Dernière intervention 19 avril 2015 - 17 avril 2015 à 23:50
pilooFR Messages postés 20 Date d'inscription samedi 5 mai 2012 Statut Membre Dernière intervention 19 avril 2015 - 19 avril 2015 à 11:57

Bonjour,

J'ai un petit soucis que je n'arrive décidément pas à résoudre, c'est pourquoi je m'adresse à vous.
Pour faire une galerie photo sur mon site, je souhaiterai après que le visiteur ait cliqué sur l'image en miniature et que celle-ci se soit agrandit avec un background en fond noir, que lorsque l'on clique sur ce fond, l'image ainsi que le background disparaissent.
Pour cela je fais un onclick() sur mon fond noir qui renvoit à une fonction remove qui doit supprimer le contenu de ma div 'container' qui contient ma photo et mon background. Avec cette ligne de code :
document.getElementById('container').innerHTML = "";
Seulement ça ne supprime que le background. Sauriez vous quel est le problème ? Et comment le résoudre ?
Un petit lien pour illustrer mon problème.
https://jsfiddle.net/eoqa5sja/1/

Cordialement,

pilooFR

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 18/04/2015 à 00:52

Salut
essaie ca

<div id='blackBg' onclick='remove()'>click on me
<div id='carre'></div>
</div>

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

pilooFR Messages postés 20 Date d'inscription samedi 5 mai 2012 Statut Membre Dernière intervention 19 avril 2015
18 avril 2015 à 10:15

Déjà merci de la réponse :)
J'y avais déjà penser. Mais ya deux problèmes à ce truc c'est que :
- Comme je mets un opacity de 0.7 sur mon fond noir il s'appliquera aussi à ma photo (ce que je ne veux pas).
- Et le problème n°2 c'est que je veux que lorsque l'on clique précisément sur l'image cela appelle une autre fonction qui passera à la photo suivante. Et pas que le fond et la photo disparaissent.
Test jsfiddle : https://jsfiddle.net/eoqa5sja/8/

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
18 avril 2015 à 13:16

Pourquoi ne pas utiliser un plugin de diaporama en jquery
ex : https://css-tricks.com/anythingslider-jquery-plugin/

pilooFR Messages postés 20 Date d'inscription samedi 5 mai 2012 Statut Membre Dernière intervention 19 avril 2015
18 avril 2015 à 14:54

Parce que je n'en ai trouvé aucun qui me convenait réellement. Et puis je pense que c'est en faisant soit même que l'on apprend. :)

Utilisateur anonyme
Modifié par lobotoFix le 18/04/2015 à 16:04

Salut,

tu peux mettre un background-color avec un opacité sans que l'image devienne transparente. Il faut utiliser la notation rgba ou le a (alpha) est l'opacité.
https://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

Tu peux essayer de créer des noeuds et de les suprimer.

https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641#ui-id-3

pilooFR Messages postés 20 Date d'inscription samedi 5 mai 2012 Statut Membre Dernière intervention 19 avril 2015 > Utilisateur anonyme
18 avril 2015 à 23:44

Merci pour le conseil du

background-color: rgba(,,,);

Pour le reste je vais y jeter un coup d'oeil. :)
Je t'en reparle si j'ai un soucis.

Discussions similaires

Syntaxe PHP dans Javascript avec innerhtml

problème d'actualisation avec innerHTML

javascript innerHTML plusieurs espaces

Afficher les éléments d'un tableau avec innerHTML