changer une image dans un menu

Version imprimable

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

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');
	}
);

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

02/01/2011, 21h47
danielhagnoul
Bonsoir

Citation:

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 ?

Citation:

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".
03/01/2011, 18h50
lelectronique.com
merci :ccool: 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 ?