Sujet: Changer une image sans recharger la page (Lu 2123 fois)
Changer une image sans recharger la page
« sur: le 25-12-2004 a 15:31:20 »
Vaz
Invité
Bonjour,
Je developpe actuellement un site sur FrontPage (HTML). En raison du nombre important de photos. Il me faudrai un outil permettant à l'utilisateur de les visionner sur la meme page (dans une zone reservée), en cliquant sur un lien ou une iconne.
Par exemple, sur le site de peugeot (www.peugeot.fr), c'est le meme systeme qui permet de choisir la couleur de la voiture.
l'exemple précédent affiche une image en passant la souris sur son imagette ------- alors que l'exemple suivant affiche l'image en cliquant sur une imagette
ou encore en cliquant sur un lien (chiffre) <html> <body> <center> <a onclick="document.images['vue'].src='photo_01.jpg'">01</a> <a onclick="document.images['vue'].src='photo_02.jpg'">02</a> <BR> <img src="photo_00.jpg" name=vue> </center> </body> </html>
<html><body> <!--- On affiche une image admettons une voiture blanche par --> <img src="voiture_blanche.jpg" name=vue><BR> <!--- vue désigne l'image affichée (centrée,bordée,etc..)---> Choisissez une couleur<BR> <!--- puis on fait des liens rouge, verte, jaune, etc... -------> <!--- et on dit qu'en cliquant sur un lien, la vue change d'image par ---> <a onclick="document.images['vue'].src='voiture_rouge.jpg'">rouge</a><BR> <a onclick="document.images['vue'].src='voiture_verte.jpg'">verte</a><BR> <a onclick="document.images['vue'].src='voiture_jaune.jpg'">jaune</a><BR> <!--- etc... ---> </body></html>
Je déconseillerai quand même d'utiliser ce code tel quel, si le principe est efficace la mise en oeuvre tient trop de la bidouille.
Ce tutoriel et code source utilise les mêmes fonctions et principe mais est bien mieux programmé (séparation du javascript de la partie HTML, fonctionne même si javascript est désactivé (accessible), trés compatible) :
Tiens au fait on peut même changer une séquence.WMV sur une page sans recharger la page. Exemple à: http://louviou.net/JV/corrida/corrida.html où il y a trois clips de la corrida de Pâques à Arles Le clip est appelé par <img dynsrc="source.WMV"> alors que dans la page d'accueil http://louviou.net/index.html le clip est appelé par <embed src="source.WMV"> louviou
« Dernière Édition: le 03-04-2005 a 20:04:29 par zano »
La version de zano nécessite que toutes les images aient la mème dimension. Une seul image est chargée au départ, temps de chargement rapide. Celle du tutoriel, précharge toutes les images à en voir le source. Il faut des images pas trôp lourdes ou l'ADSL.
J'ai fait une version ou les images ne sont pas préchargées et elles se redimentionnent automatiquement en fin de chargement si ça peut intéresser : http://moncastel.9online.fr/gimg/gimg.htm
Auteur 
