right guys this is driving me crazy will someone just tell me straight how to make these images links to pages such as test1.html,test2.html,test3.html and rather than tell me what to change just paste the entire fixed code so that i can test it im new to javascript and hate it
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>For the link, you'll want to associate your image and link together, assuming that each link has a specific image to be associated with. So let's update your random images and well also need to surround the img tag with an anchor tag, something like:
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>'
(updated per comment)
You need to enclose the image in the tag.
//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>