Changer une image au href

Bonsoir,

J'ai un menu avec 4 possibilités.
En passant sur chacune des possibilites,
(et pas seulement sur les flèches),
j'aurais souhaité que l'image "flecheOFF" devienne "flecheON".

Je n'y arrive pas avec les "onmouseover" et "onmouseout" sur le href
(pour rappel, pas uniquement sur l'image de la flèche, mais sur tout le bouton) !

Pouvez-vous m'aider ?
D'avance, merci.

Voici ma page ici

    <div id="menu">
    	<ul class="menu">
        <li class="bouton" style="width:142px;" alt="home"><a href="" class="blanc">
        	<div class="intitule" style="width:94px;">&nbsp;<br>&nbsp;<br>&nbsp;<br>HOME
            <img src="images/general/flecheOFF.png" width="7" height="7" alt="menu" style="margin-left:7px;"></div>
            <div class="numero">01.</div></a></li>
        <li class="bouton" style="width:140px;" alt="house"><a href="" class="blanc">
            <div class="intitule" style="width:92px;">&nbsp;<br>&nbsp;<br>CELINNI<br>HOUSE
            <img src="images/general/flecheOFF.png" width="7" height="7" alt="menu" style="margin-left:7px;"></div>
            <div class="numero">02.</div></a></li>
        <li class="bouton" style="width:142px;" alt="collection"><a href="" class="focus">
            <div class="intitule" style="width:94px;">&nbsp;<br>THE CELINNI<br>COLLECTION<br>IN HONK KONG
            <img src="images/general/flecheOFF.png" width="7" height="7" alt="menu" style="margin-left:7px;"></div>
            <div class="numero">03.</div></a></li>
        <li class="bouton" style="width:149px;" alt="contact"><a href="" class="blanc">
            <div class="intitule" style="width:101px;">&nbsp;<br>&nbsp;<br>&nbsp;<br>CONTACT
            <img src="images/general/flecheOFF.png" width="7" height="7" alt="menu" style="margin-left:7px;"></div>
            <div class="numero">04.</div></a></li>
        </ul>
    </div>   

Modifié par jytest (29 May 2013 - 22:26)

Pourquoi tu fais pas juste une image appliqué en CSS et tu changes avec la pseudo classe :hover au survol ?

c'est-à-dire ?
Peux-tu m'aider un peu plus ?
Merci d'avance.

.bouton {
  backgound: url(fleche_on.jpg)...
}

.bouton:hover {
  backgound: url(fleche_off.jpg)...
}

Merci jb-gfx !
J'ai corrigé et adapté ton bout de code dans le mien...

Je reprécise mes besoins.
Le "hover" ne doit pas s'effectuer uniquement sur l'image de la flèche,
mais sur tout le bouton (texte + flèche + numéro !)

Cela ne fonctionne pas...
Pourquoi ?

PS.
"vide.gif" est un gif purement transparent.

Voici ma page ici

Voici le css :

.menu {
	margin-left: 47px;
}
.bouton {
	display: inline-block;
	float: left;
	padding-top: 0px;
	font-size: 11px;
	line-height: 11px;
	color: #FFFFFF;
	margin-right: 1px;
	margin-left: 1px;
	text-align: left;
}
.focus {
	color: #a6a6a6;
}
.intitule {
	float: left;
	text-align: left;
	font-size: 11px;
	padding-bottom: 7px;
}
.numero {
	float: right;
	text-align: right;
	font-size: 31px;
	padding-top: 25px;
	width: 48px;
	padding-bottom: 7px;
}
.image {
	background-image: url(../images/general/flecheOFF.png);
}

.image:hover {
	background-image: url(../images/general/flecheON.png);
}

Voici le html :

    <div id="menu">
    	<ul class="menu">
        <li class="bouton" style="width:142px;" alt="home"><a href="index.php" class="blanc">
        	<div class="intitule" style="width:94px;">&nbsp;<br>&nbsp;<br>&nbsp;<br>HOME
            <img src="images/general/vide.gif" width="7" height="7" alt="menu" style="margin-left:2px;" class="image"></div>
            <div class="numero">01.</div></a></li>
        <li class="bouton" style="width:140px;" alt="house"><a href="house.php" class="blanc">
            <div class="intitule" style="width:92px;">&nbsp;<br>&nbsp;<br>CELINNI<br>HOUSE
            <img src="images/general/vide.gif" width="7" height="7" alt="menu" style="margin-left:2px;" class="image"></div>
            <div class="numero">02.</div></a></li>
        <li class="bouton" style="width:142px;" alt="collection"><a href="collection.php" class="focus">
            <div class="intitule" style="width:94px;">&nbsp;<br>THE CELINNI<br>COLLECTION<br>IN HONK KONG
            <img src="images/general/vide.gif" width="7" height="7" alt="menu" style="margin-left:2px;" class="image"></div>
            <div class="numero">03.</div></a></li>
        <li class="bouton" style="width:149px;" alt="contact"><a href="contact.php" class="blanc">
            <div class="intitule" style="width:101px;">&nbsp;<br>&nbsp;<br>&nbsp;<br>CONTACT
            <img src="images/general/vide.gif" width="7" height="7" alt="menu" style="margin-left:2px;" class="image"></div>
            <div class="numero">04.</div></a></li>
        </ul>
    </div>   

Modifié par jytest (30 May 2013 - 09:22)

Bonjour,

Ton code fonctionne, mais tel que tu l'as écrit il faut faire le hover sur la flèche elle-même.

Le css devrait plutôt ressembler à :

.numero .image {
	background-image: url(../images/general/flecheOFF.png);
}

.numero:hover .image {
	background-image: url(../images/general/flecheON.png);
}

Cela ne fonctionne pas avec :

.numero .image,
.intitule .image {
	background-image: url(../images/general/flecheOFF.png);
}

.numero:hover .image,
.intitule:hover .image {
	background-image: url(../images/general/flecheON.png);
}

Désolé d'insister, mais :

a écrit :

Je reprécise mes besoins.
Le "hover" ne doit pas s'effectuer uniquement sur l'image de la flèche,
mais sur tout le bouton (texte + flèche + numéro !)

PS.
La page a été réactualisée avec ces dernières modifications.
Modifié par jytest (30 May 2013 - 10:50)

Ok bonne continuation
Modifié par olithom17 (30 May 2013 - 12:16)

Hello,

Je trouve tout de même ton code extrêmement compliqué, pour ne pas dire capillo-tracté, ça va être joyeux à maintenir.
Bon courage pour la suite

6l20 a écrit :

Je trouve tout de même ton code extrêmement compliqué

+1000

Code super lourd pour faire un truc super simple.

Un conseil : simplifie tout ça et tu verra que c'est tout simple en fait.

Plus facile à dire qu'à faire... pour moi !
Tu peux m'aider un peu plus, stp

Revoici ma page ici
Modifié par jytest (31 May 2013 - 16:10)