Liens "mouse over" en CSS, j'en ai trop..

(reprise du message précédent)

Pour ce type de chose, le mieux est peut être d'utiliser une image en effet.
Donc, tu fais ton roll over avec le JS et on en parle plus.
Eventuellement avec un chti preload histoire que ça soit plus rapide.
Un truc que tu peux faire en guise de preload :
HTML

<div><a id="langfr" href="fr.html"><img onmouseover="this.src='fr_over.png';" onmouseout="this.src='fr.png';" src="fr.png" alt="Site version française" /></a></div>

CSS

a#langfr { background: url(fr_over.png) }

Par exemple.
Modifié par Olivier (06 Jul 2005 - 18:40)

Ok, donc le javascript serait plus viable que ceci ?

a.bouton-lien {
display: block;
width: 19px;
height: 12px;
background-image: url(images/BtnFR_on.gif);
}

a.bouton-lien:hover {
visibility: visible;
}

a.bouton-lien:hover img {
visibility: hidden;
}

Parce que ça, ça marche sur tous les navigateurs.
(reste à savoir si c'est vraiment correct et pas trop lourd)
Car le javascript devra être répété sur chaque image, alors que dans mon cas, j'alourdi le css, mais j'allege l'HTML... Bref... ¤_¤


PS: J'aime pas le javascript ;D
Modifié par Nigel (06 Jul 2005 - 20:35)

Le JS tu peux l'extraire facilement.
Tu met un id au drapeau et tu gères ça dans un fichier externe.

Ok, merci pour vos réponses

Raphael donne une bidouile pour ce probleme dans son bouquin. Il faut mettre un texte quand même (ne serait-ce que pour l'accessibilité), et avec je ne sais plus quelle propriété CSS, le sortir de la page en le positionant genre à -5000px.


De mon coté, tout en finissant de lire ce bon livre, j'intègre mon premier site entièrement CSS (avant j'utilisais les CSS que pour la mise en forme, mais pas pour la mise en page). Et franchement, plus ça va, plus j'ai l'impression qu'il faut faire sans arret des bidouilles pour que ca s'affiche pareil sur les différents navigateurs (IE me fait ch...). Bien plus que quand je faisais mes mises en pages en tableaux.

Une bidouille que j'ai trouvé par hasard et qui me fait halluciner : j'avais un div qui ne se plaçait pas pareil dans IE et FF. Pour qu'il s'affiche correctement dans IE, je devais définir les 2 prop top et margin-top. Par contre FF n'affichait ca comme je voulait que si je n'en définissait qu'une seule.
Et bien j'ai mis // devant le margin-top. FF l'interprète comme un commentaire mais pas IE. Résultat c'est bon partout.
C'est pas de la grosse bidouille ça ?

grand-mister a écrit :

C'est pas de la grosse bidouille ça ?

Si. Affreuse, en plus. Abominable et foireuse, même

En fait, beaucoup de bidouilles sont issues d'une utilisation impropre de CSS : on compense un mauvais choix de départ à coup d'astuces.

Quand le hack pointe le bout de son nez, on peut continuer. Mais quand on se retrouve avec le sentiment de nager dans la bidouille, c'est qu'il est temps de s'arrêter, et de tout reprendre avec une autre stratégie, ou de revoir ses ambitions à la baisse

Aucun rapport avec le topic et ce type de bidouilles est somme toute assez rare dans la plupart des cas.

Pour l'histoire des drapeaux, pourquoi utiliser ce type de méthodes alors qu'une image est bien plus efficace et adaptées...