[css] Comment faire un lien avec une image ?

Et comment faire pour qu'elle change d'apparence ?

Sujet résolu

8 août 2006 à 0:06:43

Voila pour mon site,
je veux que sur la page d'accueil
il y est un gros bouton écrit : CLIQUEZ POUR ENTREZ
et lorque le curseur passe dessus, l'image change d'apparence! vous allez me dire facile suffit de mettre une balise hover... Seulement sa marche pas !
Quand on passe le curseur sur l'image : rien
et quand on clique sur l'image
rien aussi !

alors le code css est :

#entre
{
background-image: url("images/entre.gif");
width: 300px;
height: 300px;
}

#entre a:hover
{
background-image: url ("images/entrea.gif");
width: 300px;
height: 300px;
}

<div id="corps">

<center><h2>Vous etes le <a href=http://www.quick-web.com/ target=_new><img src="http://compteur.quick-web.com/?login=NeoLitik" border=0></a>éme visiteurs</center>
</center><div id="imageb"><a href="accueil.html"></div></a></center></h2>

<center><div id="entre">
</div></center>

</div>

k1mpeR

8 août 2006 à 0:15:32

Tu doit mettre ton lien dedans.

Mais comme tu met l'image en fond sa va être dur de mettre un lien.

Anonyme

8 août 2006 à 0:17:16

Je sais! Enfin je pense!!!
Tu rajoutes un "z-index: 2;" dans la partie "#entre a:hover" du css.
EDIT: ha bah oui!Si tu met pas le lien...

NeoLitik

8 août 2006 à 2:15:05

Si sa marche pas c'est parceque mon image est en background
enfin je pense

Philias

8 août 2006 à 7:13:38

<div id="corps">
<center><h2>Vous etes le <a href=http://www.quick-web.com/ target=_new><img src="http://compteur.quick-web.com/?login=NeoLitik" border=0></a>éme visiteurs</center>
</center><div id="imageb"><a href="accueil.html"></div></a></center></h2>
<center><div id="entre">
</div></center>
</div>

Change ça pour ce qui suit

<div id="corps">
<p id="xieme">
Vous etes le
<a href="http://www.quick-web.com/" target="_new">
<img src="http://compteur.quick-web.com/?login=NeoLitik" />
</a>
éme visiteur.
<a id="entre" href="accueil.html">
<span>Cliquez pour entrer</span>
</a>
</p>

#xieme{
text-align:center;
font-size:x-large;/*Et tout autre présentatifs*/
}
#entre
{
text-align:center;
font-size:x-large;/*Et tout autre présentatifs*/
background:transparent url("images/entre.gif") no-repeat center center;
width: 300px;height: 300px;
}

#entre:hover
{
background:transparent url("images/entre2.gif") no-repeat center center;
}
#entre span{display:none;}

NeoLitik

8 août 2006 à 9:16:09

Bonne nouvelle sa marche pas !

GreenPinguin

8 août 2006 à 9:28:14

Met un lien vide dans ta div :

et dans ton CSS tu rajoute :

#entre a
{
display: block;
height: 100%;
}

LaoSeb

8 août 2006 à 10:09:38

Bon comme l'a écrit GreenPinguin juste au dessus il faut utiliser display block, seulement c'est bien de savoir ce que l'on fait.

a{
background: url(h.png);
display: block;
height: 100px; /* tu mets la hauteur et la largeur de l'image*/
width: 100px;
}

a:hover{
background: url(i.png);
}

Dans ton premier code tu mets des dimensions à <a>. Seulement "a" fait partit des balises dites inline. Cad: Elle ne peut avoir de dimension par défaut. C'est pourquoi si tu définis width et height il ne se passe rien. Cependant il existe un autre grand type de balise (div, p, hn, etc) qui sont de type block et qui ont des dimensions. Si tu veux te servir d'une balise en ligne avec des dimensions tu dois donc lui appliquer display: block (cad: afficher en block) et ainsi les dimensions définies marcheront.

Voilà bye,

Philias

8 août 2006 à 18:20:24

«Bonne nouvelle sa marche pas !»
Bonne nouvelle montre nous ce que ça a l'air !

Anonyme

8 août 2006 à 19:40:49

#entre
{
background-image: url("images/entre.gif");
width: 300px;
height: 300px;
}

#entre:hover
{
background-image: url ("images/entrea.gif");
width: 300px;
height: 300px;
}

a la place de ton css de début

Riko

8 août 2006 à 20:46:03

Salut, le texte "CLIQUEZ POUR ENTREZ" est écrit sur les images ou tu le mettra dans ton bloc div?

Anonyme

8 août 2006 à 21:00:23

Le html

Et ton css

#entre
{
background-image: url("images/entre.gif");
width: 300px;
height: 300px;
float:left;
}

#entre:hover
{
background-image: url ("images/entrea.gif");
width: 300px;
height: 300px;
}

NeoLitik

14 août 2006 à 15:04:21

Bon, je crois que mon probléme est résolu ! merci a tous !