script photo : difficile à expliquer (dsl pour le titre)

script photo : difficile à expliquer (dsl pour le titre) - HTML/CSS - Programmation

Marsh Posté le 12-12-2004 à 18:21:02    

Bonjour,
voila j'ai fait une page avec 2 cadres un pour des miniatures photos et l'autre pour afficher les photos. J'aimerai que lorsqu'on clique sur une miniature la photo s'affiche dans l'autre cadre sans pour autant créer à chaque fois une page différente pour la photo agrandie.
ça serait un code genre :
quand je clique sur mini1.jpg dans cadre 1, photo1.jpg apparait dans cadre 2.
Merci d'avance

Reply

Marsh Posté le 12-12-2004 à 18:21:02   

Reply

Marsh Posté le 12-12-2004 à 19:27:06    

avec du javascript, ça doit être faisable. Tu charges tes 2 images en donnant la proprité cachées à la 2°, et tu changes cette propriété pour visible quand on clique sur la première


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 12-12-2004 à 19:59:49    

le seul souci c'est que je ne sais pas programmer, de plus je ne comprends pas vraiment ce que tu veux dire (propriété cachée ?)

Reply

Marsh Posté le 12-12-2004 à 20:19:34    

tu appliques à ton image 2 la propriété CSS :
visibility: hidden
 
et quand tu cliques sur la première, tu changes cette propriété pour visibility: visible par un javascript


Message édité par Mjules le 12-12-2004 à 20:20:04

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 12-12-2004 à 20:50:08    

tu peux me faire un exemple avec plusieurs images

Reply

Marsh Posté le 12-12-2004 à 22:09:50    

fait rapidement :
http://mjules.free.fr/captures/test.htm
 
si tu cliques sur l'image en haut, une image apparait dans le cadre en bas
 
le code :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  7. <title>test image</title>
  9. // ici la CSS ou j'applique le style hidden (caché) à l'élément que je veux planquer
  10. <style type="text/css" media="screen"><!--
  11. #result {
  12. visibility: hidden;
  13. }
  14. #bord {
  15. border: 1px solid black;
  16. }
  17. --></style>
  19. // ici le javascript qui fait apparaitre l'élément
  20. <script type="text/javascript">
  21. <!--
  22. function montre(id) {with(document.getElementById(id).style) {visibility="visible"; }}
  23. //-->
  24. </script>
  26. </head>
  28. <body>
  29. <p>
  30. <img id="clic" onclick="javascript:montre('result');"alt="image à cliquer" src="noSMS.png" />
  31. // là la zone ou l'on doit cliquer (le onclick sur la balise)
  33. </p>
  35. <div id="bord">
  36. <img id="result" alt="image qui apparait" src="noSMS2.png" />
  37. </div>
  38. </body>
  40. </html>


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 13-12-2004 à 10:19:05    

j'ai regardé ton code et il y a deux choses qui m'interpellent, d'abord tu as fait ton exemple sur la même page, moi j'ai deux pages car deux cadres un pour les miniatures et l'autre pour la photo j'ai l'impression que ton code marche seulement si la miniature est dans la page de la photo agrandie. Sinon est ce que tu peux le faire pour plusieurs photos, dans ton exemple tu n'en a qu'une.
Merci d'avance et merci pour ce que tu as déjà fait :)

Reply

Marsh Posté le 13-12-2004 à 12:24:53    

lebarbo a écrit :

j'ai regardé ton code et il y a deux choses qui m'interpellent, d'abord tu as fait ton exemple sur la même page, moi j'ai deux pages car deux cadres un pour les miniatures et l'autre pour la photo j'ai l'impression que ton code marche seulement si la miniature est dans la page de la photo agrandie. Sinon est ce que tu peux le faire pour plusieurs photos, dans ton exemple tu n'en a qu'une.
Merci d'avance et merci pour ce que tu as déjà fait :)


tu as une page ou 2 ? parce que dans ton premier message tu dis :

Citation :

voila j'ai fait une page avec 2 cadres un pour des miniatures photos et l'autre pour afficher les photos.


 
ou alors on a pas la même définition des cadres ; si tu parles de (i)frames, je ne peux pas t'aider.
 
C'est faisable pour plusieurs photos, mais je n'ai pas assez de connaissances en javascript pour pouvoir te faire un exemple correct.
 
et effectivement, la limitation de mon code c'est qu'il faut charger l'image même si elle n'est pas affichée.


Message édité par Mjules le 13-12-2004 à 12:25:10

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 13-12-2004 à 13:33:14    

oui dans mon message en effet j'ai peut-être fait un abus de langage en disant que j'avais une page, en  fait j'ai une page avec 2 cadres qui ont chacun leur page. Excuse moi
Si quelqu'un a une autre idée

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed