Discussion :

[badseyar]

bonjour,

j'ai créé un menu dynamique à base de div et de mouvements avec scriptaculous. Chaque élément du menu est composé d'un titre avec une image, et d'un div avec les liens de cette rubrique. Au survol du titre, l'image change, le div du titre précédemment affiché disparaît et le div du titre survolé apparaît. Avec Firefox, IE6 et Opera pas de souci, par contre IE7 me pose un souci :

Je gère le changement d'image via un "document.getElementById", mais avec IE7 l'image ne change pas. Ce changement est utilisé dans la fonction qui gère tout le changement du menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
function bougemenu(nb)
 
{
 
	if(nb!=affiche)
 
	{
 
		//on rétracte l'ancien menu
 
		new Effect.toggle('sousmenu'+affiche,'blind',{duration:1});
 
		document.getElementById("img"+affiche).src="images/bleu.png";
 
		document.getElementById("lien"+affiche).className="lienb";
 
		new Effect.MoveBy('menu'+affiche, -0, +45, {duration:1, fps:25, from:0.0, to:1.0});
 
		//on déploie le nouveau
 
		new Effect.MoveBy('menu'+nb, -0, -45, {duration:1, fps:25, from:0.0, to:1.0});
 
		new Effect.toggle('sousmenu'+nb,'blind',{duration:1});
 
		document.getElementById('img'+nb).src='images/orange.png';
 
		document.getElementById("lien"+nb).className="lieno";
 
		affiche=nb;
 
	}
 
}

merci d'avance si vous avez une idée

[le_chomeur]

salut, je ne vois pas d'erreur de script particulière, peux tu essayer en supprimant les effets ?
je viens de tester dans une fonction bateaux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function overImage(){
document.getElementById("imgFond").src="MesImages/over.jpg";
}
function overImage(){
document.getElementById("imgFond").src="MesImages/out.jpg";
}
 
 
coté HTML :
<a href="#" onmouseover="overImage()" onmouseout="overImage()"> lien</a>

et aucun souçis ...

sachant qu'il serait peut-être plus judiciable de gèrer ton rollover en css
Bon courage

[badseyar]

sans les effets cela ne fonctionne pas plus...
pour ton idée de gérer le rollover en css, je ne vois pas trop comment faire, si tu as un exemple pour que je teste je suis preneur !

[le_chomeur]

bizare que cela ne fonctionne pas ...
sinon en css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type="text/css">
.classHover{
	color:green;
	background-image:url(tonimagedebase);
}
 
 
.classHover:hover{
	color:red;
	background-image:url(tonimage);
}
</style>

et du coté html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="www.developpez.com" class="classHover">le lien</a>

voila

[badseyar]

alors le truc, c'est que dans les actions qui se passent :
- je survole un lien texte qui déclanche tout le mouvement
- l'image associée, bleu.png par défaut, change et reste identique tant qu'un autre lien n'a pas été survolé

voila un exemple de rubrique de mon menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="menu3">
<img id="img3" src="images/bleu.png" alt="" />&nbsp;<a href="#" id="lien3" class="lienb" onmouseover="Javascript:bougemenu(3);">ENTREPRENDRE</a>
</div>
<div id="sousmenu3" style="display: none; position: relative;">
<a href="#" class="menuo">Zones d'activit&eacute;s</a><br />
<a href="#" class="menuo">Maison des comp&eacute;tences</a><br />
<a href="#" class="menuo">Nos Actions</a>
</div>

donc je pense que ça ne va pas fonctionner avec ton code, ou peut-être que je me trompe

[le_chomeur]

ok je comprend mieux le fonctionnement
effectivement si tu souhaites laisser le dernier lien survolé coloré ( ou une autre image ), il faut effectivement passer par du javascript et c'est un peu plus complexe :
au survol :
- appel de la méthode
- on parcours tous les liens en supprimant le style survolé
- on assigne au lien en cours le nouveau style

2 eme méthode, on utilise une variable temporaire ( variable qui devra être globale )

- appel de la méthode
- suppression du style survolé sur l'ancien lien
- on assigne au lien en cours le nouveau style
- on affecte le nouveau lien a la variable globale qui sera donc l'ancien lien au prochain appel de la méthode

voila tu as l'algo et les fonctions sont très facile a coder

[badseyar]

oui c'est exactement ce que j'ai fait avec le code dans mon premier message du topic (la variable "affiche" est globale), tout fonctionne sauf le changement d'image sous IE7 via document.getElementById

[le_chomeur]

. . . désolé je viens de trouver l'erreur je n'étais pas encore réveillé :

ici on utilise des liens donc il faut passer par le style et non par la source comme s'il s'agissait d'une image ^^ DONC :
remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('img'+nb).src='images/orange.png';

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('img'+nb).style.backgroundImage='url("http://www.developpez.net/forums/images/buttons/resolu.gif")';

testé et approuvé

[badseyar]

l'image n'est pas dans le lien, le lien est juste un texte, donc ce code ne passe pas.

[le_chomeur]

. . . c'est ce que je viens de dire tu utilises juste un lien que tu survoles ou il y a une image dans le lien ???


si tu parles de cette section :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="menu3">
<img id="img3" src="images/bleu.png" alt="" />&nbsp;<a href="#" id="lien3" class="lienb" onmouseover="javascript:bougemenu(3);">ENTREPRENDRE</a>
</div>

ce script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<script type="text/javascript">
function bougemenu(imgFond){
document.getElementById("img"+imgFond).src='http://www.developpez.net/forums/images/buttons/resolu.gif';
}

fonctionne correctement donc il y a peut-être un problème au niveau du chemin vers tes images ...

[badseyar]

je viens de trouver d'où venais le souci... un script permettant la correction des png sous IE6 qui bloque ce changement d'image sous IE7... ça m'arrange pas