HTML validator? [RESOLU]

[Ymai]

Il est.
Chacune des images est alors définie dans le fond des éléments a et a:hover.
Quelque chose comme

a {
background-image: url(images/img1.gif);
background-repeat: no-repeat;
}
a:hover {
background-image: url(images/img2.gif);
background-repeat: no-repeat;
}

MAIS
* il faut que les images soient de très petites tailles afin de ne pas induire un temps de latence au chargement de "img2.gif"
* on devrait provoquer le téléchargement préalable de l'image cachée dans la page.

Il existe une technique un poil plus complexe mais bien plus élégante. Elle est décrite chez Alsacreations
http://css.alsacreations.com/Tutoriels- ... age-unique

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008061015 Firefox/3.0

[GAUNCE]

Bon, j'ai crée deux régles pour un lien, mais comment l'intégrer dans la page?

J'ai 4 images/liens différentes dans menu1. Puis-je faire une règle unique en CSS et dans le code mettre les différentes images/liens en question?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[chinon37]

Il y a 3 niveaux de règles de style:
- la feuille externe qui est interprétée la première à l'ouverture de la page
- la feuille incorporée à la page, qui est interprétée ensuite
- le style interne appliqué à un élément qui est interprété en dernier.

En faisant une règle générale pour tous les liens et un style interne pour affecter une image spécifique à chaque lien fonctionnera.
Mais la solution que je préconiserais serait de faire une classe (ou même un id) par lien dans la feuille externe et d'appliquer la classe adéquat à chaque lien.

[GAUNCE]

SOS.
J'ai deux images par lien,comment j'intégre cela en html?
J'y arrive pas...ich bin paumé...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Ymai]

Je dirais quelque chose comme:

Code : Tout sélectionner

#lien1 a {
background-image: url(images/img1.gif);
background-repeat: no-repeat;
}
#lien1 a:hover {
background-image: url(images/img2.gif);
background-repeat: no-repeat;
} 

#lien2 a {
background-image: url(images/img3.gif);
background-repeat: no-repeat;
}
#lien2 a:hover {
background-image: url(images/img4.gif);
background-repeat: no-repeat;
} 

etc...
Affecter un "id = lien1" sur le premier lien; un "id=lien2" sur le deuxième; etc...

Code : Tout sélectionner

<div id="lien1"><a href="ploum.html">Lien 1 </a></div>

Si quelqu'un a quelque chose de moins bourrin...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008061015 Firefox/3.0

[chinon37]

Moi, j'avais aussi bourrin

[Ymai]

Oui, mais j'étais avant...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008061015 Firefox/3.0

[Mongo Bob]

moi, j'ai plus bourrin

[GAUNCE]

Bon je crois que je vais aller me pendre!!!
En fait c'est possible que j'y aille. J'ai fait ce qu'a dit Ymai, en premier, en CSS...à l'endroit ou je veux mettre le lien/image , que mets-je?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Ymai]

que mets-je?

<div id="lien1"><a href="ploum.html">Lien 1 </a></div>

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008061015 Firefox/3.0

[GAUNCE]

Bon, j'ai fait tout ça et ça fonctionne pas...je vais me coucher...je me pendrais demain?!...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Ymai]

Bon, j'ai fait tout ça et ça fonctionne pas...je vais me coucher...je me pendrais demain?!...

Ca me paraît plus sage. Vaut mieux être en forme pour ça, au risque de rater son cou(p).
Avant de basculer le tabouret, peut-être copier/coller le code ici?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008061015 Firefox/3.0

[GAUNCE]

Avec ça, ça fonctionne comme je veux, c'est à dire , le deuxième bouton au survol:
<a
href="solution.htm"><img
style="border: 0px solid ; width: 120px; height: 24px;" alt=""
src="button4.gif" onmouseover="this.src='button5MouseOver.gif';"
onmouseout="this.src='button4.gif';">


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Ymai]

OK, j'abandonne volontiers la course au titre du code le plus bourrin.
Mais je persiste à penser que mon code sépare mieux le texte de la programmation.
Et qu'il fonctionne (voir le principe là: http://info.sio2.be/kpz/4/10.php )

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008061015 Firefox/3.0

[chinon37]

Amha, toutes ces solutions sont aussi bourrines les unes que les autres
Bon, déjà, nous sommes rassurés, Gaunce est encore là pour quelques minutes...

Ma solution consiste à ne faire qu'une image. cette image est composée des deux images qui doivent apparaitre, accolées. Ceci est très bien expliqué dans ce tuto alsacréation - Pur css -
Ensuite, dans le cas présent, une image est attribuée par lien sur la balise contenant ce lien.
Le problème: chez notre ami, les liens sont dans des cellules de tableau et on peut trouver deux liens dans un même tableau: en clair, c'est le souk. Donc, difficile d'avoir un truc clair, structuré, etc...
Gaunce: pourrais-tu mettre le lien vers ton site dans ta signature, ce qui nous permettrait accéder à ce site sans avoir à rechercher dans les sujets précédents?