28112 sujets

CSS et mise en forme, CSS3

[Rollover] Sprite affichant par défaut la 1ère image après clique

Bonjour, bonsoir,

Je suis étudiant en MMi depuis le 3 septembre, et je débute dans ce monde qu'est l'HTML.
Pour un TP, je dois créer un rollover d'un oiseau ayant pour base un sprite de 22 images. Il est demandé que chaque image du sprite mène vers l'image suivante, qui s'affiche aussi lorsque que je passe dessus sans avoir cliqué, et ainsi de suite.
Or, j'ai réussi pour ma première image, mais lorsque je clique pour passer à la 2e, celle par défaut n'est pas la 2e mais la 1ère ! Je ne sais pas du tout à quoi c'est du. Voici la forme de base que j'utilise pour l'XHTML Strict et le CSS :

upload/56227-Sanstitre3.png

Je vous remercie d'avance pour votre aide.
Modifié par Kometa (01 Oct 2014 - 19:54)
Modérateur
Salut salut,

Le "problème" avec le CSS c'est que tu n'as que 2 états plus ou moins "durable" (comparé au active par exemple) :
- normal
- hover

Et tu ne peux pas réécrire les valeurs dans tes classes. Autrement dit tu as comme dans ton code l'état1 et l'état2 et tu peux switcher entre les 2.

Une solution avant d'attaquer par du JS c'est : passer par les animations css. Tu détermines toutes tes étapes de sprites dans l'animation que tu mets sur "play" au hover ou sur "pause" en normal. Par contre pas en "pas à pas" (1 step / clic ou 1 step / hover)... à moins qu'on puisse faire du step by step direct dans le css mais je m'en souviens pas...

J'espère que j'ai été assez clair Smiley sweatdrop sinon je m'y reprendrai !
Modifié par _laurent (02 Oct 2014 - 14:12)
_laurent a écrit :
Salut salut,

Le "problème" avec le CSS c'est que tu n'as que 2 états plus ou moins "durable" (comparé au active par exemple) :
- normal
- hover

Et tu ne peux pas réécrire les valeurs dans tes classes. Autrement dit tu as comme dans ton code l'état1 et l'état2 et tu peux switcher entre les 2.

Une solution avant d'attaquer par du JS c'est : passer par les animations css. Tu détermines toutes tes étapes de sprites dans l'animation que tu mets sur "play" au hover ou sur "pause" en normal. Par contre pas en "pas à pas" (1 step / clic ou 1 step / hover)... à moins qu'on puisse faire du step by step direct dans le css mais je m'en souviens pas...

J'espère que j'ai été assez clair Smiley sweatdrop sinon je m'y reprendrai !


Ca y est, j'ai réussi à me corriger !

Seul problème maintenant : le lien hypertexte de l'image ne me mène plus à la suivante car il n'est plus cliquable :?

HTML de la 1ère page :

<head>
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
</head>

<body>
<span class="editorial"><a href="piaf2.html"></a></span>
</body>

</html>

Qu'est-ce qui ne va pas?
Modifié par Kometa (05 Oct 2014 - 15:53)
Sujet clos
Aller à