Sujet Précédent Sujet Suivant

Modifier un code Spoiler

Fermé
Kilou1984 Messages postés 153 Date d'inscription samedi 2 mars 2013 Statut Membre Dernière intervention 11 juin 2024 - 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:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
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

0
Kilou1984 Messages postés 153 Date d'inscription samedi 2 mars 2013 Statut Membre Dernière intervention 11 juin 2024 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
0
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
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 ?
0
Kilou1984
Modifié le 7 juin 2018 à 18:17
C'est incompréhensible et ne me faites pas croire le contraire, sinon, c'est condescendant.
0