Roolover avec CSS
Cyril
-
wiwimagique Messages postés 481 Date d'inscription Statut Membre Dernière intervention -
wiwimagique Messages postés 481 Date d'inscription Statut Membre Dernière intervention -
Bonjour,j'aimerais faire un tableau qui me sert en fait de menu. Et j'aimerais que lorsque l'on survole l'une des cellules,je puisse changer d'une part la couleur de police et d'autres part la couleur du background de la cellule (soit par une couleur soit par une image je sais pas encore).
Voici mon code actuel html:
<html>
<head><link rel="stylesheet" media="screen" type="text/css" title="" href="style.css"></head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" class="lienstableaux">
<tr>
<td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td>
</tr>
<tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
<td><a href="#" >La crêpe dentelle</a></td>
</tr>
<tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
<td><a href="#">Le secret de son origine</a></td>
</tr>
<tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
<td><a href="#">Technique de fabrication</a></td>
</tr>
</table>
</body>
</html>
et mon CSS:
.tabnormal{color:black; font-weight:normal; background-color:CC99FF;}
.tabover{color:navy; font-weight:bold; background-color:#FFCCFF;}
.tabtitle{color:black;background-color:#CC66FF; font-weight:bold;text-align:left; background-color:#CC66FF;}
table tr td a{text-decoration: none;color:black;}
table tr td a:hover{text-decoration: none;color:navy;}
Pour ce qui est du changement du fond, ca marche sans probléme,juste une question est 'il possible de definir un fond avec une image et non une couleur?si oui quelle est la commande?
Sinon mon plus gros probleme c'est que lorsque je survole le lien,ma police change bien de couleur.Mais j'aimerais qu'il le fasse aussi quand je survole la cellule entiere du tableau (quand je suis a l'extreme droite de la cellule et qu'il n'y a pas de texte dessous.Comment puis je faire pour y remedier?
merci a ceux qui me repondront.
Voici mon code actuel html:
<html>
<head><link rel="stylesheet" media="screen" type="text/css" title="" href="style.css"></head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" class="lienstableaux">
<tr>
<td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td>
</tr>
<tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
<td><a href="#" >La crêpe dentelle</a></td>
</tr>
<tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
<td><a href="#">Le secret de son origine</a></td>
</tr>
<tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
<td><a href="#">Technique de fabrication</a></td>
</tr>
</table>
</body>
</html>
et mon CSS:
.tabnormal{color:black; font-weight:normal; background-color:CC99FF;}
.tabover{color:navy; font-weight:bold; background-color:#FFCCFF;}
.tabtitle{color:black;background-color:#CC66FF; font-weight:bold;text-align:left; background-color:#CC66FF;}
table tr td a{text-decoration: none;color:black;}
table tr td a:hover{text-decoration: none;color:navy;}
Pour ce qui est du changement du fond, ca marche sans probléme,juste une question est 'il possible de definir un fond avec une image et non une couleur?si oui quelle est la commande?
Sinon mon plus gros probleme c'est que lorsque je survole le lien,ma police change bien de couleur.Mais j'aimerais qu'il le fasse aussi quand je survole la cellule entiere du tableau (quand je suis a l'extreme droite de la cellule et qu'il n'y a pas de texte dessous.Comment puis je faire pour y remedier?
merci a ceux qui me repondront.
A voir également:
- Roolover avec CSS
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
5 réponses
desolé erreur de frappe dans la definition de mon tableau ce n'est pas:
<table width="100%" cellpadding="0" cellspacing="0" class="lienstableaux">
mais:
<table width="100%" cellpadding="0" cellspacing="0">
ne pas prendre en compte l'appel de la class
merci
<table width="100%" cellpadding="0" cellspacing="0" class="lienstableaux">
mais:
<table width="100%" cellpadding="0" cellspacing="0">
ne pas prendre en compte l'appel de la class
merci
Voilà la solution et simplifiée qui plus est !
J'ai mis le css directement dans le corps du html pour mes tests.
J'ai aussi mis les images "Winter.jpg" et "Sunset.jpg" fournies par windows comme test et ça marche sur firefox et Iexplorer
Par contre, j'ai un peu bousillé tes classes autre que le changement de couleur, il faudrait les refaire.
Il ne te reste plus qu'à changer l'image du fond et à séparer ton css.
<html>
<head>
<style>
a{text-decoration: none;color:black;display:block; background-image: url(Sunset.jpg);font-weight:bold;width:100%}
a:hover{text-decoration: none;color:blue;display:block;background-image: url(Winter.jpg);font-weight:bold;width:100%}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" class="lienstableaux">
<tr>
<td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td>
</tr>
<tr>
<td><a href="#" >La crêpe dentelle</a>
<a href="#">Le secret de son origine</a>
<a href="#">Technique de fabrication</a>
</td>
</tr>
</table>
</body>
</html>
J'ai mis le css directement dans le corps du html pour mes tests.
J'ai aussi mis les images "Winter.jpg" et "Sunset.jpg" fournies par windows comme test et ça marche sur firefox et Iexplorer
Par contre, j'ai un peu bousillé tes classes autre que le changement de couleur, il faudrait les refaire.
Il ne te reste plus qu'à changer l'image du fond et à séparer ton css.
c'est encore moi,juste une petite question en plus:
j'aimerais que mon a{} et mon a:hover{} n'agissent que sur les liens de mes menus. car ils aggisent aussi sur d'autres liens auquels je ne veux pas donner d'effet.Quelle est la méthode la plus simple?
j'avais pensé a faire:
table tr td a{}
table tr td a:hover{}
comme ca cela n'agira que sur les liens contenus dans un tableau.
Ca marche trés bien,mais en meme temps pour l'instant je n'ai pas d'autres tableaux donc c'est vrai que ca ne pose pas probleme.
Mais si a l'avenir je rejouté d'autres tableaux cela me posera probleme.
Donc comment faire pour indiquer qu'il faut executer mon css uniquement avec des leins précis?faudrait t'il que je fasse appel a une autre classe?merci de m'indiquer les commandes a effectuer.
j'aimerais que mon a{} et mon a:hover{} n'agissent que sur les liens de mes menus. car ils aggisent aussi sur d'autres liens auquels je ne veux pas donner d'effet.Quelle est la méthode la plus simple?
j'avais pensé a faire:
table tr td a{}
table tr td a:hover{}
comme ca cela n'agira que sur les liens contenus dans un tableau.
Ca marche trés bien,mais en meme temps pour l'instant je n'ai pas d'autres tableaux donc c'est vrai que ca ne pose pas probleme.
Mais si a l'avenir je rejouté d'autres tableaux cela me posera probleme.
Donc comment faire pour indiquer qu'il faut executer mon css uniquement avec des leins précis?faudrait t'il que je fasse appel a une autre classe?merci de m'indiquer les commandes a effectuer.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question