Bien, muchachos, esto me está volviendo loco. ¿Alguien podría decirme directamente cómo hacer que estas imágenes se vinculen a páginas como test1.html, test2.html, test3.html y, en lugar de decirme qué cambiar, simplemente pegue todo el código fijo para que puedo probarlo soy nuevo en javascript y lo odio
function getRandomImage() { //declare an array to store the images var randomImage = new Array(); //insert the URL of images in array randomImage[1] = "frames/1.png"; randomImage[2] = "frames/2.png"; randomImage[3] = "frames/3.png"; randomImage[4] = "frames/4.png"; randomImage[5] = "frames/5.png"; randomImage[6] = "frames/6.png"; randomImage[7] = "frames/7.png"; randomImage[8] = "frames/8.png"; randomImage[9] = "frames/9.png"; randomImage[10] = "frames/10.png"; //loop to display five randomly chosen images at once for (let i=0; i< 1; i++) { //generate a number and provide to the image to generate randomly var number = Math.floor(Math.random()*randomImage.length); //print the images generated by a random number document.getElementById("result").innerHTML += '<a href="' + randomImage[number].href + '"><img src="'+ randomImage[number].src +'" style="width:450px" /></a>'; } } <button onclick="getRandomImage()">Show Image</button> <div class="container"> <span id="result" align="center"></span> </div>Para el enlace, querrá asociar su imagen y el enlace juntos, asumiendo que cada enlace tiene una imagen específica para asociarse. Entonces, actualicemos sus imágenes aleatorias y también debemos rodear la etiqueta img con a etiqueta nchor, algo como:
randomImage[1] = { src: "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg", href: "/index1.html" } // update the rest of the links accordingly, then: '<a href="' + randomImage[number].href + '"><img src="'+ randomImage[number].src +'" style="width:450px" /></a>'(actualizado por comentario)
Debe incluir la imagen en la etiqueta.
//declare an array to store the images var randomImage = new Array(); //insert the URL of images in array randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[2] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[3] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[4] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[5] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[6] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[7] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[8] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[9] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link randomImage[10] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link //loop to display five randomly chosen images at once for (let i=0; i< 1; i++) { //generate a number and provide to the image to generate randomly var number = Math.floor(Math.random()*randomImage.length); //print the images generated by a random number document.getElementById("result").innerHTML += '<a href="'+ randomImage[number] +'"><img src="'+ randomImage[number] +'" style="width:450px" /></a>'; } } function fy(a, b, c, d) { // https://stackoverflow.com/a/25984542/295783 c = a.length; while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d } // declare an array to store the images AND their href const images = [{ src: "https://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg", href: "aaa.html" }, { src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/cute_dogsurprise_petsworld.jpg", href: "bbb.html" }, { src: "https://www.petsworld.in/blog/wp-content/uploads/2016/09/dogs-300x200.gif", href: "ccc.html" }, { src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/dog-hates-stairs-BF0505-001-resized-56a26a793df78cf772755e08-1024x682.jpg", href: "ddd.html" }, { src: "https://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg", href: "eee.html" }, { src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/cute_dogsurprise_petsworld.jpg", href: "fff.html" }, { src: "https://www.petsworld.in/blog/wp-content/uploads/2016/09/dogs-300x200.gif", href: "ggg.html" }, { src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/dog-hates-stairs-BF0505-001-resized-56a26a793df78cf772755e08-1024x682.jpg", href: "hhh.html" }, ] document.getElementById("show").addEventListener("click", function() { fy(images); document.getElementById("result").innerHTML = images.slice(0, 5).map(img => `<a href="${img.href}"><img src="${img.src}" style="width:450px" /></a>`).join("") }) <button type="button" id="show">Show Image</button> <hr/> <!--image displays here--> <span id="result" align="center"></span>