28173 sujets

CSS et mise en forme, CSS3

Problème pour insérer un style pour la balise <a>

Bonjour à tous,

J'ai 2 liens différents sur lesquels je souhaite appliquer des styles différents mais je n'arrive pas à trouver comment on les déclare directement dans la balise <a> (pour des raisons techniques, je ne peux pas les déclarer dans le <head>):

- pour le premier lien : il s'agit d'une image et j'aimerai insérer un style :hover pour changer cette image par une autre

<a href="www.google.fr" style=" ??utilisation de hover avec lien autre image;" ><img src="image1.gif"></a>


- pour le second lien : c'est juste du texte avec un hover qui fait changer la couleur du lien et le souligne

<a href="www.yahoo.fr" style="????????;">Lien</a>


Mon problème c'est la manière dont il faut écrire ces propriétés des pseudos directement dans la balise <a> qui ne fontionne pas de la même manière qu'un simple font par exemple.

Merci de votre aide !!
Modifié par louloute8091 (16 Mar 2007 - 15:10)
Pas de pseudo-classe :hover sans sélecteur CSS. Pas de sélecteur CSS sans feuille de style (interne ou externe). Ce n'est donc effectivement pas possible.
Ah ok Smiley confus ...bon je vais me débrouiller pour faire ça classiquement alors dans le header...du coup , je dois utiliser plutôt une "class" ou un "id" pour différencier les 2 types de lien ?

Et pour le changement d'images ? Comment dois-je gérer le :hover pour insérer le lien vers l'autre image ?

merci !!
Salut,

Tu n'as pas forcément à déclarer de classe si tu peux utiliser l'héritage en CSS. Si tous les liens d'une même zone de ton site ont ce même style, tu peux les appeler dans la css via leur conteneur.

Par exemple :

html :

<div id="conteneur">
      <a href="#"> lien en bleu</a>
   <div id="sous-conteneur">
     <a href="#">lien en rouge</a>
   </div>

css :

#conteneur a {color: blue;}
#conteneur a:hover {font-weight: bold;}

#sous-conteneur a {color: red;}
#sous-conteneur a:hover {color: green; font-weight: bold}


Tous les liens situés dans conteneur sont bleu, et au passage de la souris passent en gras. Normalement les liens situés dans le sous conteneur appartiennent aussi à ce conteneur donc ils ont le même style. Mais comme tu spécifie que les liens situés dans le sous-conteneur doivent être rouges, et au passage ils deviennent vert et passent en gras.

Voilà, j'espère que c'est clair.
Au pire tu peux effectivement mettre une classe. Smiley cligne
louloute8091 a écrit :
Et pour le changement d'images ? Comment dois-je gérer le :hover pour insérer le lien vers l'autre image ?

Il doit bien y avoir quelques tutoriels et exemples de code à ce sujet sur le Web, tout de même. Smiley cligne

Sinon, un petit rappel sur le remplacement de texte par des images « réactives » (si c'est bien ce que tu essayes de faire) : du point de vue de l'accessibilité (et pas uniquement pour les non-voyants), les techniques de remplacement d'images sont assez bancales.

La solution la plus accessible, lorsqu'il s'agit d'une image portant une information (bouton d'un menu graphique, par exemple), consiste à utiliser une image de contenu HTML avec texte alternatif pertinent :
<img src="menu-accueil.png" alt="Accueil" />

Les effets de survol (changement d'image) seront alors réalisés en Javascript.
(Note : « oui mais moi je veux utiliser que du CSS, pas de javascript » n'est pas une objection acceptable. « Je voudrais bien, mais je ne connais rien à Javascript et n'ai pas le temps d'apprendre les rudiments de ce langage ou de trouver un script à adapter à mes besoins » est plus solide. Smiley cligne )
Sujet clos
Aller à