Modifier un code Spoiler

Fermé

Kilou1984 Messages postés 143 Date d'inscription samedi 2 mars 2013 Statut Membre Dernière intervention 5 décembre 2023 - 29 mars 2018 à 14:55
Kilou1984 - 7 juin 2018 à 18:13

Bonsoir,

J'aimerai modifier ce code "spoiler" en HTML pour que :
- Faire en sorte que les internautes n'aient pas besoin de cliquer dessus, et que, ça s'affiche et ça s'enlève juste en passant la sourie dessus.
- Si possible, j'aimerai crée plusieurs blocs comme ça, les uns à côté les autres, sans retour à la ligne, mais comme c'est une "div" ça mettra les blocs les uns en dessous des autres. Est-ce possible d'y remédier aussi ?

<!-- DéBUT DE MENU SPOILER -->
<font color = "#000000"><div style="margin: 0px 0px 0px;">
<input value="" style="border: 1px; padding: 0px; width: 110px; font-size: 20px;
background-image: url(IMAGE-1); background-position: center center; background-repeat: no-repeat;"
 onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = '';
this.style.backgroundImage = 'url(IMAGE-CACHER)'; } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.style.backgroundImage = 'url(IMAGE-1)'; }" type="button"></div><div class="quotecontent"><div style="display: none;">


<!-- DÉBUT DU CONTENU CACHÉ -->

<!-- FIN DU CONTENU CACHÉ -->

</div></div></font>
<!-- FIN DE MENU SPOILER  -->

Merci d'avance pour vos réponses.

A voir également:

Modifier un code Spoiler
Comment modifier un pdf - Guide
Modifier liste déroulante excel - Guide
Code asci - Guide
Modifier code pin - Guide
Code puk bloqué - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
29 mars 2018 à 16:31

Bonjour,

AU survol = Hover = onmouseover
https://www.w3schools.com/jsref/event_onmouseover.asp

Div alignées : CSS inline-block
https://fr.learnlayout.com/inline-block.html

Kilou1984 Messages postés 143 Date d'inscription samedi 2 mars 2013 Statut Membre Dernière intervention 5 décembre 2023 8
Modifié le 2 avril 2018 à 14:38

Bonjour,
Merci mais concrètement, je ne sais pas où et comment mettre les codes Hover et inline-block dans les codes que j'ai mis.

Cordialement

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
2 avril 2018 à 15:06

Déjà... il faudrait commencer par placer tes nombreux "styles" dans un fichier CSS que tu incluras dans ta page au lieu de les écrire dans l'attribut style de ton élément.
Et pour le Javascript... place le dans une fonction que tu placeras dans des balises SCRIPT sur ta page (ou mieux.. dans un fichier .js )
Ensuite... les exemples fournis dans les liens que je t'ai donné devraient être suffisamment clairs pour que je n'ai pas à te les expliquer....
Qu'as tu essayé d'en faire ??
Sachant que tu as déjà, dans ton JS, du display 'none' ... il est facile de deviner où tu dois mettre le display 'inline-block' non ?

Kilou1984
Modifié le 7 juin 2018 à 18:17

C'est incompréhensible et ne me faites pas croire le contraire, sinon, c'est condescendant.

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...

Discussions similaires

Newsletters