Sujet Précédent Sujet Suivant

[HTML/CSS] Probleme avec un hover

Résolu/Fermé
Unicorn777 Messages postés 30 Date d'inscription jeudi 2 août 2007 Statut Membre Dernière intervention 9 septembre 2008 - 5 sept. 2007 à 22:52
Unicorn777 Messages postés 30 Date d'inscription jeudi 2 août 2007 Statut Membre Dernière intervention 9 septembre 2008 - 6 sept. 2007 à 23:02
Bonjour,

Je me tente actuellement a un petit site web mais j'ai un soucis sur un hover. Je m'explique:
Je voudrais que lorsque que la souris passe sur une image, cette derniere soit remplacée par une autre. Or actuellement ca ne fait absolument rien.

Je suis sur qu'il s'agit d'une erreur bien bete mais je n'arrive pas a trouver... je vous mets mon bout de css qui est censé faire ca :


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

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


Merci d'avance !

Alex.
A voir également:

7 réponses

Réponse 1 / 7
Unicorn777 Messages postés 30 Date d'inscription jeudi 2 août 2007 Statut Membre Dernière intervention 9 septembre 2008 2
6 sept. 2007 à 00:42
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...
1
Réponse 2 / 7
ecumastor Messages postés 1 Date d'inscription samedi 30 avril 2005 Statut Membre Dernière intervention 5 septembre 2007
5 sept. 2007 à 23:14
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....
0
Réponse 3 / 7
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
6 sept. 2007 à 00:01
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
Par exemple, “#diapo” et “.diapo” ne sont pas le même élément.

Il faut que tu en montres plus.
Le code CSS complet de la manip.. Le code HTML aussi.
La page en ligne serait encore mieux.


++
Tu dois pouvoir t'inspirer de ces menus qui utilisent cette technique :
http://css.alsacreations.com/Galeries-de-menus-en-CSS

--
0
Réponse 4 / 7
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
6 sept. 2007 à 01:44
““[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>
Pour que ça marche, l'image doit être dans un <a>.
Et donc, la <div> devrait plutôt être un <a>.
Ou le <a> placé dans une <div> mais ayant l'id.
<div id="diapoAn2006"></div>
serait donc
<a id="diapoAn2006" href…></a>
ou
<div><a id="diapoAn2006" href…></a></div>


++
Ce bouton sert à rendre le code plus lisible.

Une méthode qui évite le temps de latence dû au chargement de la nouvelle image lors du survol :
  http://www.peutetreunereponse.net/article-5551133-6.html

--
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Unicorn777 Messages postés 30 Date d'inscription jeudi 2 août 2007 Statut Membre Dernière intervention 9 septembre 2008 2
6 sept. 2007 à 20:29
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);
		}


et mon code html tel que ceci : 

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


Seulement il faut que ma photo qui est dans ma css soit clicable via ce lien... or si je met une balise img entre mon :hover ne fonctionne plus puisque l'image du code remplace toujours les images du css.

Merci d'avance pour ton aide Gihef, c'est vraiment cool de ta part !

Alex.

edit: J'ai parlé un peu vite... apparement le :hover tel que je l'ai fait ne fonctionne pas sur ie? normal?
0
Réponse 6 / 7
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
6 sept. 2007 à 21:40
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;
--
0
Réponse 7 / 7
Unicorn777 Messages postés 30 Date d'inscription jeudi 2 août 2007 Statut Membre Dernière intervention 9 septembre 2008 2
6 sept. 2007 à 23:02
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
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Que veut dire <p>&nbsp;</p>?
quinn mallory -
prosthetiks -

3 réponses