28172 sujets

CSS et mise en forme, CSS3

2 styles CSS, 2 boutons pour switcher de style, 1 seul bouton visible

Bonjour à tous,

J’ai une galerie en ligne à l’adresse  https://image-nature.net qui dispose d’un thème graphique clair par défaut et propose un thème sombre alternatif via un bouton (demi lune claire-sombre) en page d’accueil.

En fait, il y a 2 boutons pour changer de style, décalés horizontalement : l’un blanc, l’autre noir ; un facteur d’opacité leur conférant la même apparence grise. Or j’aimerais qu’on ait l’impression qu’il n’y a qu’un seule bouton en masquant l’un ou l’autre selon le style défini, les deux boutons s’affichant exactement au même emplacement (collé à droite du bouton copyright) comme s’ils étaient confondus, à la manière de cette démonstration : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

J’ai beau user de la propriété CSS « display:none » et autres subterfuges, rien n’y fait pour arriver au résultat escompté.

Au plaisir de vous lire.
Bonjour,
C'est normal, les "boutons" sont composés comme suit :
<a>
    <img class="switch" data-csstitle="style-2" src="images/bouton-noir-clair-sombre.svg" alt="style 2">
</a>

Or le script n'agit que sur le SVG puisque c'est lui qui comporte la classe "switch" :
document.addEventListener("DOMContentLoaded", function() {
  var switchs = document.getElementsByClassName('switch');
  for (i=0; i<switchs.length; i++) {
    switchs[i].addEventListener("click", function() { setActiveStyleSheet( this.dataset.csstitle ); } );
  }
});

Le lien englobant le tout reste logiquement en place (soit dit en passant le lien ne sert à rien ici).
Il faut donc soit supprimer le lien englobant inutile, soit déplacer la classe sur ce lien.
Meilleure solution
Bonsoir Olivier,

En effet cela venait bien de là. Au départ, je n'avais pas mis le lien d'ancrage <a> englobant l'image mais je perdais la mise en forme héritée de <a>. Du coup je l'ai rajouté et c'est là que ça a coincé. Car au lieu de déplacer la classe au conteneur parent, je me suis perdu dans les sélecteurs en essayant de faire référence à <a> malgré la classe mise au niveau de <img> enfant de <a>.... Puis je suis revenu à l'exemple initial qui fonctionnait partiellement...

Merci pour le coup de pouce Smiley cligne
Sujet clos
Aller à