Modifier un code Spoiler

Kilou1984 Messages postés 152 Date d'inscription   Statut Membre Dernière intervention   -  
 Kilou1984 -
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 152 Date d'inscription   Statut Membre Dernière intervention   8
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
 
C'est incompréhensible et ne me faites pas croire le contraire, sinon, c'est condescendant.
0