En HTML, j'utilise onMouseOut et onMouseOver.
Exemple ci-dessous :
<a href="index.php?rep=commerces" onMouseOut="swapImgRestore()" onMouseOver="swapImage('commerces','','images/boutons/commerces_over.gif',1)"><img src="images/boutons/commerces.gif" alt="commerces" name="commerces" border="0"></a>

avec deux images : commerces.gif et commerces_over.gif....

Bonjour,

Pour que ça marche, il faut que tu t'adresses au même élément.
Or, on peut supposer que ce n'est pas le cas

div#diapo
a.diapoEte2007:hover

Au temps pour moi... j'avais voulu simplifier les noms que j'avais mis ici et j'ai oublié de changer a un endroit :)

le code html :

<div id="fond">
<div id="diapoAn2006">
</div>
<div id="diapoAn2007" onClick="javascript:alert('test mouseOver);"></div>
<div id="diapoEte2007"></div>
<div id="diapoEmpty"></div>
</div>

les css en rapports :

div#fond {
height:610px;
width:916px;
background-image:url(../images/fond.jpg);
background-repeat:no-repeat;
}

div#diapoEmpty {
background-image:url(../images/diapoEmpty.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:1;
}

div#diapoAn2006 {
background-image:url(../images/diapoAn2006unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:2;
}

a.diapoAn2006:hover {
background-image:url(../images/diapoAn2006.png);
}

div#diapoAn2007 {
background-image:url(../images/diapoAn2007unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:3;
}

a.diapoAn2007:hover {
background-image:url(../images/diapoAn2007.png);
}

div#diapoEte2007 {
background-image:url(../images/diapoEte2007unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:4;
}

a.diapoEte2007:hover {
background-image:url(../images/diapoEte2007.png);
}



C'est vraiment simpliste pourtant.. je vois pas ou ca merdouille

Sinon pour la technique avec le onMouseOverje prefererais eviter...

““[dièse]diapo…” et “[point]diapo…” ne sont pas le même élément”
Corrige.

Le “:hover” se fait sur un <a> qui n'existe pas.

<div id="fond"> 
  <div id="diapoAn2006"></div> 
  <div id="diapoAn2007" onClick="javascript:alert('test mouseOver);"></div> 
  <div id="diapoEte2007"></div> 
  <div id="diapoEmpty"></div> 
</div>

<div id="diapoAn2006"></div>

<a id="diapoAn2006" href…></a>

<div><a id="diapoAn2006" href…></a></div>

Ok, je n'avais pas bien compris l'uitlisation du :hover, ca semble reglé de ce coté mais ca m'entraine un autre petit soucis.

Actuellement ma ccs se presente comme ceci :

div#fond {
	height:610px;
	width:916px;
	background-image:url(../images/fond.jpg);
	background-repeat:no-repeat;
	}
	
	div#diapoEmpty {
		background-image:url(../images/diapoEmpty.png);
		background-repeat:no-repeat;
		height:131px;
		width:124px;
		cursor:pointer;
		z-index:1;
		}

	div#diapoAn2006 {
		background-image:url(../images/diapoAn2006unhover.png);
		background-repeat:no-repeat;
		height:131px;
		width:124px;
		cursor:pointer;
		border:none;
		z-index:2;
		}
		
	div#diapoAn2006:hover {
		background-image:url(../images/diapoAn2006.png);
		}

<div id="fond">
                	<div id="diapoAn2006">
                        	<a href="gallery/horloge_juju.jpg"></a>
                         </div>
</div>

Bien que ça soit prévu pour fonctionner autre part, IE n'aime le :hover que sur les <a>.

Oui, c'est cool. Ça essaye.
Mais ça ne va pas le rester longtemps si tu ne lis pas ce que je t'explique (-;

Vois html css probleme avec un hover#4

“il faut que ma photo qui est dans ma css soit clicable”
Pas de problème. Le <a> sert à ça.
L'image est affichée. On pointe, une nouvelle la remplace et le lien s'active.
On clique et la nouvelle page se charge.


++
Pour que le <a> affiche l'image en entier, qu'il respecte les dimensions que tu lui donneras, il faut que tu lui ajoute un

	display : block;

Effectivement ca marche très bien en mettant le :hover sur la balise <a>!
Je sais pas pourquoi je me suis enteté à vouloir continuer avec les divs.

Un grand merci à toi, et promis la prochaine fois je suis à la lettre les conseils ! :D