Se connecter / S'enregistrer

Résolu Besoin d'aide diapo javascript

Solutions (11)
Tags :
  • Javascript
  • Programmation
|
Bonjour!

Est-il possible de faire dans Javascript :

Si ma variable a une "x" valeur, et que l'utilisateur clique au moment ou cette valeur est "x", aller à tel site web.

Un truc du genre :

if (j==3)

onclick, goto("www.infos-du-net.com")

Parce que j'ai actuellement un tableau qui inclut des images ce qui me fait dans le fond, un diaporama. Et je commence un compteur à j=0 pour la première image. Quand je suis sur la première image, je voudrais que lorsqu'on clique dessus, on aille à un site web pré-déterminer.

Je suis totalement noob en programmation alors, si vous pouviez m'aider ce serait gentil :) .
Contenus similaires
Meilleure solution
partage
, Modérateur |
En fait, si tu ne peux pas cliquer sur une image, c'est qu'il n'y a pas de <a> autour de l'image... c'est pour ça que je te spécifiais ça dans mon message précédent.

Et je viens de copier mon code avec un lien <a href="..."><img src="..." name="SlideShow" /></a> et ça fonctionne...

(Double clique sur la zone de code pour supprimer les numéros de lignes et pour pouvoir copier plus facilement)
  1. <html>
  2. <head>
  3. <title>test</title>
  4. <script language="JavaScript">
  5. // Ceci est la vitesse du déroulement des images, plus le nombre est petit, plus la vitesse est grande //
  6. var slideShowSpeed = 2000;
  7. var crossFadeDuration = 3;
  8. // Créons un tableau //
  9. var Pic = new Array();
  10. // Pour chaque élément, on créé un nouveau tableau qui contient le nom de la photo et son lien
  11. Pic[0] = new Array('photo01.gif', 'http://www.google.fr');
  12. Pic[1] = new Array('photo02.gif', 'http://www.infos-du-net.com');
  13. Pic[2] = new Array('photo03.gif', 'http://www.presence-pc.com');
  14. var t;
  15. var j = 0;
  16. // La variable "p" est la variable qui dit le nombre d'éléments dans le tableau //
  17. var p = Pic.length;
  18. var preLoad = new Array();
  19. for (i = 0; i < p; i++){
  20. preLoad[i] = new Image();
  21. preLoad[i].src = Pic[i][0];
  22. }
  23.  
  24. function runSlideShow(){
  25. if (document.all){
  26. document.images.SlideShow.style.filter="blendTrans(duration=2)";
  27. document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
  28. document.images.SlideShow.filters.blendTrans.Apply() ;
  29. }
  30.  
  31. document.images.SlideShow.src = preLoad[j].src;
  32. // Et on modifie l'attribut href du noeud parent (<a> ) afin de mettre le lien
  33. document.images.SlideShow.parentNode.href = Pic[j][1];
  34.  
  35. if (document.all){
  36. document.images.SlideShow.filters.blendTrans.Play();
  37. }
  38.  
  39. j = j + 1;
  40. if (j > (p-1)) j=0;
  41. t = setTimeout('runSlideShow()', slideShowSpeed);
  42. }
  43. </script>
  44. </head>
  45. <body onload="runSlideShow();">
  46. <a href="#"><img src="..." name="SlideShow" /></a>
  47. </body>
  48. </html>
  • Commenter cette solution |
Score
0
òh
òi
|
Je crois que je saisi.

Merci encore pour tout! Tout ça m'a été très utile :) . Merci grandement. Premier post sur ce site et vraiment, ça me donne bien envie d'utiliser ce site comme ressources pour mes petits problèmes "internet" en général..lorsque je me serai bien cassé la tête héhé.

Merci merci merci :) 

  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Le # ne sert à rien, c'est juste la valeur par défaut quand rien n'est spécifié.
La valeur du href est modifiée par le javascript, afin de définir sa valeur par la valeur du tableau.
  • Commenter cette réponse |
Score
0
òh
òi
|
Ohh...! C'est magique!

Je ne comprends pas vraiment pourquoi ça fonctionne en rajoutant le href. le # veut dire quoi? Va chercher dans le tableau le lien? C'est totalement magique à mes yeux, je n'y comprends rien hihi.

Mais au moins ça marche à merveille!!


Tout fonctionne je suis vraiment désolée. J'ai l'air un peu lente desfois.

MERCI MILLE FOIS !!! Ça faisait des jours que j'étais préoccupé par ce truc. Merci beaucoup!! :)  C'est génial ce site. Et merci beaucoup à toi, OmaR.
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par Erkzilag.
  • Commenter cette réponse |
Score
0
òh
òi
|
Bonjour,

Je connais très bien le html. Je sais donc que pour créer un lien lorsqu'on clique sur une image, il faut entourer cette image par les balise a href...

Mais pour le js, je suis totalement perdue. En fait je ne voulais que l'apprendre pour créer une diapo...alors y'a plein de notions que je ne comprends pas vraiment. J'ai copier par-ci par-là des petits bout de code et compris en général, mais je ne comprends pas à 100%

Je semi-comprenais mon "script" avant, mais là avec tout les tableaux, mon cerveau n'est pas sûre de comprendre comment ils fonctionnent.

Lorsque je copie-colle exactement le code modifié que tu m'as si gentiment donné (Merci d'ailleurs de m'aider), ça ne produit pas d'erreur lorsque j'ouvre ma page avec le diaporama, mais lorsque je clique dessus, ça ne fait rien de spécial.

Je ne sais pas si je peux l'uploader sur un serveur. Si tu veux voir ce que ça fait, tu n'as qu'à copier le script et le mettre entre les balise html pour faire une page web normal et rajouter nimporte quel photo. Je pense que ce serait moins compliqué.

Mais tu n'as pas vraiment à le voir pour comprendre que, lorsque je copie-colle le code exact, il n'y a pas d'erreur, mais je ne peux pas cliquer sur les images.

Fallait-il que j'ajoute quelque chose d'autres?

Je suis totalement perdue :( 

  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Comme je l'ai écrit en commentaire juste au dessus, oui new Array() permet de créer un tableau.
Et oui, on créé un tableau par image, ce tableau contient l'URL de l'image et son lien associé. Et ces tableaux d'images sont stockés dans un tableau (ce que tu avais déjà).

Le code le comprend grâce au lien <a> que tu as mis autour de l'image.
Est-ce que c'est possible que tu uploades ta page sur un serveur que l'on voit en live ce que tu as fait, et comment gérer ça.


Edit: et pour un peu plus d'informations.
Un <a href="..."><img src="..." /></a> permet de créer un lien lorsque l'on clique sur l'image.
Et l'URL est défini dans l'attribut href.
Et cet attribut, on le change automatiquement lorsque l'on change l'image, grâce à la ligne (enfin, à condition que j'ai bien fait ça :p ) :
document.images.SlideShow.parentNode.href = Pic[j][1];

document.images.SlideShow est ton <img>
parentNode permet de prendre le noeud parent, soit le <a>
et href permet de définir l'URL du lien, et ici, on met l'URL associé à l'image actuelle.
  • Commenter cette réponse |
Score
0
òh
òi
|
Bonjour!

En fait, ça ne fonctionne pas. Et je trouve ta méthode étrange. La fonction New Array ne sert pas à créer de nouveaux tableaux??

Tu mettrais un tableau pour chaque image??

Et comment le code "comprendrait" que c'est uniquement lorsqu'on clique dessus qu'on veut que ça nous redirige vers une autre page web?

Merci de ton aide, mais peux-tu m'expliquer s'il te plaît?

J'ai testé et ça ne fonctionne pas :( .

Merci pour tout tout de même.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Le plus simple serait certainement d'ajouter un lien <a> autour de ton image, quelque chose dans ce genre:
  1. <a href="#"><img src="..." name="SlideShow" /></a>


Et ensuite, dans le code javascript, avoir quelque chose dans ce genre : (non testé)
  1. <script language="JavaScript">
  2.  
  3.  
  4. // Ceci est la vitesse du déroulement des images, plus le nombre est petit, plus la vitesse est grande //
  5. var slideShowSpeed = 2000;
  6.  
  7. var crossFadeDuration = 3;
  8.  
  9. // Créons un tableau //
  10. var Pic = new Array();
  11.  
  12. // Pour chaque élément, on créé un nouveau tableau qui contient le nom de la photo et son lien
  13. Pic[0] = new Array('photo0.jpg', 'http://www.google.fr');
  14.  
  15. Pic[1] = new Array('photo1.jpg', 'http://www.infos-du-net.com');
  16.  
  17. Pic[2] = new Array('photo2.jpg', 'http://www.presence-pc.com');
  18.  
  19. var t;
  20.  
  21. var j = 0;
  22.  
  23. // La variable "p" est la variable qui dit le nombre d'éléments dans le tableau //
  24.  
  25. var p = Pic.length;
  26.  
  27. var preLoad = new Array();
  28.  
  29. for (i = 0; i < p; i++){
  30.  
  31. preLoad[i] = new Image();
  32.  
  33. preLoad[i].src = Pic[i][0];
  34.  
  35. }
  36.  
  37. function runSlideShow(){
  38.  
  39. if (document.all){
  40.  
  41. document.images.SlideShow.style.filter="blendTrans(duration=2)";
  42.  
  43. document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
  44.  
  45. document.images.SlideShow.filters.blendTrans.Apply() ;
  46.  
  47. }
  48.  
  49. document.images.SlideShow.src = preLoad[j].src;
  50.  
  51. // Et on modifie l'attribut href du noeud parent (<a>) afin de mettre le lien
  52. document.images.SlideShow.parentNode.href = Pic[j][1];
  53.  
  54. if (document.all){
  55.  
  56. document.images.SlideShow.filters.blendTrans.Play();
  57.  
  58. }
  59.  
  60. j = j + 1;
  61.  
  62. if (j > (p-1)) j=0;
  63.  
  64. t = setTimeout('runSlideShow()', slideShowSpeed);
  65.  
  66.  
  67. }
  68.  
  69. </script>
  • Commenter cette réponse |
Score
0
òh
òi
|
Voici mon script :

  1. <script language="JavaScript">
  2.  
  3.  
  4. // Ceci est la vitesse du déroulement des images, plus le nombre est petit, plus la vitesse est grande //
  5. var slideShowSpeed = 2000
  6.  
  7. var crossFadeDuration = 3
  8.  
  9. // Créons un tableau //
  10. var Pic = new Array()
  11.  
  12. Pic[0] = 'photo0.jpg'
  13.  
  14. Pic[1] = 'photo1.jpg'
  15.  
  16. Pic[2] = 'photo2.jpg'
  17.  
  18. var t
  19.  
  20. var j = 0
  21.  
  22. // La variable "p" est la variable qui dit le nombre d'éléments dans le tableau //
  23.  
  24. var p = Pic.length
  25.  
  26. var preLoad = new Array()
  27.  
  28. for (i = 0; i < p; i++){
  29.  
  30. preLoad[i] = new Image()
  31.  
  32. preLoad[i].src = Pic[i]
  33.  
  34. }
  35.  
  36. function runSlideShow(){
  37.  
  38. if (document.all){
  39.  
  40. document.images.SlideShow.style.filter="blendTrans(duration=2)"
  41.  
  42. document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
  43.  
  44. document.images.SlideShow.filters.blendTrans.Apply()
  45.  
  46. }
  47.  
  48. document.images.SlideShow.src = preLoad[j].src
  49.  
  50. if (document.all){
  51.  
  52. document.images.SlideShow.filters.blendTrans.Play()
  53.  
  54. }
  55.  
  56. j = j + 1
  57.  
  58. if (j > (p-1)) j=0
  59.  
  60. t = setTimeout('runSlideShow()', slideShowSpeed)
  61.  
  62.  
  63. }
  64.  
  65. </script>



Je voudrais donc pour chaque images (Photo0, photo1...) avoir des liens différents. Quand on cliquera sur la premiere photo (j=0) on serait référé à un site, par exemple, www.google.com, et quand on clique sur la deuxième (j=1), on serait référé à ce site-ci (www.infos-du-net.com)

Merci de m'aider!
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Le plus simple, ça serait de nous donner un lien vers ta page, qu'on voit ce que tu as, ça sera plus simple pour te répondre
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS