Css pour afficher/masquer éléments html sur clic bouton

Bonjour,
On me demande de réaliser une animation très simple qui fonctionnerait sur une tablette en mode kiosque (je ne parle pas d'une appli à télécharger : une seule tablette dans une exposition).

Une image de fond (back_img). Des boutons.
Le clic sur Bouton1 fait apparaître image (img1) par dessus la précédente. Lorsqu'on relâche Bouton 1, Img 1 disparaît.
Clic sur un autre Bouton 2 affiche img2 etc…

J'ai trouvé quelques tutos qui expliquent l'utilisation avec CSS et JS.

1. Est-ce que ça peut fonctionner en CSS seul ou JS est nécessaire ?
2. Comment sur une tablette gérer si le bouton est "pressé" ou relâché ?

Merci.

jlba a écrit :

1. Est-ce que ça peut fonctionner en CSS seul ou JS est nécessaire ?
2. Comment sur une tablette gérer si le bouton est "pressé" ou relâché ?

Et l'eau,

1. à priori, le js est requis (mousedown / mouseup)
2. je t'avoue ne pas avoir essayé ce type d'event sur mobile/ tablette. Mais je suppose que ça devrait fonctionner. Sinon, regarde de ce côté là : touch
Modifié par niuxe (09 Mar 2020 - 23:24)

Bonjour,
si c'est une tablette, ce n'est sans doute pas un clic de souris, mais un toucher au doigt. En lieu et place d'un bouton, une image qui, au toucher, ferait apparaître une autre image pardessus la première te conviendrait-elle ? Si oui, j'ai ça sur un site, ça fonctionne sans js. Et ça n'empêche pas de mettre en plus une image de fond. Et on peut utiliser transition: opacity .5s ease-in-out; pour rendre le changement doux. Chez moi, ce n'est que sur les résolutions desktop (et souris) que c'est actif, mais ça devrait aussi fonctionner au toucher.
Je n'ai plus la référence du site où j'ai pris ça. Si tu ne t'en sort pas, je te donnerai le code.

Merci à tous.
@Bongota :
- j'ai besoin qu'un clic sur un bouton (une image) visibility:visible une div ailleurs sur la page (une autre image).
- et qu'au relâchement du bouton, visibility:hidden.
- ceci sur une tablette.

Ça fonctionne sur un ordi avec un <input type="button">, un <button> ou un <input type="image">.

Reste à tester sur une tablette.

jlba a écrit :

....
- et qu'au relâchement du bouton, visibility:hidden.

Oui, c'est mieux si tu as la place. Tu auras un meilleur contrôle dessus. ( _get_properties() )

jlba a écrit :

- ceci sur une tablette.

as tu un code à éditer sur le forum ? Peux tu nous le présenter ?

jlba a écrit :

Ça fonctionne sur un ordi avec un <input type="button">, un <button> ou un <input type="image">.

À vrai dire et à priori, toutes balises seront acceptés. Cependant, tu indiques un <input type="image">. Il est bon de savoir que cet élément là, aura un comportement par défaut d'un <input type="submit">. Si tu veux une image comme base, autant faire ceci (<button>) :

<button><img></button>

niuxe a écrit :


Oui, c'est mieux si tu as la place. Tu auras un meilleur contrôle dessus. ( _get_properties() )

Qu'est-ce que tu veux dire ?

a écrit :

as tu un code à éditer sur le forum ? Peux tu nous le présenter ?

Je ferai ça volontiers mais les choses évoluent un peu. Au lieu d'une tablette, ce sera probablement un écran tactile 15 ou 17" avec un raspbery derrière par exemple. Et peut-être que j'irai sur le bon forum

jlba a écrit :

Qu'est-ce que tu veux dire ?

Avec un display none, il y a de forte chances que tu ne récupères pas certaines propriétés.

jlba a écrit :

Je ferai ça volontiers mais les choses évoluent un peu. Au lieu d'une tablette, ce sera probablement un écran tactile 15 ou 17" avec un raspbery derrière par exemple. Et peut-être que j'irai sur le bon forum

une tablette est un écran tactile