Sujet Précédent Sujet Suivant

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

Réponse 1 / 5
[Dal] Messages postés 6373 Statut Contributeur 1 106
 
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
Réponse 2 / 5
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
[Dal] Messages postés 6373 Statut Contributeur 1 106
 
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
Réponse 3 / 5
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
[Dal] Messages postés 6373 Statut Contributeur 1 106
 
En fait, comme le code fait une rotation des images, une fois la page chargée, il faut aussi gérer la rotation des liens dans la suite du code.

https://forums.commentcamarche.net/forum/affich-26093231-aide-pour-un-javascipt#4


Dal
0
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
Réponse 4 / 5
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
[Dal] Messages postés 6373 Statut Contributeur 1 106
 
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
[Dal] Messages postés 6373 Statut Contributeur 1 106
 
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

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

Posez votre question
Réponse 5 / 5
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