begin process at 2012 05 29 05:27:58
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

effet ajax puis changer image puis effet ajaxy

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

effet ajax puis changer image puis effet ajaxy

mercredi 19 mars 2008 à 11:51:14 | effet ajax puis changer image puis effet ajaxy

Annadrill
bonjour,

voilà, j'ai une div avec une image dedans et j'aimerais que lorsque je clique sur un lien, la div se ferme (effect.Fade), puis une fois fermée, l'image qui se trouve dedans change,
(avec cette function:

function loadImage(bob, john){ //le lien genre:<a href="#" onclick="loadImage('name de l'img', 'adresse de la src')">
 document.images[bob].src=john;
})

puis, une fois l'image changée, la div ce rouvre (effect.Appear).

si quelqu'un peu m'aider, ce serait super.

Salut

Annadrill
mercredi 19 mars 2008 à 12:00:05 | Re : effet ajax puis changer image puis effet ajaxy

bultez

Membre Club


Bonjour,

    c'est quoi un "effect.fade" ou effet ajax ou affet ajxy ?

function loadImage(bob, john){
  fermer le div avec l'effet voulu;
 document.images[bob].src=john;
 réouvrir le div;
}


                Cordialement            Bul         [mon Site]     [M'écrire]
mercredi 19 mars 2008 à 12:29:52 | Re : effet ajax puis changer image puis effet ajaxy

Zobibol

Membre Club
Salut, il serait sympas de préciser ce que tu utilises comme librairie Ajax ... si c'est Scriptaculous, dans les transitions tu as accès à une propriété : oncomplete :
exemple:
new Effect.Fade(
    document.getElementById('demo-all'),
    {
        oncomplete:function(){
           // Je fais ce que je veux ici une fois que la transition est finie (bah oui)
        }
    }
    );

Mais si ce n'est pas scriptaculous, je seche !

[o-_-o]
mercredi 19 mars 2008 à 14:19:22 | Re : effet ajax puis changer image puis effet ajaxy

XtremDuke
Salut,

Même remarque que Zobibol. Ce n'est pas problème compliqué à résoudre mais il nous faudrait le type de 'framework' que tu utilises.
mercredi 19 mars 2008 à 19:45:45 | Re : effet ajax puis changer image puis effet ajaxy

Annadrill
Rebonjour, merci des réponses si rapides, et excusez mon manque d'info...

alors j'utilise Scriptaculous

donc je pourrais faire qqch dans le genre:

new Effect.Fade(
    document.getElementById('demo-all'),
    {
        oncomplete:function(){ 
         function loadImage(bob, john){
         document.images[bob].src=john;
               }
         }
    }
    );

sauf que ensuite je sèche pour faire réapparaitre la div.
navré mais je suis encore qu'un petit novice dans le genre.

Merci

Annadrill
jeudi 20 mars 2008 à 10:07:24 | Re : effet ajax puis changer image puis effet ajaxy

XtremDuke
Re,

L'exemple suivant créé un fading de l'image, charge une nouvelle image, puis, lorsque celle-ci est chargée, la fait apparaitre.

new Effect.Fade('demo-all', {
            onComplete: function(){
                var newImg = new Image;
                newImg.onload = function(){
                    $('bob').src = newImg.src;
                    new Effect.Appear('demo-all');
                }
                newImg.src = 'url_image';
            }
});
jeudi 20 mars 2008 à 11:47:02 | Re : effet ajax puis changer image puis effet ajaxy

Annadrill

Re,

alors merci déjà pour ça,
a vrais dire je peine à m'ensortir,
pour essayer d'être plus clair, voici ce que je veux faire:

avoir un lien(bouton) ou plusieurs qui contient l'url de l'image à changer, et qui, lorsque on clique dessus,
fait un fading de l'image que l'on voit, change l'image avec l'url contenue dans le lien,
puis puis fait apparaître l'image.

il me semble que le code au dessus devrait le faire mais je ne sais comment le manipuler.

ma fonction de base était:
   function loadImage(bob, john){
         //le lien genre:<a href="#" onclick="loadImage('name de l'img', 'adresse de la src')">
 document.images[bob].src=john;
}

voici ma page:

<head>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js"></script>
<script type="text/javascript" src="scripts/effects.js"></script>

<!--le script que je peine à comprendre-->

<script type="text/javascript">
function changeImage(one,two){
       new Effect.Fade('demo-all', {
                  onComplete: function() {
                      var newImg = new Image;
                         newImg.onload = function(){
                                   $('one').src = newImg.src;
                                   new Effect.Appear('demo-all');
                              }
                          newImg.src = 'two';
                       }
                });
}
</script>

</head>

<body>

<!--le bouton contenant l'id et l'url de l'image qui doit être chargée-->

<div id="bouton"><a href="#" onclick="changeImage('limage','imgsite/droite.png');">lebouton1</a></div>
<br /><br />
<!--la div contenant l'image-->

<div id="demo-all"><img src="imgsite/gauche.png" name="limage" /></div>

</body>
</html>
 
Merci pour l'aide
Annadrill
jeudi 20 mars 2008 à 12:04:01 | Re : effet ajax puis changer image puis effet ajaxy

XtremDuke
Voilà ta fonction "changeImage" generalisée :

function changeImage(imgTarget, imgUrl){
    new Effect.Fade(imgTarget, {
        onComplete: function(){
            var newImg = new Image;
            newImg.onload = function(){
            $(imgTarget).src = newImg.src;
                new Effect.Appear(imgTarget);
            }
            newImg.src = imgUrl;
        }
    });
}

Par contre, petite modif à faire :

<div id="demo-all"><img src="imgsite/gauche.png" id="limage" /></div>
jeudi 20 mars 2008 à 13:16:18 | Re : effet ajax puis changer image puis effet ajaxy

Annadrill

Alors je me retrouve avec cela:

function changeImage(imgTarget, imgUrl){
    new Effect.Fade(imgTarget, {
        onComplete: function(){
            var newImg = new Image;
            newImg.onload = function(){
            $(imgTarget).src = newImg.src;
                new Effect.Appear(imgTarget);
            }
            newImg.src = imgUrl;
        }
    });
}

puis ensuite cela:

<div id="bouton"><a href="#" onclick="changeImage('limage','imgsite/droite.png');">lebouton1</a></div>
<br /><br />

<div id="demo-all"><img src="imgsite/gauche.png" id="limage" /></div>

et le résultat est une fenêtre avec cela: stack overflow at line: 0

et si je change l'effet par un BlindUp/BlindDown, l'image ce ferme mais ne se rouvre pas...

Annadrill
jeudi 20 mars 2008 à 14:31:42 | Re : effet ajax puis changer image puis effet ajaxy

XtremDuke
Re,

Vraiment désolé, j'ai fait une faute. Je m'en mèle les pinceaux avec tous ces frameworks... :(
Ce n'est pas 'onComplete' mais 'afterFinish'.

Je t'ai mis un exemple en ligne où tu pourras regarder la source :

http://siteecom.net/tmp/annadrill/index.html

1 2

Cette discussion est classée dans : changer, image, ajax, effet, div

Répondre à ce message

Sujets en rapport avec ce message

changer des images dans un menu [ par bblein ] j'élabore un petit menu où lorsque je clique sur une image-rubrique, une flèche (image) vient se placer dessous pour indiquer que l'on se situe bien d changer background image onmouseover [ par fcdconnect ] bonjour comment changer le background image d'une td onmouseoveraparrament le onMouseOver='this.style.background ne fonctionne pas merci d'avance Valider et changer une image en un seul clic !!! [ par dmprs ] Bonjour,Lorsque que je clique sur le lien "Valider" je souhaiterais a la fois récupérer les informations d'un textarea et changer une image en une aut Changer image dans la meme fenetre [ par metis15 ] Bonjour,je cherche un JS qui marcherait dans NN 4.78 et + :Genre le 15867, changer une grande image dans la page en cliquant un bouton, ou des images repertoire de base (root) [ par SemBy ] existe-il une fonction qui permet de definir un repertoire de base?problem:je developpe un editeur de site web en utilisant un div editable,d'abord je changer l image de fond d une cellule d un tableau dans une frame [ par Poulipe ] Bonjour,je suis incapable de trouver comment changer l image de fond d une cellule dans ma frame du haut....j ai essayer plusieurs trucs style :parent Changer une image sans recharger la page [ par ericsoussan ] Bonjour,Je developpe actuellement un site sur FrontPage (HTML).En raison du nombre important de photos. Il me faudrai un outil permettant à l'utilisat Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur Un SEUL background [ par floflotz ] bonjour à tous,je souhaite mettre une image en background sur mon site. Le problème est que quand j'applique la propriété background à mon body, il mu Changer l'image d'arrière plan [ par cyBerpOmmer ] voila, j'ai un site à réaliser et il faut que l'image en arrière plan change. Je ne voudrai pas avoir à recharger la page mais simplement avoir à exec


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy S
Entre 529€ et 529€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,608 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)