So I have a webpage with one image on it (slicedImg_01). I would like to have that static picture animate randomly through a series of 6 pictures on mouseover. So far what I have will randomly generate pictures to the page, however it just creates a new image to the page and doesn't replace the original image. Here is what I have. Also, I am trying to avoid jquery. (slicedImg_02, slicedImg_03, etc.)
HTML:
<body>
<div >
<img onmouseover="imgSwitch()" src="slicedImg_01.gif" height="50" width="50" id = "pic">
</img>
</div>
</body>
JS:
function imgSwitch(){
var img = new Array("slicedImg_01.gif", "slicedImg_02.gif", "slicedImg_03.gif", "slicedImg_04.gif", "slicedImg_05.gif", "slicedImg_06.gif");
var i;
//var pic = ""
for (i = 0; i < 7; i++)
var rand = img[Math.floor(Math.random() * img.length)];
var image = document.getElementById("pic").src
image = new Image();
image.src = rand;
document.body.appendChild(image);
What I don't understand is the line creating a new image image = new Image();. The code below should replace the current image with the randomly selected new image:
function imgSwitch(){
var img = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg");
var rand = img[Math.floor(Math.random() * img.length)];
document.getElementById("pic").src = rand;
}
Note the image names need to be replaced with yours.
Related
I'm trying to set a random image background with css and javascript to a div, but when I load the random image on google chrome it does not work
I tried to do all image urls in variables but this does not work.
does anyone know why it is changing my code and why it is not working
code that loads the random image
<script type="text/javascript">
var image1 = "images/image1.png";
var image2 = "images/image2.png";
var image3 = "images/image3.png";
var image4 = "images/image4.png";
var imageURLs = [
"image1"
, "image2"
, "image3"
, "image4"
];
function getImageTag() {
var img = '<div class="pdiv2" style="background-image: url("';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '")"></div>';
return img;
}
</script>
where the image is printed
<script type="text/javascript">
document.write(getImageTag());
</script>
output when I do with google chrome inspect, edit as html
<div class="pdiv2" style="background-image: url(" image3")"=""></div>
There are two problems with your code. First, you need to remove the " as you're using variables:
var imageURLs = [
image1,
image2,
image3,
image4
];
Second, you also need to remove the double-quotes around the url() that you manually inject. Your final function should look like this:
var image1 = "images/image1.png";
var image2 = "images/image2.png";
var image3 = "images/image3.png";
var image4 = "images/image4.png";
var imageURLs = [
image1,
image2,
image3,
image4
];
function getImageTag() {
var img = '<div class="pdiv2" style="background-image: url(';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += ')"></div>';
return img;
}
console.log(getImageTag()); // For StackOverflow output
Hope this helps! :)
Remove the " it's not a variable so!
var imageURLs = [
image1
, image2
, image3
, image4
];
Edit:
Function:
function getImageTag() {
var randomIndex = Math.floor(Math.random() * imageURLs.length);
var randomIndex = imageURLs[randomIndex];
var img = '<div class="pdiv2" style="background-image: url('+randomIndex+')"> </div>';
return img;
}
I'm new to JavaScript and I made this code. The purpose of this code is to use JavaScript and HTML to display an ARRAY of images in a website. They all need to be displayed at once. This is the code so far, however it is not working.
<html>
<head>
<script>
var ArrayOfImages = [];
var Image1 = new Image1()
image1.src = "image1.jpg";
var Image2 = new Image2()
Image2.src = "image2.jpg";
var Image2 = new Image3()
Image3.src = "image3.jpg";
ArrayOfImages.push(Image1);
ArrayOfImages.push(Image2);
ArrayOfImages.push(Image3);
ArrayOfImages.toString();
document.write(ArrayOfImages);
</script>
</head>
<body>
</body>
</html>
When I run this code all I get is an empty webpage.
For anyone wondering, the images are in the same file as the html file. I'm also relatively new to JavaScript and HTML so please be clear in how to fix it.
You have to use array.forEach then append each array item in body.Like this
var ArrayOfImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; //your assumed array
ArrayOfImages.forEach(function(image) { // for each link l in ArrayOfImages
var img = document.createElement('img'); // create an img element
img.src = image; // set its src to the link l
document.body.appendChild(img); // append it to the body
});
See Fiddle: Fiddle
UPDATE
You can also set height and width as your requirement.Like below.
var ArrayOfImages = ['https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg']; //your assumed array
ArrayOfImages.forEach(function(image) {
var img = document.createElement('img');
img.src = image;
img.height = "45";
img.width = "50";
document.body.appendChild(img);
});
i'm a begginer with JavaScript, i have a question is like changing images every 2 seconds i used array for 12 images and for loop but it didnt work the way i wanted, the changing goes from image 1 to image 12 directly without moving through the whole 12.
this the my script
var images = new Array(11) , x=0;
images[0] = new Array();
images [0].src = "images/smile_01.gif";
images[1] = new Array();
images [1].src = "images/smile_02.gif";
images[2] = new Array();
images [2].src = "images/smile_03.gif";
images[3] = new Array();
images [3].src = "images/smile_04.gif";
images[4] = new Array();
images [4].src = "images/smile_05.gif";
images[5] = new Array();
images [5].src = "images/smile_06.gif";
images[6] = new Array();
images [6].src = "images/smile_07.gif";
images[7] = new Array();
images [7].src = "images/smile_08.gif";
images[8] = new Array();
images [8].src = "images/smile_09.gif";
images[9] = new Array();
images [9].src = "images/smile_10.gif";
images[10] = new Array();
images [10].src = "images/smile_11.gif";
images[11] = new Array();
images [11].src = "images/smile_12.gif";
function changeimage(){
setInterval( function ima(){
for ( x = 0 ; x <= images.length ; x++ ){
document.getElementById("imag").src= images[x].src;
}
},1000);
}
HTML:
</head>
<body>
<img id = "imag" src="images/smile_00.gif" onload = "changeimage()">
</body>
</html>
The way I would do it is to create an array of all source URLs like this:
var images = [
"images/smile_01.gif",
"images/smile_02.gif",
....
];
You could use a loop to do this:
var images = [];
for (var i = 1; i <= 12; i++) {
images.push("images/smile_" + i + ".gif");
}
Then get the image element from the DOM
var imag = document.getElementById("imag");
And then run a function which calls itself every 2 seconds, changes the image, and increases a counter
function changeImage(i) {
imag.src = images[i % images.length];
setTimeout(function() {
changeImage(i+1)
}, 2000);
};
changeImage(0);
Bonus: This begins at the first image again after the last has been shown
Also note that unless you preload the images, you will probably get white flashes at least the first time each image is shown.
Your entire loop happens inside setTinterval, however for animation become vsible, you need to place each iteration of the loop in setInterval,
also as pointed out in comments your array can be simplified;
var images = [
"images/smile_01.gif",
"images/smile_02.gif",
"images/smile_03.gif",
"images/smile_04.gif",
...
];
var i = 0,
image = document.getElementById("imag");
setInterval( function () {
if (i >= images.length) {
i = 0;
}
image.src = images[i];
i++;
},1000);
var images = new Array(11), x=0;
images[0] = "images/smile_01.gif";
images[1] = "images/smile_02.gif";
images[2] = "images/smile_03.gif";
images[3] = "images/smile_04.gif";
images[4] = "images/smile_05.gif";
images[5] = "images/smile_06.gif";
images[6] = "images/smile_07.gif";
images[7] = "images/smile_08.gif";
images[8] = "images/smile_09.gif";
images[9] = "images/smile_10.gif";
images[10] = "images/smile_11.gif";
images[11] = "images/smile_12.gif";
function changeimage(){
setInterval( function(){
document.getElementById("imag").src = images[x];
document.getElementById("imag").title = images[x];
x++;
if (x >= images.length)
{
x=0;
}
},1000);
}
<img id="imag" src="http://www.terrafloraonline.com/images/userfiles/images/flower01LOW.png" onload="changeimage()" title="start" />
You don't need the loop. setInterval itself is a loop. Every time interval is run (each second) it adds 1 to x. I've corrected your array. If you run this script you can hover your mouse over the image. You will see that the title of the image changes every second. In my example the first image is just a placeholder to make the onload work. If you're going to use this, only copy the code.
I'm trying to output a random image from my array and then remove it from the array afterwards for a matching game. I'm new to programming in general and I've seen (what I'm sure are) easier ways of doing it but nothing I understand yet so I'm trying it this way. The problem is that I can't get an image to print out and I'm not sure why. Any help would be appreciated! thanks!
HTML
<script>
printImage(); Sites.splice(r,1);
</script>
JS
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img0.jpg';
...
imgArray[23] = new Image();
imgArray[23].src = 'img23.jpg';
ImageRotation = imgArray.length;
FirstHalf = '<img src="img';
LastHalf = '.jpg" style="width:100px; height: 100px;">';
function printImage() {
var r = Math.ceil(Math.random() * ImageRotation);
document.write(FirstHalf + r + LastHalf);
}
This is how you can do what you are tried to achieve:
I've used setInterval to demonstrate.
Fiddle
HTML:
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
JavaScript:
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
setInterval(function() {
var im = document.getElementsByTagName('img')[0];
im.src = imgs[Math.round(Math.random() * (imgs.length - 1))];
}, 1000);
Here is another way of setting the image, based on #chipChocolate.py's answer, and addressing OP's requirement that each image is removed from the list. Instead of changing the first image in the HTML, it rewrites the inner HTML within a <div> container.
<html>
<head>
<script type="text/javascript">
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
var pictures = imgs.length;
var picim =[];
for (var i=0; i<pictures; i++)
picim [i] = i;
var num = 0; // current index of picture number
function randpic() {
if (pictures > 1) {
pictures--;
for (var i=num; i<pictures; i++) // remove current picture index
picim[i] = picim[i+1];
num = Math.floor(Math.random() * pictures);
var content = '<IMG src="' + imgs[picim [num]] + '" />';
document.getElementById('randpic').innerHTML = content;
}
}
</script>
</head>
<body>
<div id="randpic" onClick="javascript:randpic()">
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
</div>
</body>
</html>
I want to have some hyperlink images that keep changing after a period of time..I have used 2 arrays images and links..2 respective functions execute that change image and links respectively after 2 seconds of time..But I am getting a blank screen as output..I wrote the code as:
<html>
<head>
<title> New Document </title>
</head>
<body>
<img id="img" width="1300" height="200"/>
<link id="link" >
<script type="text/javascript">
var x=0;
var y=0;
var images = new Array();
var links = new Array();
images[0] = "D:\images\31.jpg";
images[1] = "D:\images\32.jpg";
links[0] = "https://www.google.co.in" ;
links[1] = "https://www.facebook.com" ;
function changeImage()
{
document.getElementById("img").src=images[x];
x = (x + 1) % images.length;
}
function changeLinks()
{
document.getElementById("link").href=links[y];
y = (y + 1) % links.length;
}
window.onload = function() {
changeImage();
setInterval(changeImage,2000);
}
window.onload = function() {
changeLinks();
setInterval(changeLinks,2000);
}
</script>
</body>
</html>
Your problem is this:
images[0] = "D:\images\31.jpg";
images[1] = "D:\images\32.jpg";
those are supposed to be hyperlinks, not file paths! Also, the backslash is an escape char in JS, so you need to double it (\\). So try something like:
images[0] = "file:/D:/images/31.jpg";
images[1] = "file:/D:/images/32.jpg";