Changer l'attribut src d'une image

Version imprimable

Bonjour, je cherche à changer le src d'une image avec jquery lors de son survol afin d'appliquer par la suite des effets de type fadein/fadeout que je trouve plus joli qu'un hover en css.
Le soucis, c'est que le code suivant me sort "Image corrupt or truncated: <unknown>" :
Code:

1 2 3 4 5 6 7 8 9 10 $(".corps").find(".rondvert").hover( function() { $(".corps").find(".rondvert").attr("src","/include/img/rondblanc.png"); }, function() { $(".corps").find(".rondvert").attr("src","/include/img/rondvert.png"); } );
Je n'arrives pas à comprendre pourquoi...Pourriez-vous m'aider ?
Merci.

15/06/2011, 14h00
SpaceFrog

je dirais au vi du message que ça provient plus des fichiers images eux même

tu as preloadé les images ?
15/06/2011, 14h08
bagu

non, les images ne sont pas préloadés.
J'ai juste l'image originelle qui est présente dans le html de base sous la forme suivante :

Code:

<td colspan="3"><a href="truc.php" title="description"><img src="/include/img/rondvert.png" alt="description image" class="rondvert" /></a></td>

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$(".corps .rondvert").hover(
	function()
	{
		$(this).attr("src","/include/img/rondblanc.png");
	},
	function()
	{
		$(this).attr("src","/include/img/rondvert.png");
	}
);

15/06/2011, 14h17
bagu

Cela ne marche pas mieux, je ne comprends pas pourquoi...
Le message d'erreur firebug est le suivant :
Image corrupt or truncated: <unknown>

EDIT : ne serait-ce pas $(this) au lieu de $("this") ? (même si cela ne marche pas dans les deux cas)

EDIT2 : bon, en fait le message d'erreur n'avait rien à voir...c'était dû à un problème de favicon
15/06/2011, 14h31
SpaceFrog

oui en effet c'est bien

Code:

$(this)

rectifié dans le code ci dessus
15/06/2011, 14h35
bagu

Ok, par contre, l'image ne change toujours pas au survol, ce qui me parait anormal vu que le paramètre du src est bon et que l'image originale s'affiche bien...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
$(function(){
$(".corps .rondvert").hover(
	function()
	{
		$(this).attr("src","pics/two.jpg");
	},
	function()
	{
		$(this).attr("src","pics/one.jpg");
	}
);})</script>
</head>
 
 
<body>
<div class="corps">
<img src="pics/one.jpg" class="rondvert" />
</div>
</body>

Testé et approuvé

15/06/2011, 18h36
bagu

Bon, avec un ami on a tout revu...en fait, le DOM n'étais pas fini de charger au moment de l'appel de la fonction...Du coup, cela ne fonctionnait pas...
J'ai donc déplacé l'appel des scripts en bas de page, et tout s'est mis à fonctionner.

Merci encore beaucoup du coup de main.
16/06/2011, 08h26
SpaceFrog

heu ...
C'est un peu la base de jquery: attribuer des evenements aux objets lorsque tous les éléments sont chargés

Code:

$(function(){

ou

Code:

$(document).ready( function(){
16/06/2011, 12h22
bagu

En fait j'utilisais bel et bien :

Code:

$(document).ready( function(){

Mais lorsque j'ai ajouté cette fonction, je me suis gouré d'endroit pour la mettre...Ça arrive ^^
16/06/2011, 12h44
SpaceFrog

faut vraiment se gourer parcequ'a prioiri ou que tu la mettes ça fonctionne

sauf si tu la mets avant l'appel à la lib jquery ...
16/06/2011, 12h52
bagu

Même pas, je faisais deux appels de type script de le head, le premier étant jquery, le deuxième étant les effets.

Ensuite, dans les effets, j'avais mon $(document).ready suivi de mes fonctions...
Sauf cette fonction là que j'avais déplacé, je ne sais même plus pourquoi, en dehors.

J'ai donc fait deux choses :
-J'ai déplacé mes appels de script en bas de la page
-J'ai remis la fonction dans $(document).ready

Et là, tout s'est mis à marcher.