Bonjour!
J'ai souhaité réaliser un effet rollover en suivant le tuto " Une image réactive (rollover) sans javascript".
Cela semble simple en lisant et pourtant je n'ai pas d'images qui s'affiche sur ma page de test.
Sûrement un truc tout bête, je penche pour une erreur de ma part sur les "background" de la feuille de style mais je n'arrive pas à trouver ce qui cloche.
J'ai utiliser la fonction " recherche" mais rien en semble correspondre à mon cas.
Quelqu'un peut il m'aider? me mettre sur la voie?
Le lien vers la page test: http://lagardedamakna.free.fr/index0
Mon code html:
Ma Feuille CSS:
Par avance, merci de votre aide
Modifié par Artno (03 Dec 2005 - 12:44)
J'ai souhaité réaliser un effet rollover en suivant le tuto " Une image réactive (rollover) sans javascript".
Cela semble simple en lisant et pourtant je n'ai pas d'images qui s'affiche sur ma page de test.
Sûrement un truc tout bête, je penche pour une erreur de ma part sur les "background" de la feuille de style mais je n'arrive pas à trouver ce qui cloche.
J'ai utiliser la fonction " recherche" mais rien en semble correspondre à mon cas.
Quelqu'un peut il m'aider? me mettre sur la voie?
Le lien vers la page test: http://lagardedamakna.free.fr/index0
Mon code 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" xml:lang="fr" lang="fr">
<head>
<title>Bienvenue</title>
<meta name="author" content="ArtNo" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="Dofus,MMORPG,MMOG,Ankama,jeux PC, jeux massivement multi-joueurs,jeu en ligne, rpg, flash, artno, guilde, garde" />
<meta name="Category" content="Games" />
<meta name="description" content="Dofus - Site et forum de discussion sur le MMORPG (jeux massivement multi-joueurs)" />
<meta name="Robots" content="index,follow,all" />
<meta name="Revisit-after" content="3 days" />
<link rel="stylesheet" type="text/css" href="styles1.css" />
</head>
<body>
<div id="conteneur">
<div id="entree">
<br/>
<a class="image" title="Cliquez sur l'image pour entrer sur le site" href="http://lagardedamakna.free.fr/accueil"></a>
<br/>
<h3>" A l'origine du Monde fût le Tofu... Et les Dieux surent alors qu'il avait vraiment déconnés!"</h3>
<h3>- Le Sage Dahreu Wine -</h3><br/>
</div>
<div id="pied">Réalisation du site <a href="mailto:lagardedamakna@no-log.org">ArtNo</a> © 2005 <a href="mailto:lagardedamakna@no-log.org">La Garde d'Amakna</a>. Tous droits réservés.<br/>
Les images et textes issus de <a href="http://www.dofus.com/fr/">Dofus</a> sont © 2004 <a href="http://www.ankama-studio.com/fr/accueil.html">Ankama Studio</a>.Tous droits réservés.
</div>
</div>
</body>
</html>Ma Feuille CSS:
body {
margin: 0;
padding: 0;
background-color: #F0E4C8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #980000;
}
#conteneur {
margin: 0 auto;
width: 750px;
left: 50%;
}
#entree {
text-align: center;
text-indent: 2em ;
line-height: 1.3em ;
padding: 2em 2em 2em 2em;
}
#pied {
height: 40px;
text-align: center;
font-size: 0.75em;
line-height: 1.3em;
background-color: #F0E4C8;
}
h3{
text-align: center;
font-size: 1em;
}
a {
color: #980000;
text-decoration: none;
}
a:hover {
color: #980000;
text-decoration: underline;
}
a.image { /* définition de la classe "image" de la balise <a> */
display: block; /* la balise a doit être en bloc */
width: 450; /* largeur de l'image réactive */
height: 453; /* hauteur de l'image réactive */
background-image: url(images/boutons/imageindex1.jpeg); /* source de l'image de départ */
background-repeat: no-repeat;
}
a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(images/boutons/imageindex2.jpeg); /* source de l'image d'arrivée */
} Par avance, merci de votre aide
Modifié par Artno (03 Dec 2005 - 12:44)
)
