Changer l'attribut src d'une image

**bagu** · 15/06/2011, 14h58

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 :

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

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.

**SpaceFrog** · 15/06/2011, 15h00

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

tu as preloadé les images ?

**bagu** · 15/06/2011, 15h08

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 :

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

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

**SpaceFrog** · 15/06/2011, 15h13

Code :

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

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

**bagu** · 15/06/2011, 15h17

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

**SpaceFrog** · 15/06/2011, 15h31

oui en effet c'est bien

Code :

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

 $(this)

rectifié dans le code ci dessus

**bagu** · 15/06/2011, 15h35

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...

**SpaceFrog** · 15/06/2011, 15h40

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
<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é

**bagu** · 15/06/2011, 19h36

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.

**SpaceFrog** · 16/06/2011, 09h26

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

Code :

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

$(function(){

ou

Code :

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

$(document).ready( function(){

**bagu** · 16/06/2011, 13h22

En fait j'utilisais bel et bien :

Code :

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

$(document).ready( function(){

Mais lorsque j'ai ajouté cette fonction, je me suis gouré d'endroit pour la mettre...Ça arrive ^^

**SpaceFrog** · 16/06/2011, 13h44

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 ...

**bagu** · 16/06/2011, 13h52

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.

Changer l'attribut src d'une image

jQuery

Discussions similaires

Partager

Partager