Dans ma grande quète du 0% javascript j’ai dans l’idee de faire du rollover pour mes menus (des images) avec du css.
J’ai lu plein de site qui expliquent comment et j’ai implanté les différentes possibilites.
Sous IE ca marche bien, mais sous firefox j’ai un probleme.
Bon alors on va definir le background
Soient deux images, ImageDeBase et ImageEnHover.
Lorsque je passe ma souris sur ImageDeBase elle se transforme bien en ImageEnHover, mais dès que je clique sur l’image et lorsque la page se recharge , ImageDeBase reaparait meme si j’ai toujours ma souris dessus.
Des que je bouge la souris a nouveau ImageEnHover revient, mais je trouve ca quand meme pas trés esthetique.
style
a.swapped:link, a.swapped:visited {
position:absolute;
display:block; /allows width and height settings to apply/
top:201px;
left:0px;
width: 180px; /match to width of the image/
line-height: 45px; /match to height of the image/
text-indent:-100.0em; /moves the text off screen/
text-decoration:none; /removes the underline/
background-image:url(…/design/pictures/menuNews.jpg) ; /sets the unmoused image/
}
a.swapped:link:hover, a.swapped:visited:hover {
background-image:url(…/design/pictures/menuArchives.jpg); /changes to the moused image on hover/
}
C’est logique, la page se recharge donc l’élément reprend son état initial.
L’idéal est de faire un truc qui ajoute par exemple class=“active” (en php ou autre), lorsque que tu es sur la page en question
[quote=« cedric, post:3, topic: 25559 »]C’est logique, la page se recharge donc l’élément reprend son état initial.
L’idéal est de faire un truc qui ajoute par exemple class=« active » (en php ou autre), lorsque que tu es sur la page en question[/quote]
C’est ptet logique, mais sous IE ca marche, et y a plein d’exemples qui fonctionnent meme sous firefox. Y a un truc que je pige pas dans mon code.
Je vais essayer ce soir avec les id.
Si il faut faire un truc compliqué avec les active et tout (bref si je suis oblige de gerer ca) je remettrai du javascript
[quote=“the_webrunner, post:5, topic: 25559”]Pour résumer : t’as ton lien avec ton image de fond, quand tu fais un :hover, ça décale l’image de fond de ce qu’il faut.
Il faut juste que ImageDeBase et ImageEnHover soit “collé” ensemble, tu notes bien la hauteur de l’un et paf…
enfin, inspire toi du site que je t’ai donné et contacte moi si tu y arrives pas :P[/quote]
Je suis en train de lire ton message, et je me dis que cela ne doit pas être vraiment évident, pour quelqu’un qui a jamais vu ce principe avant :
Au fait, glenyjob voulait que quand on a cliqué, l’élément de son menu garde un style spécifique.
Sur le site Mambo, c’est la même méthode que je lui ai expliqué un peu plus bas : ils rajoutent un id=« active_menu » à l’élément de menu, ici via du php. Il n’y a pas de solution uniquement via css à ce « problème », le fait d’utiliser la technique des « portes coulissantes » n’y changera rien…
Mais c’est vrai que le titre du post peut prêter à confusion
[quote=“cedric, post:8, topic: 25559”]Au fait, glenyjob voulait que quand on a cliqué, l’élément de son menu garde un style spécifique.
Sur le site Mambo, c’est la même méthode que je lui ai expliqué un peu plus bas : ils rajoutent un id=“active_menu” à l’élément de menu, ici via du php. Il n’y a pas de solution uniquement via css à ce “problème”, le fait d’utiliser la technique des “portes coulissantes” n’y changera rien…
Mais c’est vrai que le titre du post peut prêter à confusion ;-)[/quote]
Cedric a raison: le rollover en css fonctionne bien (notamment grace a la technique de la translation magique :P, merci the_webrunner) mais après un clic on retrouve l’image de base (je n’ai pas de fonctionnement par frame je recharge toute ma page). En fait le problème est exactement le meme en Javascript et j’ai du rajoute une variable d’etat pour chaque page (comme l’avait dit cedric). Quand le site sera finalise j’essaierai de faire ca en css + php.
