Fondu image jQuery à partir d'un onClick

Fermé

Utilisateur anonyme - 30 sept. 2009 à 20:28
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 1 oct. 2009 à 00:06

Bonjour,

J'ai récement posté une question relative au changement d'image grace au javascript à partir de boutons avec la fonction onClick.

Mais dans l'optique de réaliser un fondu entre l'image de base et l'image chargée aprés le click, j'essaie d'utiliser ce code :

function()

{

$('#logo').innerfade(

{
speed: 'slow',

timeout: 1500,

type: 'sequence',

containerheight: '400px',

containerwidth: '400px'

});

});

Dans ce bout de code :

<div>
<img src="fond2.jpg" width="100%" height="100%" id="chgImg"/>
</div>
<div id="left" onClick="ChangeBackGround('newyork2.jpg')">
</div>

Lorsque l'utilisateur click sur la div left, l'image "fond2.jpg" dans la div supérieure change pour "newyork2". Comment utiliser le code jQuery pour réaliser un fondu entre ces images?

Merci ;)

A voir également:

Fondu image jQuery à partir d'un onClick
Creer un groupe whatsapp a partir d'un autre groupe - Guide
Recherche à partir d'une image - Guide
Image iso - Guide
Créer une icone à partir d'une image - Guide
Acronis true image - Télécharger - Sauvegarde

1 réponse

Réponse 1 / 1

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
1 oct. 2009 à 00:06

Le plus simple serait de placer tes 2 images l'une sur l'autre et, via jquery, de faire disparaitre l'une et apparaitre l'autre.

Qque chose dans le genre :


<img class="pic1" src="fond2.jpg" alt="" />
<img class="pic2" src="newyork.jpg" alt="" />

<a class="btn" href="#" title="changer image">changer image</a>

script (toujours "dans le genre" ^^') :
$('a.btn').click(function(){
$('img.pic1').fadeOut("normal");
$('img.pic2').fadeIn("normal");
return false;
});

Tu comprends l'idée ? Bon boulot ! :D

Discussions similaires

Annuaire portable gratuit à partir d'un nom

problème de pixel

Résolution d'une image 500 pixels largeur

Trouver un numero de portable a partir d'un nom svp

Comment trouver un numéro à partir du nom et prénom