Aide pour un javascipt

vitriol Messages postés 4 Statut Membre -  
vitriol Messages postés 4 Statut Membre -
Bonjour,
J'ai ce script:

<script language="javascript">
var delay=1000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="1.jpg"
randomimages[1]="5.jpg"
randomimages[2]="2.jpg"
randomimages[3]="4.jpg"
randomimages[4]="3.jpg"
randomimages[5]="6.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

et je voudrait pouvoir mettre un lien html sur chacune des images.
Comment faire svp.
Merci

5 réponses

  1.
    [Dal] Messages postés 6122 Date d'inscription   Statut Contributeur Dernière intervention   1 108
     
    Salut vitriol,

    Tu fais comme cela pour créer un lien hypertexte à partir d'une image :

    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_link

    Donc, modifie le html généré par la ligne document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') en mettant <img> entre les tags <a> et </a> délimitant ton lien.

    Par exemple : 

    document.write('<a href="https://www.commentcamarche.net/"> <img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'" /> </a>')

    (non testé)

    Dal
    2
  2. vitriol Messages postés 4 Statut Membre
     
    Dal merci de ta réponse,
    tu me dis que je dois mettre tous les liens hypertexte comme tu le décrit... mais comment le script va reconnaite que tel lien va avec tel image???
    0
    1. [Dal] Messages postés 6122 Date d'inscription   Statut Contributeur Dernière intervention   1 108
       
      Tu n'avais pas dit qu'il devait s'agir d'un lien différent par image.

      Tu peux créer un tableau de liens, stocker la valeur de l'index généré aléatoirement et l'appliquer au deux tableaux.

      Comme le script fait une rotation, tu devras aussi gérer la concordance lors de la rotation ultérieure. Il faudra aussi stocker la valeur du nouvel index généré aléatoirement et que tu mettes un name= aussi à la balise <a> pour pouvoir accéder à sa propriété href :

      https://www.w3schools.com/jsref/prop_base_href.asp


      Dal
      0
  3. Reivax962 Messages postés 3742 Statut Membre 1 011
     
    Si tu veux avoir un lien spécifique pour chaque image, alors il faut instancier un nouveau tableau qui contienne les liens que tu souhaites, et appliquer la méthode de Dal.
    Comme ceci : 

    <script language="javascript">
var delay=1000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()
var liensimages=newArray()

randomimages[0]="1.jpg"
randomimages[1]="5.jpg"
randomimages[2]="2.jpg"
randomimages[3]="4.jpg"
randomimages[4]="3.jpg"
randomimages[5]="6.jpg"

liensimages[0]="page1.html"
liensimages[1]="page5.html"
liensimages[2]="page2.html"
liensimages[3]="page4.html"
liensimages[4]="page3.html"
liensimages[5]="page6.html"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

var nombre = Math.floor(Math.random()*(randomimages.length))

document.write('<a href="' + liensimages[nombre] + '"><img name="defaultimage" src="'+randomimages[nombre]+'"></a>')

etc.


    Par contre, je sais bien que le javascript ne réclame pas obligatoirement des ; à la fin des instructions, mais ce serait tellement plus clair...

    Xavier
    0
    2. Reivax962 Messages postés 3742 Statut Membre 1 011
       
      Aaah, oui, j'avais lu le code très rapidement, par « rotation » j'avais compris traitement d'image, pas déplacement... Donc lien invariant ^^'
      Merci d'avoir complété :)
      0
  4. vitriol Messages postés 4 Statut Membre
     
    Bonjour les aidants,

    En effet je viens de tester l'ajout de l'ajout du nouveau tableau tout est bien par contre a cause de la rotation il arrive que quand je clique l'image il me donne le mauvais lien... évidemment j'ai ralentis le délais mais les lien comme disait Dal "il faut aussi gérer la rotation des liens dans la suite du code." comment on fait ça?
    et comment avec les liens on revoie vers ailleurs en ouvrant une nouvelle page sans fermer l'ancienne.

    Merci
    0
    1. [Dal] Messages postés 6122 Date d'inscription   Statut Contributeur Dernière intervention   1 108
       
      Salut vitriol,

      Essayes cela. 

      <script language="javascript">  
var delay=1000; //set delay in miliseconds  
var curindex=0;  

var randomimages=new Array();  
randomimages[0]="1.jpg";  
randomimages[1]="5.jpg";  
randomimages[2]="2.jpg";  
randomimages[3]="4.jpg";  
randomimages[4]="3.jpg";  
randomimages[5]="6.jpg";  

var liensimages=new Array();  
liensimages[0]="page1.html";  
liensimages[1]="page5.html";  
liensimages[2]="page2.html";  
liensimages[3]="page4.html";  
liensimages[4]="page3.html";  
liensimages[5]="page6.html";  

var preload=new Array();  

var n;  
for (n=0; n<randomimages.length; n++)  
{  
    preload[n]=new Image();  
    preload[n].src=randomimages[n];  
}  

var nombre = Math.floor(Math.random()*(randomimages.length));  

document.write('<a id="randomlink" href="' + liensimages[nombre] + '"><img name="defaultimage" src="'+randomimages[nombre]+'"></a>');  

function rotateimage()  
{  
    nombre = tempindex=Math.floor(Math.random()*(randomimages.length));  
    if (curindex==(nombre)){  
        curindex=curindex==0? 1 : curindex-1;  
    }  
    else  
        curindex=tempindex;  

    document.images.defaultimage.src=randomimages[curindex];  
    document.getElementById("randomlink").href = liensimages[curindex];  
}  

setInterval("rotateimage()",delay);  
</script>

      Ce serait bien que tu apprennes un peu de Javascript.

      Avec les indications qu'on te donne, tu as tous les éléments pour faire les changements nécessaires tout seul, pourvu que tu fasses un petit effort.

      Le but de CCM est d'aider les gens qui veulent apprendre... Enfin, c'est comme çà que je vois les choses :-)


      Dal
      0
    2. [Dal] Messages postés 6122 Date d'inscription   Statut Contributeur Dernière intervention   1 108
       
      Pour ta 2ème (nouvelle) question, voilà un bon cas pratique pour t'y mettre ;-)

      Avec les indications nécessaires là :

      https://www.w3schools.com/tags/att_a_target.asp


      Dal
      0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. vitriol Messages postés 4 Statut Membre
     
    merci beaucoup... oui je sais il n'y a pas d'age pour apprendre.
    merci a vous
    0