11540 sujets

JavaScript, DOM et API Web HTML5

[résolu] Jquery remplacer image au passage de la souris

Bonjour

Je débute avec jquery et j'ai fait un petit script qui me permet de changer un image au passage de la souris avec effet de fadein et fadeout. De plus juste avant le fait un calcul pour fixer la taille de ces image en fonction de la taille du navigateur.
Ca fonctionne sauf que j'ai un petit bug: en effet quand la page est scroller et que je passe la souris sur l'image, le changement se fait bien sauf que ça recale la page en haut.

Voila le script:
$(function(){

var taillenav= $(window).width();
var tailenav2=taillenav-550;
$('#myimage').width(tailenav2);
});
$(document).ready(function (){
$("#myimage").hover(function(){
      $(this).fadeOut(800, function(){
        $(this).attr('src', 'template/imgs/photo.jpg').fadeIn(800);
        });
	},function(){
      $(this).fadeOut(800, function(){
        $(this).attr('src', 'template/imgs/croquis.jpg').fadeIn(800);
        });
	});
});


et le code html:
<img id="myimage" src="template/imgs/croquis.jpg" />


Pouvez vous me dire ce qui cloche?

Merci
Modifié par patbonf (09 Aug 2012 - 13:57)
Bonjour

C'était un oubli quand j'ai fait le copier-collé du script, en modifiant le nom des fichiers, j'ai modifié mon post.

Le problème est toujours présent.

J'ai mis un test ici:
http://patbonf.free.fr
Modifié par patbonf (06 Aug 2012 - 16:43)
Salut,

Si tu observes ce qui se passe, par exemple avec Firebug, tu verras que la méthode fadeOut aboutit à un "display: none;".
Du coup, avant de réapparaître, ton image est retirée du flux avec le display, la hauteur du document change et tu es recalé en haut de la page...

Essaie plutôt avec fadeTo() ?
Salut tm,

Merci pour la réponse, ça mache nickel avec fadeTo(). Smiley biggrin

voila le script corrigé:
$(function(){

var taillenav= $(window).width();
var tailenav2=taillenav-550;
$('#myimage').width(tailenav2);
});
$(function (){
$("#myimage").hover(function(){
      $(this).fadeTo(100,0.1, function(){
        $(this).attr('src', 'photo.jpg').fadeTo(100,1);
        });
	},function(){
      $(this).fadeTo(100,0.1, function(){
        $(this).attr('src', 'croquis.jpg').fadeTo(100,1);
        });
	});
});


Merci beaucoup
Sujet clos
Aller à