Prevent broken Image Box

Prevent broken Image Box - javascript

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>

Related

Random Images without Links

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">');

How do I resize images in javascript/html

<!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%
}

modal images generate wrong code under FF and IE

My modal images seems to be working only under Chrome. In Firefox and Internet Expoler modal images generate code with errors:
<img src="" http:="" localhost="" ceramikakornak="" images="" realizacje="" klasyczne="" 3.jpg""="" class="img-responsive">
In Chrome modal windows is ok and looks:
<img src="images/realizacje/1.jpg" class="img-responsive">
JavaScript which i use to generate Modal Window:
$(document).ready(function() {
$('.realizacje-fota').each(function(){
var checkClass = $(this);
var image_url = checkClass.css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
// alert(image.width + 'x' + image.height);
var ratio = image.width/image.height;
if (ratio > 1) {
checkClass.addClass("realizacje-fota-pion");
}
else if (ratio <= 1) {
checkClass.addClass("realizacje-fota-poziom");
}
});
image.src = image_url;
}
});
});
$(document).ready(function(){
$('.lazy div').on('click',function(){
var src = $(this).css('background-image');
var src = src.substring(4, src.length);
var src = src.substring(0, src.length - 1);
var img = '<img src="' + src + '" class="img-responsive"/>';
var index = $(this).parent('div').index();
var html = '';
html += img;
html += '<div style="clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+1) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>'
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('.row div:nth-child('+ index +') img').attr('src');
$('.modal-body div').str('scr', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('.row div').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});

join Javascript embed code

This is about a Blogger template called Bloggertube
Its originally coded to embed youtube videos and grab url image and post the image thumbnail
I also modified to work with Dailymotion
But I'm pretty newbie at Javascript, and I'm trying to figure out how to make a condition to make them work at same time, and also add more sites in the future
function createVideoThumb refers to thumbnail creation
function createVideoThumb2 refers to player's embed code
The blogger post sintax is:
(youtube link)endofvid
[starttext]
(post text)
[endtext]
Youtube code:
function createVideoThumb(pID){
var div = document.getElementById(pID);
var summ = summary_noimg;
if (div.innerHTML.indexOf("http://www.youtube.com/watch?v=")!=-1){
var vidid = div.innerHTML.substring(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")+31,div.innerHTML.indexOf("endofvid"));
}else {var vidid =""};
var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));
if (vidid ==""){var imgvid ='<img class="thumbnail" src="http://i195.photobucket.com/albums/z105/dantearaujo/novideo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';
}else{
var imgvid ='<img class=thumbnail src="http://img.youtube.com/vi/'+vidid+'/mqdefault.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';
};
var summary = imgvid ;
div.innerHTML = summary;
}
function createVideoThumb2(pID){
var div = document.getElementById(pID);
var imgtag = "";
var summ = summary_noimg;
if (div.innerHTML.indexOf("http://www.youtube.com/watch?v=")!=-1){
var vidid = div.innerHTML.substring(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")+31,div.innerHTML.indexOf("endofvid"));
}else {var vidid =""};
var textinside = div.innerHTML.substring(div.innerHTML.indexOf("[starttext]")+11,div.innerHTML.indexOf("[endtext]"));
var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));
var embedvid = "";
if (vidid!="") {
embedvid = '<object width="654" height="393"><param name="movie" value="http://www.youtube.com/v/'+ vidid + '&hl=en&fs=1&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ vidid + '&hl=en&fs=1&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="654" height="393"></embed></object>'
}
var summary = embedvid + '<div class="content">' + textinside + '</div>';
div.innerHTML = summary;
}
Dailymotion code
function createVideoThumb(pID){
var div = document.getElementById(pID);
var summ = summary_noimg;
if (div.innerHTML.indexOf("http://www.dailymotion.com/video/")!=-1){
var vidid = div.innerHTML.substring(div.innerHTML.indexOf("http://www.dailymotion.com/video/")+33,div.innerHTML.indexOf("endofvid"));
}else {var vidid =""};
var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));
if (vidid ==""){var imgvid ='<img class="thumbnail" src="http://i195.photobucket.com/albums/z105/dantearaujo/novideo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';
}else{
var imgvid ='<img class=thumbnail src=" http://www.dailymotion.com/thumbnail/video/'+vidid+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';
};
var summary = imgvid ;
div.innerHTML = summary;
}
function createVideoThumb2(pID){
var div = document.getElementById(pID);
var imgtag = "";
var summ = summary_noimg;
if (div.innerHTML.indexOf("http://www.dailymotion.com/video/")!=-1){
var vidid = div.innerHTML.substring(div.innerHTML.indexOf("http://www.dailymotion.com/video/")+33,div.innerHTML.indexOf("endofvid"));
}else {var vidid =""};
var textinside = div.innerHTML.substring(div.innerHTML.indexOf("[starttext]")+11,div.innerHTML.indexOf("[endtext]"));
var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));
var embedvid = "";
if (vidid!="") {
embedvid = '<iframe frameborder="0" width="654" height="393" src="//www.dailymotion.com/embed/video/'+ vidid +'" allowfullscreen></iframe>'
}
var summary = embedvid + '<div class="content">' + textinside + '</div>';
div.innerHTML = summary;
}

I think I understand where your problem is. The solution is to only have 2 functions: createVideoThumb and createVideoThumb2. In the start of the functions, make a check what the inner html contains. For example:
function createVideoThumb2(pID){
// Dailymotion
if (div.innerHTML.indexOf("http://www.dailymotion.com/video/")!=-1){
// Set specific local vars here
}
// Youtube
else if(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")!=-1) {
// Set specific local vars here
}
// .... More providers
// Use specific local vars in the code below (I didnt edit anything below)
var div = document.getElementById(pID);
var imgtag = "";
var summ = summary_noimg;
if (div.innerHTML.indexOf("http://www.dailymotion.com/video/")!=-1){
var vidid = div.innerHTML.substring(div.innerHTML.indexOf("http://www.dailymotion.com/video/")+33,div.innerHTML.indexOf("endofvid"));
}else {var vidid =""};
var textinside = div.innerHTML.substring(div.innerHTML.indexOf("[starttext]")+11,div.innerHTML.indexOf("[endtext]"));
var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));
var embedvid = "";
if (vidid!="") {
embedvid = '<iframe frameborder="0" width="654" height="393" src="//www.dailymotion.com/embed/video/'+ vidid +'" allowfullscreen></iframe>'
}
var summary = embedvid + '<div class="content">' + textinside + '</div>';
div.innerHTML = summary;
}
You can do this for both functions, and then use the vars throughout the rest of the function. Vars should be like iframeWidth, iframeHeight,... and so on, whatever you need customised for each provider.

Selecting a random image

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">')
}

Develop Reference

JavaScript is the programming language of the Web.

Prevent broken Image Box - javascript

Related

Random Images without Links

How do I resize images in javascript/html

modal images generate wrong code under FF and IE

join Javascript embed code

Selecting a random image

Categories

Resources