Titre: Changer une image sans recharger la page
Posté par: Vaz le le 25-12-2004 a 15:31:20
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.
Merci |
Titre: Re:Changer une image sans recharger la page
Posté par: bigornot le le 25-12-2004 a 19:57:10
utilise les iframes ...
le lien à aura un target="iframe", et dans l'iframe, il y aura l'image ... |
Titre: Re:Changer une image sans recharger la page
Posté par: zano le le 29-01-2005 a 03:03:44
<html>
<body>
<center>
<img src="01.jpg" onMouseover="document.images['vue'].src='mini_01.jpg'">
<img src="02.jpg" onMouseover="document.images['vue'].src='mini_02.jpg'">
<BR>
<img src="00.jpg" name=vue>
</center>
</body>
</html> |
Titre: Re:Changer une image sans recharger la page
Posté par: zano le le 29-01-2005 a 03:10:44
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
<html><body><center>
<img src="01.jpg" onclick="document.images['vue'].src='mini_01.jpg'">
<img src="02.jpg" onclick="document.images['vue'].src='mini_02.jpg'">
<BR>
<img src="00.jpg" name=vue>
</center></body></html> |
Titre: Re:Changer une image sans recharger la page
Posté par: zano le le 29-01-2005 a 03:25:41
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>
au plaisir |
Titre: Re:Changer une image sans recharger la page
Posté par: Frodon le le 20-02-2005 a 10:15:44
Bonjour,
Merci pour ce code précieux que je cherchais également
Comment peux-t-on appliquer ce changement sur deux images identiques ?
Si je place ce code:
<html>
<body>
<center>
<a onclick="document.images['vue'].src='photo_01.jpg'">Couleur1</a>
<a onclick="document.images['vue'].src='photo_02.jpg'">Couleur2</a>
<br>
<img src="photo_03.jpg" name=vue>
<img src="photo_03.jpg" name=vue>
</center>
</body>
</html>
En fait il fait juste le changement sur la deuxième image mais pas la première ? Y-a-t-il une solution ?
Merci
|
Titre: Re:Changer une image sans recharger la page
Posté par: zano le le 23-03-2005 a 22:32:32
il y a l'image 'vue'
et l'image 'vue_b' puis l'image 'vue_c' ainsi de suite
c'est comme vous voulez pour les identificateurs
louviou
|
Titre: Re:Changer une image sans recharger la page
Posté par: zano le le 23-03-2005 a 22:37:59
ou alors il faut deux images identiques
et les les nommer différemment
<img src="03a.jpg" name="vue1">
<img src="03b.jpg" name="vue2">
louviou
|
Titre: Re:Changer une image sans recharger la page
Posté par: Frodon le le 23-03-2005 a 22:47:17
| Merci beaucoup vous êtes géniaux ;) |
Titre: Re:Changer une image sans recharger la page
Posté par: zano le le 23-03-2005 a 23:02:32
pour être plus clair on écrit la page suivante:
<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>
exemple à http://louviou.net/JV/voiture/voiture.html
louviou |
Titre: Re:Changer une image sans recharger la page
Posté par: jb_gfx le le 24-03-2005 a 02:17:50
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) :
http://www.elmoustikoblog.net/tutoriels/js/galerie/ |
Titre: Re:Changer une image sans recharger la page
Posté par: Mahel le le 26-03-2005 a 15:26:33
| http://www.alsacreations.com/articles/imgreactive/ !!!! |
Titre: Re:Changer une image sans recharger la page
Posté par: jb_gfx le le 29-03-2005 a 15:29:24
| ça n'est pas du tout la même chose... |
Titre: Re:Changer une image sans recharger la page
Posté par: zano le le 03-04-2005 a 09:11:11
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 |
Titre: Re:Changer une image sans recharger la page
Posté par: Chmel le le 13-04-2005 a 16:52:50
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 (http://moncastel.9online.fr/gimg/gimg.htm)
:D |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|