[Résolu] Chargement d'une image hover avec jquery

Bonjour,

Ca doit être très simple, mais je bute sur un truc simple avec jQuery, et je débute avec Javascript.

J'ai pour un site immobilier plusieurs photos à afficher : une grande par défaut (la 1.jpg) et des mini-thumbs en dessous qui permettent de voir des miniatures des autres photos disponibles.

Mon code est :

<img class="mainimg" src="1.jpg" />
et
<img class="othimg" src="1.jpg" />
<img class="othimg" src="2.jpg" />
<img class="othimg" src="3.jpg" />
<img class="othimg" src="4.jpg" />

J'arrive à fader le thumbs lorsque je passe ma souris au dessus de la miniature, mais je voudrais en plus lui faire charger dans .mainimg la source de l'image.

En gros, quand je survole la miniature 2.jpg, je dois affiche 2.jpg en gros à la place de 1.jpg.

Ma question est de savoir si je dois juste utiliser le changement d'attr.("src") de l'image grande par défaut (mais comment elle se 'charge' alors) ou si je dois utiliser une fonction jquery de type ahah (ajax sans xml, asynchrone et pas ajax donc) ?

bref, c un peu flou pour moi, des pistes à me conseiller ?

Merci !
Modifié par sidd (06 Jan 2010 - 14:41)

J'essaye ca avec jQuery mais sans succès :

<script type="text/javascript">
$(document).ready(function(){
  main = $(".mainimg").attr("src"); 
	$(".othimg").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
	$(".othimg").hover(function(){ 
		$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
		newSrc=this.attr("src");
		$(".mainimg").attr("src",newSrc);
	},function(){
   		$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
	});
});
</script

Placé avant le code html bien entendu.

Mon problème est sur le :
$(".mainimg").attr("src",newSrc);
C'est pas censé afficher l'image en grand sur laquelle on a le pointeur de souris en hover ?

Salut,

Essaye, pour commencer, de changer ça :

newSrc=this.attr("src");

par ça :

newSrc = $(this).attr("src");

It works !

Merci beaucoup, quasi 3 jours que j'étais là dessus ..