28172 sujets

CSS et mise en forme, CSS3

Comment afficher un élément sur une image en cliquant sur une image

Bonjour !

Je me creuse la tête mais j'ai besoin de vous...
Je voulais faire un tuto sur le même fonctionnement que celui là : http://le-cloud.orange.fr/tutoriels/initiation-cloud/inscription-logiciel-Mac

C'est à dire, je clique sur le la pastille Orange et ça affiche / change l'encadrement à droite.
Pouvez-vous me dire quelle est la technique utilisée afin que je puisse chercher comment faire ? J'ai du mal à comprendre le code car je ne maîtrise pas le jquery / javascript
Merci !!
Bonne journée !!

PS : je développe mon site en html avec Boostrap 3
Salut,

Je sais pas de quel "click" tu parle, car moi il faut que je survole la pastille pour voir le changement de l'encadrer.

Tu peux le faire avec un simple mouseover + mouseout et un sprite.

En gros, tu peux faire une sprite (une déclinaison d'images si tu préfère) une longueur de 200 pixels(je dis 200 au pif hein!), imaginons que les 100 premiers pixels correspond à une image avec un encadré orange, les 100 pixels suivant corresponde à la même image mais avec l'encadrer noir.

Tu affiche en premier les 100 premiers pixels via une div avec une largeur de 100 et un overflow hidden.

Ensuite, sur la pastille de ton choix (ou un autre élément) tu fait un mouseover et mousout qui va "décaler" l'image de 100 pixels sur la gauche. le principe d'un sprite quoi Smiley smile

petit exemple ici en js pure
et le même exemple ici en Jquery , il suffit de survoler la pastille rouge.


et comme je suis de bonne humeur (et gentil Smiley smile ) voici un exemple avec .click et avec deux images (au lieu d'un sprite) ici par contre uniquement en Jquery pour celui ci car en js pure j'ai la flemme.
Modifié par JENCAL (05 Sep 2016 - 18:12)
Merci bcp pour ta réponse complète et ton travail ! Je vais regarder et essayer !
Bonne journée !
Marine
Bonjour JenCal,

J'ai essayé de reproduire ton code en appliquant à mon exemple : http://yesyouweb.com/Tuto2/
J'ai opté pour le Javascript mais je galère... Le sprite ne se met pas au dessus de mon image, il est au dessus. Quand tu passes la souris sur la pastille rouge, il se passe bien un truc mais c'est pas ce que tu as réussi à faire toi (j'ai essayé avec ton sprite aussi)

Seras-tu encore assez gentil pour m'aider ? Smiley confused
Merci et bonne soirée !
Marine
Sujet clos
Aller à