Aller au contenu

CSS: changer la couleur du lien au passage de la souris

Charger

Par Charger
dans (X)HTML et CSS

 Partager

Sujets conseillés

Charger

Charger

Posté
Posté

Voilà, j'ai essayé maintes fois d'insérer un code html, dans ma page, de ce type:

<STYLE TYPE="text/css">
<!-- 
<!-- CE SCRIPT EST EDITE PAR EDITEUR JAVASCRIPT -->
A:hover {color:#0555FA;}
-->
</STYLE>

Mais rien n'y fait, les liens ne changent toujours pas de couleur au passage de la souris. Le plus bizarre étant que même en créant une page vierge avec Frontpage 2003 et en ayant inséré ce code entre <head> et </head>, les liens que je crée ensuite ne produisent toujours pas l'effet voulu. :wacko: Savez-vous d'où peut venir le problème? :(

Merci d'avance. ;)

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

Bonjour,

Pour définir l'apparence des liens, on utilise des pseudo-formats qui doivent être absolument dans cet ordre :

a:link => liens vers les pages qui n'ont pas encore été visitées

a:visited => liens vers les pages qui ont déjà été visitées

a:hover => liens survolés avec la souris

a:active => liens en train d'être cliqués

a:focus => liens qui deviennent actifs (lors de la navigation au clavier, par exemple)

Les deux derniers ne sont pas obligatoires mais a:focus est très utile pour se repérer dans une page quand on se déplace de liens en liens (clavier ou aide technique).

Lien vers le commentaire
Partager sur d’autres sites
bidibul

bidibul

Posté
Posté

normalement en écrivant ça, ça devrait marcher :

<style type="text/css">

<!--

#a {

text-decoration:none; <---(enfin si tu ne veux pas que ce soit souligné par exemple)

color:#ff6600;

}

#a:visited {

color:#ccc;

}

#a:hover {

color:#fff;

}

#a:active {

color:#ff6600;

}

#a:focus {

color:#990000;

}

-->

</style>

bon j'ai mis n'importe quoi comme couleur à toi de changer et pour focus, je n'ai jamais essayé, mais en suivant la même logique ça devrait marcher, mais bon, je ne suis pas certaine enfin pour le reste c'est sur.

voilà, en espérant t'avoir un peu aidé, bonne journée.

Pourquoi le contenu est mis en commentaire "<!-- ... --> ??

parce quà mon avis il doit avoir mis son code css directement dans sa feuille html et non en ficher css externe.

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

Salut 

<!-- 
<!--  -->
-->

Code HTML boiteux. Un commentaire HTML ne peut pas ni inclure un autre commentaire HTML, ni être inclus dans un autre, ni comporter 2 tirets simultanés (--) dans son contenu.

Certainement la cause de ton problème. Supprime-les carrément sauf si tu tiens réellement à faire un support actif pour Netscape 3.0 et inférieur ;)

Encore mieux: mets la feuille de style en externe et lie-là via une balise <link> et là pas besoin de mettre de commentaires HTML ce sera nickel pour tout le monde, même pour Mozaïc s'il le faut :P

Lien vers le commentaire
Partager sur d’autres sites
Charger

Charger

Posté
  • Auteur
Posté (modifié)

Merci pour vos réponses mais même après avoir suivi vos conseils, ça ne fonctionne pas. Le problème doit alors sans doute venir de la page. Je stagne sur ce problème depuis un bon moment, je sais que ça ne suit pas trop la règle du jeu du forum, mais quelqu'un pourrait il analyser ma page, en privé, pour voir d'où vient le problème, je nage vraiment là... Merci de votre aide.

J'écrirai quand même la solution à mon problème (si on la trouve...) pour donner suite à ce topic.

Modifié par Charger
Lien vers le commentaire
Partager sur d’autres sites
Charger

Charger

Posté
  • Auteur
Posté (modifié)

En fait, je suis en train de faire la nouvelle version de mon site, elle n'est donc pas encore en ligne. Mais je viens de mettre la page en question sur le serveur pour que vous puissiez y jeter un oeil: http://v8live.free.fr/accueil3.htm

Merci de votre aide. :thumbsup:

Au passage, je ne sais pas si c'est lié mais je n'arrive pas non plus à insérer de lien "page de démarrage".

Modifié par Charger
Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

Bon, dans ta page, je ne vois pas de feuille de style.

Par contre, sur chacun de tes liens textuels, tu as un 

<span style="text-decoration: none">

Forcément, étant à l'intérieur de la balise "a", son code sera interprété prioritairement à celui attribué aux liens.

Lien vers le commentaire
Partager sur d’autres sites
xpatval

xpatval

Posté
Posté
...

Mais rien n'y fait, les liens ne changent toujours pas de couleur au passage de la souris. Le plus bizarre étant que même en créant une page vierge avec Frontpage 2003 et en ayant inséré ce code entre <head> et </head>, les liens que je crée ensuite ne produisent toujours pas l'effet voulu. :wacko: Savez-vous d'où peut venir le problème? :(

Merci d'avance. ;)

Frontpage est déjà un premier problème. La génération du code n'est pas forcément propre. D'ailleurs, en regardant la source de la page que tu donnes en lien, plusieurs remarques s'imposent:

Tu n'as pas de balise <DOCTYPE ...>.

Tu utilises une balise <font> devenue obsolète, et non reconnue.

Chaque fois que tu utilises les propriétés css dans les balises (avec style="..."), tu dois clore avec un ";" (ex: style="text-decoration: none;")

Concernant les css, et puisque tu souhaites les inclure dans ton site (ce qui est bien), il serait préférable des les "externaliser", comme dit précédemment, dans une feuille de style externe, et d'ajouter dans la partie <head></head>:

<link rel="stylesheet" href="feuille.css" type="text/css">

où feuille.css sera ta feuille de style.

Enfin, une (tentative de) validation du code html, et des styles css te permettra de voir les erreurs de ta page.

Pour le html, c'est ici.

Pour les css, c'est là.

Bon courage,

xpatval

Lien vers le commentaire
Partager sur d’autres sites
PotatoesJunky

PotatoesJunky

Posté
Posté
Je me demande surtout ce que viennent faire dans le code, ces text-decoration: none.

Je vais peut-être dire une bêtise, mais en appliquant un text-decoration=none, le lien n'apparaît donc pas souligné. Or, comme Charger veut une couleur de soulignement différente de la couleur du lien, ça me semble être la bonne démarche, non ? ;)

Lien vers le commentaire
Partager sur d’autres sites
Charger

Charger

Posté
  • Auteur
Posté

J'ai là encore tout essayer mais ça ne donne rien... :( ou alors je m'y prend mal. :wacko:

Quelqu'un accepterait de modifier ma page pour y parvenir? J'ai encore beaucoup à apprendre en HTML et je découvre très vite mes limites. C'est un langage que je suis encore loin de maîtriser. Merci.

Lien vers le commentaire
Partager sur d’autres sites
  • 2 semaines plus tard...
Charger

Charger

Posté
  • Auteur
Posté (modifié)

J'ai finalement recréer ma page de A à Z mais cette fois-ci sur Dreamweaver et... ça n'a rien à voir! Le code généré est bien plus propre et je n'ai eu aucune difficulté à appliquer l'effet souhaité (voir titre du topic), Dreamweaver le générant lui même très bien en allant dans les propriétés de la page.

Merci encore de vos conseils. ;)

PS: Il me reste cependant deux derniers petits détails à régler : le lien "page de démarrage" qui ne fonctionne pas et un tableau dont les proportions sont différentes selon que la page soit affichée sous Internet Explorer et Firefox. Puis-je en parler dans ce topic ou dois-je en créer deux autres :?:

Modifié par Charger
Lien vers le commentaire
Partager sur d’autres sites
Jan

Jan

Posté
Posté
Il me reste cependant deux derniers petits détails à régler : le lien "page de démarrage" qui ne fonctionne pas et un tableau dont les proportions sont différentes selon que la page soit affichée sous Internet Explorer et Firefox. Puis-je en parler dans ce topic ou dois-je en créer deux autres :?:

Le script de ton lien "page de démarrage" renvoie vers la page http://v8live.free.fr/accueil.html ... qui n'existe pas. ta page est http://v8live.free.fr/accueil.htm (sans le "l" final)

Attention, il me semble que ce script ne marche que sous internet explorer.

Pour ton problème de mise en page des tableaux, je te conseille de créer une nouvelle discussion, le sujet étant très différent de celui de ce topic.

Lien vers le commentaire
Partager sur d’autres sites
Charger

Charger

Posté
  • Auteur
Posté

J'ai recréé une nouvelle page sous Dreamweaver dans laquelle le lien indiqué est bien &quot;http://www.v8live.com/accueil.htm". Malheureusement, ça ne fonctionne pas. Quand je clique dessus, rien ne se produit, je reviens en haut de page.

Voici le code en question:

<a href="#" class="Style6" onClick="this.style.behavior='url #default#homepage)';this.setHomePage('http://www.v8live.com/accueil.htm');"> Page de démarrage</a>

Pour le tableau, je créerai un topic plus tard.

Merci. ;)

Lien vers le commentaire
Partager sur d’autres sites
Jan

Jan

Posté
Posté

Il doit manquer une paranthèse ouvrante dans ton code:

<a href="#" class="Style6" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.v8live.com/accueil.htm');"> Page de démarrage</a>

Lien vers le commentaire
Partager sur d’autres sites
Charger

Charger

Posté
  • Auteur
Posté

Merci! ;)

En effet, il manquait une parenthèse ouvrante avant "#default#homepage)" et il y avait un espace en trop (je ne sais pas si ça joue...). En tout cas, merci de m'avoir ouvert les yeux là dessus. :thumbsup: Je finissai vraiment par croire que c'est moi qui avait encore conçue une page mal programmée et qui n'acceptait alors pas un tel code.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...