Fondu image jQuery à partir d'un onClick
Utilisateur anonyme
-
monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention -
monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention -
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 ;)
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
- Créer une icone à partir d'une image - Guide
- Recherche à partir d'une image - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
1 réponse
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 :
<!-- positionnement css : l'une sur l'autre -->
<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
Qque chose dans le genre :
<!-- positionnement css : l'une sur l'autre -->
<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