Changer l'attribut src d'une image [Résolu]

bagu · 15/06/2011, 13h58

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, 14h00

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, 14h08

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, 14h13

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, 14h17

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, 14h31

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, 14h35

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, 14h40

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, 18h36

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, 08h26

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, 12h22

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, 12h44

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, 12h52

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.

15/06/2011, 14h00	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	je dirais au vi du message que ça provient plus des fichiers images eux même tu as preloadé les images ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

15/06/2011, 14h08	#3
bagu Futur Membre du Club Inscription : juin 2005 Messages : 59 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : juin 2005 Messages : 59 Points : 15 Points : 15	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>
	00

15/06/2011, 14h31	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	oui en effet c'est bien Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this) rectifié dans le code ci dessus __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/06/2011, 08h26	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	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(){ __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/06/2011, 12h22	#11
bagu Futur Membre du Club Inscription : juin 2005 Messages : 59 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : juin 2005 Messages : 59 Points : 15 Points : 15	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 ^^
	00

15/06/2011, 14h17	#5
bagu Futur Membre du Club Inscription : juin 2005 Messages : 59 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : juin 2005 Messages : 59 Points : 15 Points : 15	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
	00

15/06/2011, 14h35	#7
bagu Futur Membre du Club Inscription : juin 2005 Messages : 59 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : juin 2005 Messages : 59 Points : 15 Points : 15	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...
	00

15/06/2011, 18h36	#9
bagu Futur Membre du Club Inscription : juin 2005 Messages : 59 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : juin 2005 Messages : 59 Points : 15 Points : 15	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.
	00

16/06/2011, 12h44	#12
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	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 ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/06/2011, 12h52	#13
bagu Futur Membre du Club Inscription : juin 2005 Messages : 59 Détails du profil Informations personnelles : Âge : 31 Informations forums : Inscription : juin 2005 Messages : 59 Points : 15 Points : 15	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email