changer une image dans un menu

[lelectronique.com]

Bonsoir,

Tout d'abord Meilleurs Voeux à tout le monde, plein de bonheur, de santé, d'argent...

Voilà mon petit problème, j'ai créé un menu verticale avec une liste en passant la souris sur une balise li cela change la couleur et la police ainsi que d'afficher une balise span avec le sous menu, via ce bout de code

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$(document).ready(function() {
 
$("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({'background' : 'url(/images/fd-gris-noir.png) repeat-x'});
	$(this).children("a").css({'color' : 'rgb(255,255,255)'});
	$("#home").attr({'src' : '/images/home-actif.png'});
	$(this).find("span").show(); 
} , function() { //on hover out...
	$(this).css({ 'background' : 'none'}); 
	$(this).find("span").hide();
	$(this).children("a").css({'color' : 'rgb(0,0,0)'});
	$("#home").attr({'src' : '/images/home.png'});
});
});

cela fonctionne très bien, mais j'ai une icone pour representer l'accueil 'home.png' sans texte je souhaiterais que cette image change lors du survol comme pour le reste du menu.
Actuellement avec le bout de code ci dessous l'icone home est modifié à chaque survol de n'importe quelle balise <li>

Comment puis je faire pour que l'image change juste au survol de l'image home.png ?

Merci d'avance

[danielhagnoul]

Bonjour

Sans le code HTML, je ne peux que supposer que #home est l'id de l'image, alors :

Code :

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
/*
 * Il est sans doute possible de regrouper le tout
 * pour n'avoir qu'un seul appel à $(this), mais
 * sans le code HTML j'ai opté pour la prudence.
 */
$("ul#topnav li").hover(
	function() {
		var obj = $(this);
 
		obj.css({'background' : 'url(/images/fd-gris-noir.png) repeat-x'});
		obj.children("a").css({'color' : 'rgb(255,255,255)'});
		obj.find("span").show(); 
	},
	function() {
		var obj = $(this);
 
		obj.css({'background': 'none'});
		obj.find("span").hide();
		obj.children("a").css({'color' : 'rgb(0,0,0)'});
	}
);
 
$("#home").hover(
	function(){
		$(this).attr('src', '/images/home-actif.png');
	},
	function(){
		$(this).attr('src', '/images/home.png');
	}
);

[lelectronique.com]

bonjour,

merci pour votre aide j'ai testé cela ne fonctionne pas à votre code je l'ai modifié comme cela mais le survol de home ne fonctionne toujours pas du moins il fonctionne lorsque que l'on est dessus mais dès que je descend dans la span du dessous il n'est plus actif comme les autres balises textes

voici le code javascript modifié :

Code :

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
 
$(document).ready(function() {
 
$("ul#topnav li").hover(
	function() {
			$(this).css({'background' : 'url(/images/fd-gris-noir.png) repeat-x'})
			$(this).children("a").css({'color' : 'rgb(255,255,255)'})
			$(this).find("span").show(); 
	},
	function() {
			$(this).css({'background': 'none'})
			$(this).find("span").hide()
			$(this).children("a").css({'color' : 'rgb(0,0,0)'});
	}
);
 
$("#home").hover(
	function() {
		$(this).attr({'src' : '/images/home-actif.png'});
	},
	function() {
		$(this).attr({'src' : '/images/home.png'});
	}
);
});

et une portion du menu html

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<ul id="topnav">
  <li>
<a href="<? echo $url ?>" title="Comparateur Vélo" class="haut" style="padding:4px 10px"><img src="/images/home.png" alt="Monde Du V&eacute;lo, la r&eacute;f&eacute;rence cyclisme" width="23" height="25" border="0" id="home" /></a>
            <span>
            <a href="/contact.html">Contactez-nous</a>
            <a href="/mentions-legales.html">Mentions l&eacute;gales</a>
            <a href="/newsletter.html">Newsletter</a>
            <a href="/banniere.html">Banni&egrave;res</a>
            <a href="/flux-rss.html">Flux RSS</a>
            <a href="/publicite/">Publicit&eacute;</a>
            <a href="/sitemap.html">Plan du site</a>
            <a href="http://MondeDuVelo.OurToolbar.com/" target="_blank">Barre d'outils</a>
            </span></li>
        <li>
        	<a href="/annuaire-cyclisme/" title="Annuaire V&eacute;lo - Annuaire VTT" class="haut">Annuaire Vélo</a>
            <span>
           	<a href="/annuaire-cyclisme/nouveautes.html" title="Nouveaut&eacute; Annuaire V&eacute;lo">Nouveaux Sites</a>
            <a href="/annuaire-cyclisme/top-hits.html">Top Hits</a>
            <a href="/annuaire-cyclisme/top-notes.html">Top Notes</a>
            <a href="/annuaire-cyclisme/top-rank.html">Top Rank</a>
            <a href="/annuaire-cyclisme/top-referrers.html">Top Referrers</a>
            <a href="/annuaire-cyclisme/allcategories.html" title="Cat&eacute;gorie Annuaire V&eacute;lo">Cat&eacute;gories</a>
</span></li></ul>

merci d'avance pour votre coup de pouce

[danielhagnoul]

Bonsoir

Actuellement avec le bout de code ci dessous l'icone home est modifié à chaque survol de n'importe quelle balise <li>

Comment puis je faire pour que l'image change juste au survol de l'image home.png ?

l fonctionne lorsque que l'on est dessus mais dès que je descend dans la span du dessous il n'est plus actif

Logique, normal. Il ne fonctionne qu'au survol de l'image.

Changement de l'image lors du survol du premier li :

Code :

1
2
3
4
5
6
7
8
9
 
$("ul#topnav li:first").hover(
	function(){
		$("#home").attr('src', '/images/home-actif.png');
	},
	function(){
		$("#home").attr('src', '/images/home.png');
	}
);

Suivant votre code CSS (inclusion physique du span dans le premier li) le changement d'image peut s'inverser lorsque vous survolerez le "span".

[lelectronique.com]

merci cela fonctionne correctement maintenant

juste un dernier petite soucis au survol du menu j'obtiens le message suivant

Code :

1
2
3
4
5
6
 
Message*: 'tagName' a la valeur Null ou n'est pas un objet.
Ligne*: 73
Caractère*: 4
Code*: 0
URI*: http://www.monde-du-velo.com/

la ligne 73 correspond à rien au menu sur la page d'accueil mais un autre script utilisant jquery
auriez vous une idée ?