Assombrir ce qu'il y a autour d'une div

Bonjour à tous,

Je suis confronté à un problème et je ne trouve pas forcément de réponse sur internet.
J'aimerais au click sur un bouton assombrir toute ma page sauf une div qui est celle sur laquelle y'a le bouton.

Et tout ça avec du CSS/JS/jQuery
J'ai un début de fonction ou j'arrive à ternir tout le body mais du coup ça assombris la div aussi... Et quand je met plus loin : $('.container_image').css("opacity", 1), cela ne change rien !

function EditImage(){
  document.body.style.opacity = 0.5;
  $('.container_image').css("border", "3px solid black");
  $('.container_image').css("cursor", "move");
}

Salut !

Et non, on ne peut pas rétablir un opacity comme ca pour un enfant. Ils sont indépendant. Ca permet de mettre body a 0.5 et ton enfant a 0.5 aussi (donc 0.5 de 0.5. Là tu mets ton enfant a 1 de 0.5 ce qui est le comportement par defaut).

La solution la plus simple c'est de jouer avec les z-index et un box-shadow hyper grand autour de ton image. Quelques points de blocages cependant : attention au scroll de la page s'il y en a un, le z-index peut etre compliqué a manier si il y en a déjà d'autres (notamment sur les parents) etc...

Sinon pourquoi ne pas dupliquer l'image au clique pour la mettre en grand par dessus le site en fixed ? Tu tiens absolument à garder l'image dans le contexte de la page ?

Salut Laurent,

merci de ta réponse, oui je vois ce que tu veux dire dans ta première explication.
Et oui il y a bien un scroll au niveau de ma page et déjà des z-index de présent, je vais regarder du coté de box shadow et voir si j'ai la possibilité de faire ce que je veux.

De plus la div est ici placé en haut de page mais elle peut bien sûr se trouver plus bas, être moins grande ou plus grande cela dépendra du choix de l'utilisateur.

Pour répondre à ta dernière question le but de la fonctionnalité que j'essaye de dev c'est que justement l'image reste en place sur la page mais que je puisse la déplacer pour la re-centrer selon besoins. Et ensuite via validation que ce soit la partie de l'image présente dans le parent (une div dans ce cas) qui soit sauvegarder et ensuite visible à l'écran.

J'aimerais faire un peu comme facebook fait par exemple lorsque l'on modifie sa photo de couverture et qu'elle est trop grande, il est possible de choisir quelle partie l'on souhaite garder.

Par ailleurs si tu as des pistes sur comment je pourrais m'y prendre pour faire ça, j'imagine que via draggable de jQuery je vais pouvoir le faire mais la question que je me pose c'est est-il possible de drag un élément children à l'intérieur d'un parent ?

Merci encore de ton aide,
Julien

leUj a écrit :
Pour répondre à ta dernière question le but de la fonctionnalité que j'essaye de dev c'est que justement l'image reste en place sur la page mais que je puisse la déplacer pour la re-centrer selon besoins. Et ensuite via validation que ce soit la partie de l'image présente dans le parent (une div dans ce cas) qui soit sauvegarder et ensuite visible à l'écran.

J'aimerais faire un peu comme facebook fait par exemple lorsque l'on modifie sa photo de couverture et qu'elle est trop grande, il est possible de choisir quelle partie l'on souhaite garder.

Alors de ce que j'en comprends je ne partirais pas sur la mise en évidence de l'image comme tu demande mais plutôt sur une modale / popup qui viendra en plein écran et qui va reprendre l'image cliquée pour la retailler et à la fermeture mettre l'image a jour dans le corp de la page.
Ca sera plus simple je pense...

leUj a écrit :
Par ailleurs si tu as des pistes sur comment je pourrais m'y prendre pour faire ça, j'imagine que via draggable de jQuery je vais pouvoir le faire mais la question que je me pose c'est est-il possible de drag un élément children à l'intérieur d'un parent ?

Non dsl pas de piste pour ca je n'ai jamais fait et je touche tres tres peu JQuery. Peut etre que quelqu'un d'autres pourra te renseigner. et au pire refait un sujet centrer sur ca une fois ce sujet ci résolu.