Tout d'abord bonjour, je suis nouveau sur le forum et après avoir pris connaissance des règlements du forum, je crois être en droit de poser ma question dans un nouveau sujet.
Voilà, pour un de mes cours je dois faire une page de présentation. Sur cette dite page, j'ai une image qui me dirige vers une nouvelle page. J'aimerais que cette image change lors du a:hover ET lors du a:active. Donc, j'ai 3 images, je reprends mon a:link dans a:visited.
Cependant, le moyen que j'ai trouvé est d'insérer mes images dans mon html dans une div image, entouré d'un lien. Cependant, en respectant la règle du link, hover, active, visited, mon image active n'apparaît pas mais mon lien est cliquable (ici c'est l'image hover qui me fournit le lien). Par contre, j'ai inversé link et hover et mes 3 images apparaissent à tour de rôle. Sauf que, mon image active ne fait pas lien. J'ai beau cliqué plusieurs fois le lien ne se fait pas. En jouant avec clique droit clique gauche a répétition je réussis a avoir un lien vers ma page mais ce n'est pas la bonne façon ...
Quelqu'un peut m'aider? Je laisses mes codes ci-bas.
Voici mon HTML
Voici mon CSS
Merci d'avance!!
Modifié par AyoTTe (03 Mar 2008 - 17:20)
Voilà, pour un de mes cours je dois faire une page de présentation. Sur cette dite page, j'ai une image qui me dirige vers une nouvelle page. J'aimerais que cette image change lors du a:hover ET lors du a:active. Donc, j'ai 3 images, je reprends mon a:link dans a:visited.
Cependant, le moyen que j'ai trouvé est d'insérer mes images dans mon html dans une div image, entouré d'un lien. Cependant, en respectant la règle du link, hover, active, visited, mon image active n'apparaît pas mais mon lien est cliquable (ici c'est l'image hover qui me fournit le lien). Par contre, j'ai inversé link et hover et mes 3 images apparaissent à tour de rôle. Sauf que, mon image active ne fait pas lien. J'ai beau cliqué plusieurs fois le lien ne se fait pas. En jouant avec clique droit clique gauche a répétition je réussis a avoir un lien vers ma page mais ce n'est pas la bonne façon ...
Quelqu'un peut m'aider? Je laisses mes codes ci-bas.
Voici mon HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site Algo</title>
<link href="css/script.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="images">
<img id="back" src="images/back.jpg" alt="background" />
<a href="test.html">
<img id="titre" src="images/titre.gif" alt="Titre" />
<img id="titre2" src="images/titre2.gif" alt="Titre" />
<img id="titre3" src="images/titre3.gif" alt="Titre" />
</a>
</div>
</body>
</html>Voici mon CSS
body {
margin-top: 10px;
padding: 0;
width: 100%;
background: #333;
margin-left: 10%;
}
#back {
width: 77%;
}
#titre, #titre2, #titre3 {
position: absolute;
top: 6px;
left: 0;
margin-left: 20%;
margin-top: 10px;
text-decoration: none;
border: 0;
}
#titre2, #titre3 {
display: none;
}
a:hover #titre3,
a:hover #titre {
display:none;
}
a:link #titre2,
a:link #titre3 {
display: none;
}
a:visited #titre3,
a:visited #titre2 {
display:none;
}
a:active #titre2,
a:active #titre {
display: none;
}
a:link #titre {
display: inherit;
}
a:hover #titre2 {
display: inherit;
}
a:visited #titre {
display:inherit;
}
a:active #titre3 {
display: inherit;
}Merci d'avance!!
Modifié par AyoTTe (03 Mar 2008 - 17:20)
