11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Image préchargée et affichée au clique sans recharger la page

Bonjour,

Je souhaites afficher des photos dans un emplacement sans recharger la page. J'ai donc X vignettes cliquable et quand on clique dessus, cela afficha la photo correspondante. Pour le moment j'utilise un petit javascript qui change l'adresse de l'image mais je ne trouve pas cela terrible car pour l'impression, je souhaite avoir toute les images.

<div id="left_res"> <img name="photo_produit"  src="images/photo-interieur-0.jpg" alt="Photo d'un appartement de type 3 meubl&eacute;"   /> 
      <div class="foot_nav_resultat"> 
        <h2 class="titre">Photos</h2> 
        <div class="action_res"> 
          <ul id="vignette_res"> 
            <li><a href="#" title="Cliquez pour visualiser la photo en taille normale" onclick="document.photo_produit.src='images/photo-interieur-0.jpg'"><img src="images/photo-interieur-0-v.jpg" alt="Chambre à coucher" width="20" height="20" /></a></li> 
            <li><a href="#" title="Cliquez pour visualiser la photo en taille normale" onclick="document.photo_produit.src='images/photo-interieur-1.jpg'"><img src="images/photo-interieur-1-v.jpg" alt="Chambre à coucher" width="20" height="20" /></a></li> 
            <li><a href="#" title="Cliquez pour visualiser la photo en taille normale" onclick="document.photo_produit.src='images/photo-interieur-2.jpg'"><img src="images/photo-interieur-2-v.jpg" alt="Chambre à coucher" width="20" height="20" /></a></li> 
            <li><a href="#" title="Cliquez pour visualiser la photo en taille normale" onclick="document.photo_produit.src='images/photo-interieur-3.jpg'"><img src="images/photo-interieur-3-v.jpg" alt="Chambre à coucher" width="20" height="20" /></a></li> 
            <li><a href="#" title="Cliquez pour visualiser la photo en taille normale" onclick="document.photo_produit.src='images/photo-interieur-4.jpg'"><img src="images/photo-interieur-4-v.jpg" alt="Chambre à coucher" width="20" height="20" /></a></li> 
          </ul> 
        </div> 
      </div>


En fait je voudrai précharger mes X images en hidden et ensuite faire changer la classe quand on clique pour les afficher. Je les chargerais en bas de page avant mon /BODY

Mais comment, je ne sais pas !

Si vous avez des pistes ou des URL de trucs comme cela que vous avez déja vu, je suis preneur...merci et bon dimanche !
Modifié le 09 Jan 2005 - 12:07
Je suis pas certain de comprendre. Tu veux afficher toutes les images en taille réelle dans la page et les cacher, et au click sur la miniature afficher la photo ???

C'est assez énorme comme truc, ça va te faire une page hyper lourde à charger.

Ce que tu peux faire, c'est ajouter un préchargement d'image javascript dans ton script de gestion de miniatures, dans le window.onload, tu ajoutes une fonction qui précharge les tailles réelles des miniatures.

Je suppose que ton script actuel doit être du même style que celui ci, mais au cas où :
http://www.elmoustikoblog.net/tutoriels/js/galerie/

Tu peux ajouter une fonction de préchargement qui devrait te faire obtenir l'effet voulu.
Voila la page en question : h++p://www.lavieenrosedejulio.com/tom/fiche-resultat.htm (C'est volontaire si je n'ai pas mis le lien)

Le script d'Olivier me semble parfait.

Merci beaucoup
Modifié le 09 Jan 2005 - 11:53
T'as ajouté le preload à mon script ou pas ? Si oui, tu peux mettre le code là, je le rajouterais à mon tuto en indiquant que tu es l'auteur.
C'est très gentil de ta part mais pas nécéssaire.

Je charge en effet les images en bas de page comme cela je peux les faire ressortir en feuille de style PRINT car ce sont des fiches immobilière et il peux être intéressant de les faire apparaître pour bien se rappeler de l'annonce.

C'est juste un preload à la raphaël avant le </body>, le copyright lui revient Smiley smile

Bon dimanche
Sujet clos
Aller à