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">');
Related
I'm not well know about javascripts, got this code from a website.
Using javascript to display random images from array in div
javascript working fine.
But loaded images displays in random sizes
tried using css style and all css html image attributes to resize them but nothing works, as they are displayed directly through javascript
want something to resize them directly in javascript
code main :
<script>
var arrayImg = new Array();
arrayImg[0] = "a11.jpg";
arrayImg[1] = "a12.jpg";
getRandomImage(arrayImg, "");
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + alt = "" >';
document.writein(imgStr);
document.close();
}
</script>
code I used to resize image : (but didn't work) :
<script>
var arrayImg = new Array();
arrayImg[0] = "a11.jpg";
arrayImg[1] = "a12.jpg";
getRandomImage(arrayImg, "");
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var img.height = 4vw;
var img.width = 20%;
var imgStr = '<img src="' + path + img + img.height + img.width + alt = "" >';
document.writein(imgStr);
document.close();
}
</script>
even tried using : (but still didn't work)
document.writeln('<td' + '><imgstr"' + height="180" width="160" border="0" ><' + '/td>');
You have a few syntax error in getRandomImage function.
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
/*
1. variable name should not contain .
2. the width and height value should be quoted and placed in "style" attribute
*/
//var img.height = 4vw;
//var img.width = 20%;
var imgHeight = '4vw';
var imgWidth = '20%';
/* closed string quotations and placed data in the right attribute */
var imgStr = '<img src="' + path + img + '"'
+ ' style="height:' + imgHeight + ';width:' + imgWidth + ';'
+ ' alt="">';
document.writein(imgStr);
document.close();
}
You have several places where you didn't close quotation marks.
In code main:
var imgStr = '<img src="' + path + img + '"' + ' alt = "" >';
In resize code
var imgStr = '<img src="' + path + img + '" height="' + img.height + '" width="' + img.width + '" alt = "" >';
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.
How do I get full image source (like "http://lorempixel.com/400/200/sports/1") by concatenation of partial source:
var url = "http://lorempixel.com/400/200/sports/"
and numbers from array
var arr = [1,2,3,4,5];
I already have list of images
<ul id="imageList"></ul>
I want to append images like this
for (var i = 0; i < arr.length; i++) {
$('#imageList').append('<li><img class="imageClass" src = "url + 'arr[i]'" /></li>');
}
Here source concat. is not working
This is because you did not use url and arr[i] as a variable by closing the string before concatenating the variables with a +.
.append('<li><img class="imageClass" src="' + url + arr[i] + '" /></li>');
If you have a text editor that highlights your code for you, url and arr[i] should be in a different colour.
Demo: http://jsfiddle.net/WLv6F/
You can set the src of the image using JavaScript:
var arr = [1,2,3,4,5];
var url = "http://lorempixel.com/400/200/sports/" + arr[0];
var img = document.createElement('img');
img.className = 'imageClass';
img.src = url;
By looping through your array elements, you can append them to your list. Here I show two methods of looping: Array.prototype.forEach and also a for loop if that's what you prefer:
var url = "http://lorempixel.com/400/200/sports/";
var arr = [1, 2, 3, 4, 5], img, listItem;
// Using foreach
arr.forEach(function(id) {
listItem = document.createElement('li');
img = document.createElement('img');
img.className = 'imageClass';
img.src = url + id;
listItem.appendChild(img);
document.getElementById('imageList').appendChild(listItem);
});
// Using for
for (var i = 0; i < arr.length; ++i) {
listItem = document.createElement('li');
img = document.createElement('img');
img.className = 'imageClass';
img.src = url + arr[i];
listItem.appendChild(img);
document.getElementById('imageList').appendChild(listItem);
}
"src = '" + url + arr[0] + "'/>"
Edit:
He has it wrong with:
'<li><img class="imageClass" src = "url + 'arr[i]'" /></li>'
It should be:
'<li><img class="imageClass" src = "' + url + arr[i] + '" /></li>'
I'm trying to implement a serialization and deserialization of a repeating set of floats, using TypedArray to string (for saving across wire/disk), But it's not making it round trip
I got it working by using the ArrayBuffer to Buffer methods provided on the linked issue, the issue is I think I was treating them as arbitrary Typed Arrays rather than the native Uint8Array that I guess Buffers use. Here's the working version.
var recordsPerWrite = 1;
var ab = new ArrayBuffer(8 + 8 + 8 * recordsPerWrite);
var f64ry = new Float64Array(ab);
var records_added = 1;
var i1 = records_added * 0;
var i2 = records_added * 1;
var i3 = records_added * 2;
////////////////////////////
var timestamp = 1.1;
var price = 2.2;
var amount = 3.3;
f64ry[i1] = timestamp;
f64ry[i2] = price;
f64ry[i3] = amount;
console.log(f64ry[i1], f64ry[i2],f64ry[i3]);
var buffer = toBuffer(ab);
var st = buffer.toString('base64');
console.log("ST '" + st + "'");
var buffer2 = new Buffer(st, 'base64');
var ab2 = toArrayBuffer(buffer2);
var f64ry2 = new Float64Array(ab2);
function toArrayBuffer(buffer) {
var ab = new ArrayBuffer(buffer.length);
var view = new Uint8Array(ab);
for (var i = 0; i < buffer.length; ++i) {
view[i] = buffer[i];
}
return ab;
}
function toBuffer(ab) {
var buffer = new Buffer(ab.byteLength);
var view = new Uint8Array(ab);
for (var i = 0; i < buffer.length; ++i) {
buffer[i] = view[i];
}
return buffer;
}
timestamp2 = f64ry2[i1];
price2 = f64ry2[i2];
amount2 = f64ry2[i3];
console.log("IN " + timestamp, price, amount);
console.log("OUT " + timestamp2, price2, amount2);
OUTPUT
SOURCE: 1.1 2.2 3.3
CLONE: undefined undefined undefined //expected 1.1 2.2 3.3
I am using the approach linked here: Convert a binary NodeJS Buffer to JavaScript ArrayBuffer
var ab = new ArrayBuffer(8 + 8 + 8);
var f64ry = new Float64Array(ab);
var records_added = 1;
var i1 = records_added * 0;
var i2 = records_added * 1;
var i3 = records_added * 2;
////////////////////////////
var timestamp = 1.1;
var price = 2.2;
var amount = 3.3;
f64ry[i1] = timestamp;
f64ry[i2] = price;
f64ry[i3] = amount;
console.log(f64ry[i1], f64ry[i2],f64ry[i3]); //shows correctly
var buffer = new Buffer(ab.byteLength);
for (var i = 0; i < f64ry.length; ++i) {
// console.log(i + " " +f64ry[i]);
buffer[i] = f64ry[i];
}
console.log("buffer '" + buffer + "'");
var st = buffer.toString('hex');
console.log("ST '" + st + "'");
//var ab = buffer.toArrayBuffer(); //doesn't work in Node v.10
var buffer2 = new Buffer(st, 'hex');
console.log("buffer2 '" + buffer2 + "'");
var ab2 = new ArrayBuffer(buffer2.byteLength);
var f64ry2 = new Float64Array(ab2);
for (var i = 0; i < buffer2.length; ++i) {
console.log(i + " " +buffer2[i]);
f64ry2[i] = buffer2[i];
}
}
timestamp2 = f64ry2[i1];
price2 = f64ry2[i2];
amount2 = f64ry2[i3];
console.log(timestamp, price, amount);
console.log(timestamp2, price2, amount2);
Similarly this alternate approach didn't work either:
OUTPUT
>1.1 2.2 3.3
>buffer ''
>ST '010203'
>buffer2 ''
>1.1 2.2 3.3
>undefined undefined undefined
CODE
var f64ry = new Float64Array(3);
var records_added = 1;
var i1 = records_added * 0;
var i2 = records_added * 1;
var i3 = records_added * 2;
////////////////////////////
var timestamp = 1.1;
var price = 2.2;
var amount = 3.3;
var ary = [timestamp,price,amount];
f64ry.set(ary,0);
console.log(f64ry[i1], f64ry[i2],f64ry[i3]);
var buffer = new Buffer(f64ry);
console.log("buffer '" + buffer + "'");
var st = buffer.toString('hex');
console.log("ST '" + st + "'");
//var ab = buffer.toArrayBuffer();
var buffer2 = new Buffer(st, 'hex');
console.log("buffer2 '" + buffer2 + "'");
var ab2 = new ArrayBuffer(buffer2);
var f64ry2 = new Float64Array(ab2);
timestamp2 = f64ry2[i1];
price2 = f64ry2[i2];
amount2 = f64ry2[i3];
console.log(timestamp, price, amount);
console.log(timestamp2, price2, amount2);
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">')
}