I've been trying to get a random image to show up on load. This is the code I'm using:
<head>
<script type="text/javascript">
ImageArray = new Array();
image[0] = 'goat1.jpg';
image[1] = 'kitchen4.jpg';
image[2] = 'pig1.jpg';
image[3] = 'site1.jpg';
image[4] = 'site2.jpg';
image[5] = 'site3.jpg';
image[6] = 'site4.jpg';
image[7] = 'site5.jpg';
image[8] = 'site6.jpg';
image[9] = 'site7.jpg';
image[10] = 'site8.jpg';
function getRandomImage() {
var num = Math.floor( Math.random() * 11);
var img = ImageArray[num];
document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>
I'm new to javascript, and cobbled this together from snippets I found on line.
The problem with this code is that it shows <img src="images/random/undefined" width="250px">, instead of an image.
ImageArray has no items, so getting any index of it will return undefined. I think you are trying to set values of ImageArray, but accidentally put image. Second, you don't want textContent, you want innerHTML. This is probably the code you meant to have:
<head>
<script type="text/javascript">
ImageArray = new Array();
ImageArray[0] = 'goat1.jpg';
ImageArray[1] = 'kitchen4.jpg';
ImageArray[2] = 'pig1.jpg';
ImageArray[3] = 'site1.jpg';
ImageArray[4] = 'site2.jpg';
ImageArray[5] = 'site3.jpg';
ImageArray[6] = 'site4.jpg';
ImageArray[7] = 'site5.jpg';
ImageArray[8] = 'site6.jpg';
ImageArray[9] = 'site7.jpg';
ImageArray[10] = 'site8.jpg';
function getRandomImage() {
var num = Math.floor( Math.random() * 11);
var img = ImageArray[num];
document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>
You don't pass the array and change textContent to innerHTML ... SEE DEMO
<script type="text/javascript">
ImageArray = new Array();
ImageArray[0] = 'goat1.jpg';
ImageArray[1] = 'kitchen4.jpg';
ImageArray[2] = 'pig1.jpg';
ImageArray[3] = 'site1.jpg';
ImageArray[4] = 'site2.jpg';
ImageArray[5] = 'site3.jpg';
ImageArray[6] = 'site4.jpg';
ImageArray[7] = 'site5.jpg';
ImageArray[8] = 'site6.jpg';
ImageArray[9] = 'site7.jpg';
ImageArray[10] = 'site8.jpg';
function getRandomImage() {
var num = Math.floor( Math.random() * 11);
var img = ImageArray[num];
document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
</script>
The problem is that you're not assigning the values of the array ImageArray, but the array image. You can change this by either renaming your image array to image, or the other way around. So:
<script type="text/javascript">
var image = new Array();
image[0] = 'goat1.jpg';
image[1] = 'kitchen4.jpg';
image[2] = 'pig1.jpg';
image[3] = 'site1.jpg';
image[4] = 'site2.jpg';
image[5] = 'site3.jpg';
image[6] = 'site4.jpg';
image[7] = 'site5.jpg';
image[8] = 'site6.jpg';
image[9] = 'site7.jpg';
image[10] = 'site8.jpg';
function getRandomImage() {
var num = Math.floor( Math.random() * 11);
var img = image[num];
document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
</script>
OR:
<script type="text/javascript">
var ImageArray = new Array();
ImageArray[0] = 'goat1.jpg';
ImageArray[1] = 'kitchen4.jpg';
ImageArray[2] = 'pig1.jpg';
ImageArray[3] = 'site1.jpg';
ImageArray[4] = 'site2.jpg';
ImageArray[5] = 'site3.jpg';
ImageArray[6] = 'site4.jpg';
ImageArray[7] = 'site5.jpg';
ImageArray[8] = 'site6.jpg';
ImageArray[9] = 'site7.jpg';
ImageArray[10] = 'site8.jpg';
function getRandomImage() {
var num = Math.floor( Math.random() * 11);
var img = ImageArray[num];
document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
</script>
The name of the variable you store your image names in needs to be consistent throughout the script.
Suggestion for changes:
var imgs = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg',
'site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg',
'site8.jpg'];
function getRandomImage(){
var rnd = Math.floor(Math.random()*imgs.length);
document.getElementById('randImage').src = imgs[rnd];
}
...
<div><img id="randImage" /></div>
You should defined image an array but ImageArray, you can also reduce the code something like this
<head>
<script type="text/javascript">
var image = ['goat1.jpg', 'kitchen4.jpg', 'pig1.jpg',
'site1.jpg', 'site2.jpg', 'site3.jpg', 'site4.jpg', 'site5.jpg',
'site6.jpg', 'site7.jpg', 'site8.jpg'];
function getRandomImage() {
var num = Math.floor( Math.random() * 11);
var img = image[num];
document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>
You must use ImageArray when assigning elements of the array:
ImageArray[0] = 'goat1.jpg';
instead of:
image[0] = 'goat1.jpg';
I would also recommend assigning the array at its declaration instead of using individual statements to assign values to different elements of the array:
var ImageArray = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg','site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg','site8.jpg'];
function getRandomImage() {
var num = Math.floor( Math.random() * 11);
var img = ImageArray[num];
document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
Related
<html>
<body>
<div id="images">
<table>
<script type= "text/javascript">
var myArray = new Array();
myArray[0]= new Array("images/bcpot002_r1_c1.jpg");
myArray[1] = new Array("images/bcpot002_r1_c2.jpg");
myArray[2] = new Array("images/bcpot002_r1_c3.jpg");
myArray[3] = new Array("images/bcpot002_r1_c4.jpg");
myArray[4] = new Array("images/bcpot002_r1_c5.jpg");
var myArray2 = new Array();
myArray2[0] = new Array("images/bcpot002_r2_c1.jpg");
myArray2[1] = new Array("images/bcpot002_r2_c2.jpg");
myArray2[2]= new Array("images/bcpot002_r2_c3.jpg");
myArray2[3] = new Array("images/bcpot002_r2_c4.jpg");
myArray2[4] = new Array("images/bcpot002_r2_c5.jpg");
var myArray3 = new Array();
myArray3[0] = new Array("images/bcpot002_r3_c1.jpg");
myArray3[1] = new Array("images/bcpot002_r3_c2.jpg");
myArray3[2] = new Array("images/bcpot002_r3_c3.jpg");
myArray3[3] = new Array("images/bcpot002_r3_c4.jpg");
myArray3[4] = new Array("images/bcpot002_r3_c5.jpg");
var myArray4 = new Array();
myArray4[0] = new Array("images/bcpot002_r4_c1.jpg");
myArray4[1] = new Array("images/bcpot002_r4_c2.jpg");
myArray4[2] = new Array("images/bcpot002_r4_c3.jpg");
myArray4[3] = new Array("images/bcpot002_r4_c3.jpg");
myArray4[4] = new Array("images/bcpot002_r4_c3.jpg");
for (var i=0; i<myArray.length; i++){
document.write("<tr><td>" + myArray[i] + "</td>");
document.write("<td>" + myArray2[i] + "</td>");
document.write("<td>" + myArray3[i] + "</td>");
document.write("<td>" + myArray4[i] + "</td></tr>");
}
</script>
</table>
</div>
<html>
I have to place images into a table, only using java script.
I have this so far., and i am unsure of how to get the images to actually display as actual images for the javascript table.
My teacher told us to use document.write, any help will be appreciated.
You need to use something like below for image:
document.write("<tr><td><img src='" + myArray[i] + "'</td>");
Adding to the question below, which did work how I needed it to.
How do I style the images when they are placed in the JavaScript table to not have any spaces between them.
document.write("<img src='" + myArray[i] + "'");
Is there a way to make the below javascript just display the random images with out a link?
var imagenumber = 10 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
var URLs = new Array() ;
images = new Array
images[1] = "images/headerpics/fall/fall17.png"
images[2] = "images/headerpics/fall/fall1.png"
images[3] = "images/headerpics/fall/fall2.png"
images[4] = "images/headerpics/fall/fall3.png"
images[5] = "images/headerpics/fall/fall4.png"
images[6] = "images/headerpics/fall/fall5.png"
images[7] = "images/headerpics/fall/fall6.png"
images[8] = "images/headerpics/fall/fall7.png"
images[9] = "images/headerpics/fall/fall8.png"
images[10] = "images/headerpics/fall/fall9.png"
var image = images[rand1] ;
var linknumber = 1 ;
var img1 = Math.round( (linknumber-1) * randomnumber) + 1 ;
links = new Array
links[1] = "index.htm"
var link = links[img1];
document.write('<a href="' + link + '"><img src="' + image + '"
border="0"></a>') ;
Thanks for any help!
Just Remove the Anchor (<a>) tag from the document.write
document.write('<img src="' + image + '"border="0">');
<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 750px;
width: 100%;
margin-top:-10px;
background-color:#0d0d0d;
position: relative;
z-index: 1;
}
</style>
<body>
<!-- <img id="image" src="img/bg.jpg" height="710px" width="100%" /> -->
<script type="text/javascript">
var ypos,image;
function parallex() {
image = document.getElementById('image');
ypos = window.pageYOffset;
image.style.top = ypos * .7+ 'px';
}
window.addEventListener('scroll', parallex),false;
</script>
</head>
<script type="text/javascript">
var imlocation = "img/";
var currentdate = 0;
var image_number = 0;
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
}
var insert = imlocation + randomimage();
document.write("<img src='" + insert+ "'>");
</script>
<div id="content"></div>
</body>
I am trying to set my height of my insert image to 710px and the width to be 100%. What am I doing wrong?
I have tried editing the insert.height and the insert.width but that seems not to work.
Firstly, your code is not running correctly, here's why:
image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
As might notice, the lack of semicolons means that each of your statements above are not being closed. The above should become:
image = new ImageArray(6);
image[0] = 'bg.jpg';
image[1] = 'bg2.jpg';
image[2] = 'bg3.jpg';
image[3] = 'bg4.jpg';
image[4] = 'bg5.jpg';
image[5] = 'bg6.jpg';
var rand = 60/image.length;
function randomimage() {
currentdate = new Date();
image_number = currentdate.getSeconds();
image_number = Math.floor(image_number/rand);
return(image[image_number]);
Let me know if you now have any errors after sorting this out, I will then evolve my answer accordingly! :)
Part 2:
Instead of this:
var insert = imlocation + randomimage();
insert.height = "710px";
insert.width = "100%";
document.write("<img src='" + insert+ "'/>");
Let's use CSS, we have two options:
Option 1 - Use style attributes:
var insert = imlocation + randomimage();
document.write("<img style='height:710px;width:100%' src='" + insert + "'/>");
Option 2 - Use a class
var insert = imlocation + randomimage();
document.write("<img class='ourclass' src='" + insert + "'/>");
To finish off option 2, we now define "ourclass" in CSS:
.ourclass {
height:710px;
width:100%
}
This is what I currently have, and the three background images for div#hero change upon refresh. Is there any easy way to adjust this so that they fade to an alternate image after x number of seconds, instead of upon refresh?
<script type="text/javascript">var imgCount = 3;
var dir = 'images/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "1.jpg",
images[2] = "2.jpg",
images[3] = "3.jpg",
document.getElementById("hero").style.backgroundImage = "url(" + dir + images[randomCount] + ")";</script>
Wrap your code in a function and use that inside setInterval method:
var interval_time = 5000;//in milliseconds
setInterval(your_function,interval_time);
function your_function(){
var imgCount = 3;
var dir = 'images/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "1.jpg",
images[2] = "2.jpg",
images[3] = "3.jpg",
document.getElementById("hero").style.backgroundImage = "url(" + dir + images[randomCount] + ")";
}
Now, after each interval_time your_function would run.
I wrote this simple HTML/JavaScript code to view some IP cameras on a display in a nicer way; when the picture is not available, I'd like to have the previous image or at least just the black background instead of the "broken image link" box.
<body style="margin:0; background-color:black;">
<div style="height:100%; background-color:black; position:fixed;">
<img height="50%" name="Camera1"/>
<img height="50%" name="Camera2"/>
<br>
<img height="50%" name="Camera3"/>
<img height="50%" name="Camera4"/>
</div>
</body>
<script language="JavaScript">
//<!--
function reloadImage()
{
var now = new Date();
var Camera1 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=0&animation=0&name=aa&password=11&time=1346851800&pic_size=2'
var Camera2 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=1&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851972719.719'
var Camera3 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=2&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851974247.247'
var Camera4 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=3&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851975678.678'
if (document.images)
{
document.images.Camera1.src = Camera1 + '?' + now.getTime();
document.images.Camera2.src = Camera2 + '?' + now.getTime();
document.images.Camera3.src = Camera3 + '?' + now.getTime();
document.images.Camera4.src = Camera4 + '?' + now.getTime();
}
setTimeout('reloadImage()',1000);
}
setTimeout('reloadImage()',1000);
//--></script>
Can it be something like this? (I wrote it but I'm not so good at JavaScript, so don't know why it's not working:
//...(inside the if(document.images)...
var image = new Image;
image.onerror = function () { blank(this); }
image.src = Camera1 + '?' + now.getTime();
document.images.Camera1 = image
Solved!
Here's the code:
<body style="margin:0; background-color:black;">
<div style="height:100%; background-color:black; position:fixed;">
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/>
<br>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/>
<img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/>
</div>
</body>
<script language="JavaScript">
//<!--
function reloadImage()
{
var now = new Date();
var Camera = new Array()
var Camera1 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=0&animation=0&name=aa&password=11&time=1346851800&pic_size=2'
var Camera2 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=1&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851972719.719'
var Camera3 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=2&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851974247.247'
var Camera4 = 'http://xxxxxx/cgi-bin/wappaint?camera_no=3&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851975678.678'
if (document.images)
{
var image1 = new Image;
var image2 = new Image;
var image3 = new Image;
var image4 = new Image;
image1.onload = function () { document.images.Camera1.src = image1.src; }
image2.onload = function () { document.images.Camera2.src = image2.src; }
image3.onload = function () { document.images.Camera3.src = image3.src; }
image4.onload = function () { document.images.Camera4.src = image4.src; }
image1.src = Camera1 + '?' + now.getTime();
image2.src = Camera2 + '?' + now.getTime();
image3.src = Camera3 + '?' + now.getTime();
image4.src = Camera4 + '?' + now.getTime();
}
setTimeout('reloadImage()',1000);
}
setTimeout('reloadImage()',1000);
//-->
</script>