IMAGE SRC ARRAY IN JAVA SCRIPT

Thursday, 27 July 2017

IMAGE SRC ARRAY IN JAVA SCRIPT

---------------------------------------------------------------------------------------------------------------
CODE:1
http://fbgadgets.blogspot.co.uk/2017/07/java-script-array.html
---------------------------------------------------------------------------------------------------------------

<html>

<head>

var pictures = new Array();

function myFunction(){

pictures[0] = new Image();

pictures[0].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNpzNmzMZTg8x2MJ5m9APBn2q8BPsNwy1_5jofBsEvDylrS_dhIadWuCbPrfgUU7foV4xnnBZ4UJW3BwDnynevFamZZLg4jMOVdXvkyCq1ga_nm6pnIXkcdJ1FFOT4DGjkXxfGK2JJ9Jm/s1600/Symbol+1.png";

document.imgDisplay.src = pictures[0].src;

}

</script>

</head>

</body>

</html>
--------------------------------------------------------------------------
CSS CODE IN JAVA SCRIPT
-------------------------------------------------------------------------

--------------------------------------------------------------------------

<body>
<!-- https://www.w3schools.com/jsref/prop_style_cursor.asp -->
<script>
var ImageVariable=document.createElement("img");
ImageVariable.src="smiley.gif";
ImageVariable.id="ImageId";
ImageVariable.name="ImageName";
ImageVariable.alt="ImageAlt";
ImageVariable.innerHTML="ImageHtml";
ImageVariable.title="ImageTitle";
ImageVariable.width=100;
ImageVariable.height=200;
ImageVariable.style.backgroundColor="Red";
ImageVariable.style.border="5px double Blue";
ImageVariable.style.cursor="pointer";
document.body.appendChild(ImageVariable);
</script>

--------------------------------------------------------------------------

IMAGE SIZE INCREASE WITH BUTTON
http://www.unit-conversion.info/texttools/similar-text/#data

---------------------------------------------------------------------------------------------------------------

<head>
<!-- https://www.codegrepper.com/code-examples/fortran/jss+get+html+body+size -->
<!-- http://www.unit-conversion.info/texttools/similar-text/#data -->
<title>JavaScript Increasing and Decreasing Image Size</title>
<style>
button{
padding: 3px 6px;
}
button img{
vertical-align: middle;
}
</style>
<script>
function zoomin(){
if(ImageId.clientWidth == 500){
alert("Maximum zoom-in level reached.");
} else{
ImageId.style.width = (ImageId.clientWidth + 50) + "px";
} 
}
function zoomout(){
if(ImageId.clientWidth == 50){
alert("Maximum zoom-out level reached.");
} else{
ImageId.style.width = (ImageId.clientWidth - 50) + "px";
}
}
</script>
</head>
<body>
<p>
<button type="button" onclick="zoomin()"><img src="smiley.gif"> Zoom In</button>
<button type="button" onclick="zoomout()"><img src="smiley.gif"> Zoom Out</button>
</p>
<img src="https://www.w3schools.com/tags/smiley.gif" id="ImageId" width="250" alt="Cloudy Sky">
</body>
</html>

--------------------------------------------------------------------------------------------
SAVE IMAGE IN JAVA SCRIPT 
https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
https://konvajs.org/docs/sandbox/Stage_Preview.html
https://konvajs.org/docs/sandbox/Editable_Text.html
TOGGLE BUTTON AND MANY MORE
https://www.quackit.com/html/templates/
https://jsfiddle.net/17ut2kzm/
EDIT ABLE TEXT IN HTML
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

--------------------------------------------------------------------------------------------

<html>
<head>
<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva High Quality Export Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons"><button id="save">Save as image</button></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var box = new Konva.Rect({
x: stage.width() / 2 - 50,
y: stage.height() / 2 - 25,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
layer.add(box);
var circle = new Konva.Circle({
x: stage.width() - 50,
y: stage.height() - 50,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
layer.add(circle);
layer.draw();
// function from https://stackoverflow.com/a/15832662/512042
function downloadURI(uri, name) {
var link = document.createElement('a');
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
document.getElementById('save').addEventListener(
'click',
function () {
var dataURL = stage.toDataURL({ pixelRatio: 3 });
downloadURI(dataURL, 'stage.png');
},
false
);
</script>
</body>
</html>
-----------------------------------------------------------------------------------------

SEND TEXT FROM INPUT BOX  TO CANVAS BOX AND SAVE IMAGE WITH JQUERY FILE

------------------------------------------------------------------------------------------------------------------------------------

<html>
<!-- https://jsfiddle.net/17ut2kzm/ -->
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<form id="myForm">
<div class="form-group">
<label for="myMessage">Message</label>
<input type="text" name="myMessage" id="myMessage"/>
</div>
<button type="submit">Add Text</button>
</form>
<script type="text/javascript">//<![CDATA[
(function($){
$("#myForm").on("submit", function(e){
e.preventDefault();
var myMessage = $("#myMessage").val();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(myMessage,30,30);
});
})(jQuery);
//]]></script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------

IMAGE SRC ARRAY IN JAVA SCRIPT

https://codepen.io/mel/pen/Brads
IMAGE ARRAY IN HTML 5
https://stackoverflow.com/questions/42600887/image-array-in-html5

---------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------

<body>

var images = [{

caption: "Red Slate Mountain",

alt: "Mountain",

url: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"

}, {

caption: "St. Petersburg River",

alt: "River",

url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"

}, {

caption: "Lybian Desert",

alt: "Desert",

url: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Libyan_Desert_-_2006.jpg/320px-Libyan_Desert_-_2006.jpg"

}, {

caption: "Azerbaijan Forest",

alt: "Forest",

url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Azerbaijan_forest_3.JPG/320px-Azerbaijan_forest_3.JPG"

}, {

caption: "Indonesian Jungle",

alt: "Jungle",

url: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Indonesian_jungle3%2C_Zoo_Prague.jpg/320px-Indonesian_jungle3%2C_Zoo_Prague.jpg"

}],

parent = document.getElementById('box');

window.onload = function() {

images.forEach(function(v) {

var img = document.createElement("img");

img.src = v.url;

img.alt = v.alt;

box.appendChild(img);

})

}

</script>

</body>

-----------------------------------------------------------------------------------------------------------------------

SIMPLE IMAGE SRC IN JAVA SCRIPT

-----------------------------------------------------------------------------------------------------------------------

USE SAME WORDS IN HTML AND JAVA SCRIPT

SameWord1.src="https://www.w3schools.com/tags/smiley.gif";

</script>

-----------------------------------------------------------------------------------------------------------------------

IMAGE SRC IN JAVA SCRIPT

READ MORE:

http://xoax.net/javascript/crs/core/index.php

http://xoax.net/javascript/crs/core/lessons/Lesson3/
WE NEED SOME HTML CODE BEFORE JAVA SCRIPT APPEND CHILD THEREFORE WE CAN REPLACE
<body> TAGE WITH SIMPLE WORD FBGADGETS, OR USE TAG LIKE<HTML><fbgadgets> ETC
witout script

var x.innerHTML = '<img width="100" height="100" src="smiley.gif">';"

-----------------------------------------------------------------------------------------------------------------------

<body>

var x = document.createElement("img");

x.src = "https://www.w3schools.com/tags/smiley.gif";

document.body.appendChild(x);

document.write("<br />CODE SAME WORD X AND BODY ");

</script>

</body>

IMAGE SRC IN JAVA SCRIPT WITHOUT HTML

var x = document.createElement("img");

x.src = "https://www.w3schools.com/tags/smiley.gif";

document.write("<br />CODE SAME WORD X AND BODY ");

document.body.appendChild(x);

</script>

-----------------------------------------------------------------------------------------------------------------------
IMAGE SRC WIDTH HEIGHT IN JAVA SCRIPT
-----------------------------------------------------------------------------------------------------------------------

SameWord1.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJhNpEqvT-t5TlHO9tivBlPiX1lnxKu2xfKndXE4a19SSXMLU1d3Y7LAcu8MEaFZuXFW8MR0peZhADEvGV7v0KK2ioVM-6jGRBWjaGTnjpZE9x3J-P_f0l6X58tXQ8nhoFN9OVe8jFjlQ/s1600/image1.gif";

//HERE ACTUAL IMAGE WIDTH & HEIGHT 70px

//WE CHANGE IMAGE WIDTH & HEIGHT 50px

SameWord1.width = "50";

SameWord1.height = "50";

</script>

-----------------------------------------------------------------------------------------------------------------------

IMAGE ARRAY WITH JOIN METHOD SRC

https://stackoverflow.com/questions/29488371/how-to-add-a-list-of-images-to-the-document-from-an-array-of-urls

var x =[

"https://www.w3schools.com/tags/smiley.gif",

];

document.getElementById("demo")

.innerHTML = '<img src="' + x.join('" /><img src="') + '" />';

</script>

-----------------------------------------------------------------------------------------------------------------------

WORD SHUFFLE ARRAY CODE GOT FROM AS3 FLASH

var MovieArray = new Array("MOVIE1","MOVIE2","MOVIE3");

new Array LINE ALSO WRITE WITH BIG BRACKET

var MovieArray =["MOVIE1","MOVIE2","MOVIE3"];

-----------------------------------------------------------------------------------------------------------------------

var MovieArray = new Array("MOVIE1","MOVIE2","MOVIE3");

for (var i = 0; i < MovieArray.length; i++) {

var RandomNumber = Math.floor(Math.random()* MovieArray.length)

var MoviePosX = MovieArray[RandomNumber]

var MoviePosY= MovieArray[RandomNumber]

MovieArray[RandomNumber] = MovieArray[i]

MovieArray[i] = MoviePosX

MovieArray[i] = MoviePosY

}

TextBox1.innerHTML += MovieArray

</script>
------------------------------------------------------------------------
OR USE ABOVE SHORT CODE FOR RANDOM WORD
------------------------------------------------------------------------

var MovieArray = ["MOVIE1","MOVIE2","MOVIE3"];

for (var i = 0; i < MovieArray.length; i++) {

var RandomNumber = Math.floor(Math.random()* MovieArray.length);

var MoviePosX = MovieArray[RandomNumber];

MovieArray[RandomNumber] = MovieArray[i];

MovieArray[i] = MoviePosX;

}

TextBox1.innerHTML += MovieArray;

document.write(MovieArray);

</script>

-------------------------------------------------------------------------

OR USE THIS CODE FOR RANDOM BUTTON

READ MORE:
http://fbgadgets.blogspot.com/2017/08/get-button-id-after-click-in-java-script.html
-------------------------------------------------------------------------

</div>

var Array = new Array(btn1,btn2,btn3,btn4);

var RandomNumber = Math.floor(Math.random()* Array.length)

container.appendChild(Array[RandomNumber]);

</script>

--------------------------------------------------------------------------------------------------------------------

WORD SHUFFLE ARRAY CHANGE INTO IMAGE SHUFFLE ARRAY

var MovieArray=[ ALSO WRITE AS var MovieArray = new Array

--------------------------------------------------------------------------------------------------------------------

var MovieArray=[

"http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png",

"http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png",

"http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png",

"http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",

];

for (var i = 0; i < MovieArray.length; i++) {

var RandomNumber = Math.floor(Math.random()* MovieArray.length)

var MoviePosX = MovieArray[RandomNumber]

var MoviePosY= MovieArray[RandomNumber]

MovieArray[RandomNumber] = MovieArray[i]

MovieArray[i] = MoviePosX

MovieArray[i] = MoviePosY

}

TextBox1.innerHTML = '<img src="' + MovieArray .join('" /><img src="') + '" />';

</script>

---------------------------------------------------------------------------------------------------------------

<body>

var x = [

{

url: "https://www.w3schools.com/tags/smiley.gif"

{

url: "https://www.w3schools.com/tags/smiley.gif"

{

url: "https://www.w3schools.com/tags/smiley.gif"

}

];

document.getElementById("demo")

x.forEach(function(v) {

var img = document.createElement("img");

img.src = v.url;

demo.appendChild(img);

})

</script>

</body>

---------------------------------------------------------------------------------------------------------------

IMAGE REPEAT 5 TIMES WITH LOOP AND IMAGE APPEND CHILD

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create
WE DONOT NEED BODY TAG WHEN WE USE INNER HTML LINE FORMULA

document.getElementById("demo").innerHTML = document.body.appendChild(x);

---------------------------------------------------------------------------------------------------------------

<title> IMAGE REPEAT 5 TIMES WITH IMAGE ADD CHILD </title>

<body>

for (var i = 0; i < 5; i++) {

var x = document.createElement("IMG");

x.setAttribute("src","https://www.w3schools.com/jsref/smiley.gif");

document.body.appendChild(x);

}

</script>

</body>
============================================================================

for (var i = 0; i < 5; i++) {

var x = document.createElement("IMG");

x.setAttribute("src","https://www.w3schools.com/jsref/smiley.gif");

//WE DONOT NEED BODY TAG WHEN WE USE INNER HTML LINE FORMULA

document.getElementById("demo")

.innerHTML = document.body.appendChild(x);

}

</script>

-----------------------------------------------------------------------------------------------------------------------

<html>

<body>

var imgs =[

"http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",

"http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png",

"http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png",

];

document.getElementById('imageContainer')

.innerHTML = '<img src="' + imgs.join('" /><img src="') + '" />';

</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------

JAVA SCRIPT IMAGE ARRAY SLIDER

https://www.youtube.com/watch?v=QkcemPr4xaU

-----------------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>JavaScript Slider 1</title>

var images = [

"http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",

"http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png",

"http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png",

"http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png",

"http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png",

"http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png",

"http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png",

"http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png",

"http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png",

"http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"

];

var i = 0;

function mySlider()

{

document.getElementById('slide').src = images[i];

if(i < images.length - 1)

{

i++;

}

else{

i = 0;

}

setTimeout("mySlider()",2500);

}

</script>

</head>

<body>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------

IMAGE LOOP IN JAVASCRIPT

https://www.google.co.uk/search?q=image+loop
https://jsfiddle.net/222bq9Lt/
https://stackoverflow.com/questions/35090570/javascript-image-array-loop

-----------------------------------------------------------------------------------------------------------------------

<body>

<title>image loop in javascript</title>

var URLs = [

//MAKE DUMMY IMAGES WITH PALCEHOLD WEBSITE

"http://placehold.it/128x128.png/f00/400?text=Red",

"http://placehold.it/128x128.png/0f0/040?text=Green",

"http://placehold.it/128x128.png/00f/004?text=Blue",

"http://placehold.it/128x128.png/ff0/440?text=Yellow"

];

var imgs = URLs.map(function(URL) {

var img = new Image();

img.src = URL;

document.body.appendChild(img);

return img;

});

</script>

</body>

-----------------------------------------------------------------------------------------------------------------------

CODE : 2

src array in javascript

https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&q=src+array+in+javascript&spell=1&sa=X&ved=0ahUKEwjl89vW0qnVAhXID8AKHS1dCKgQvwUIJSgA&biw=1164&bih=631

---------------------------------------------------------------------------------------------------------------

<html>

<head>

<!-- https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&q=src+array+in+javascript&spell=1&sa=X&ved=0ahUKEwjl89vW0qnVAhXID8AKHS1dCKgQvwUIJSgA&biw=1164&bih=631

-->

<title>dynamically add javascript array to img src</title>

//<![CDATA[

window.onload=function(){

var A = [];

A[2] = "http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png";

var imp = A [2];

document.getElementById("prodimg").src=imp;

}//]]>

</script>

</head>

<body>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------

<html>

<head>

window.onload=function(){

x = "http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",

document.getElementById("myImg").src= x;

}

</script>

</head>

<body>

</body>

</html>

================================================================================

FOR BUTTON LOAD IMAGE CHANGE BELOW BODY PART

CLICK ON BUTTON FOR LOAD IMAGE IN BUTTON

</button>

FOR IMAGE LOAD IMAGE CHANGE BELOW BODY PART

CLICK ON IMAGE TAB FOR LOAD IMAGE IN IMAGE TAB

OR USE VERITABLE X AND BRACKET IN BELOW CODE

var x =["http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"]
=============================================================================

var x =["https://www.w3schools.com/tags/smiley.gif"]

document.getElementById("demo").src=x;

</script>

==============================================================================

IMAGE FUNCTION RUN WITH BUTTON
http://fbgadgets.blogspot.co.uk/2018/05/load-function-change-into-function-in.html
FUNCTION RUN WITH BUTTON
BODY TAG CODE CHANGE INTO BUTTON

==============================================================================

<html>

<head>

function myFunction(){

var x =["https://www.w3schools.com/tags/smiley.gif"]

document.getElementById("demo").src= x;

}

</script>

</head>

</html>

===============================================================================

<html>

<head>

function myFunction(){

x = "http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",

document.getElementById("myImg").src= x;

}

</script>

</head>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------

HOW TO REMOVE BODY ON LOAD FUNCTION

WE CANT USE AFTER BODY TAG JAVA SCRIPT CODE THEN HTML CODE

-----------------------------------------------------------------------------------------------------------------------

<html>

<body>

function myFunction(){

x = "http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",

document.getElementById("myImg").src= x;

}

myFunction();

</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------

CODE : 3

src array in javascript

https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&q=src+array+in+javascript&spell=1&sa=X&ved=0ahUKEwjl89vW0qnVAhXID8AKHS1dCKgQvwUIJSgA&biw=1164&bih=631

http://oclip.net/play-video-cs50-final-project-memory-the-game_oclkne0HVNg5cQ.html

https://rpiga.github.io/CS50x-Final-Project/

https://www.webmasterworld.com/javascript/3370340.htm

http://plnkr.co/edit/T1PGGCQ6QmjeEqDAREI9?p=preview

-----------------------------------------------------------------------------------------------------------------------

<button onclick="myFunction()">ADD IMAGE</button>

function myFunction() {

var x = document.createElement("IMG");

x.setAttribute("src", "smiley.gif");

document.body.appendChild(x);

}

</script>

==================================================================

<html>

<head>

</head>

<body>

<h1>Hello Plunker!</h1>

var test = ['http://andrewchen.co/wp-content/uploads/2011/07/minimal-desktop-wallpaper-simple-is-beautiful.png', 'https://www.w3schools.com/jsref/compman.gif']

var imgs = "";

for (var i = 0; i < test.length; i++) {

var img = document.createElement('img');

img.setAttribute('src', test[i]);

img.setAttribute('width', '200px');

imgs += img.outerHTML;

}

var container = document.getElementById('container');

container.innerHTML = imgs;

</script>

</body>

</html>
===============================================================================

var test = [

"https://via.placeholder.com/50.png/000/fff",

"https://via.placeholder.com/50/09f.png/fff",

];

for (var i = 0; i < test.length; i++) {

var img = document.createElement('img');

img.setAttribute('src', test[i]);

document.getElementById('demo').innerHTML += img.outerHTML;

}

</script>

<div id="demo"></div>

<script>

var test = [

"smiley.gif",

"paper.gif",

];

for (var i = 0; i < test.length; i++) {

var img = document.createElement('img');

img.setAttribute('src', test[i]);

demo.innerHTML += img.outerHTML;

</script>

----------------------------------------------------------------------------------------------------------------------
APPEND CHILD METHOD
image array in javascript
https://www.google.co.uk/search?rlz=1C1_____enGB747GB747&q=image+array+in+javascript&oq=image+ARR+in+javascript
https://stackoverflow.com/questions/42327498/output-an-array-of-images-in-javascript
https://jsfiddle.net/Hek_Mat/7xen5tgc/
https://stacksnippets.net/js
-----------------------------------------------------------------------------------------------------------------------

<html>

<head>

//<![CDATA[

window.onload=function(){

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;

document.body.appendChild(img);

});

}

//]]>

</script>

</head>

<body>

</body>

</html>

=============================================================================

<html>

<head>

<style>

</style>

</head>

<body>

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

});

</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------

BUTTON ARRAY IN JAVA SCRIPT
http://jsfiddle.net/ZRZY9/2/
--------------------------------------------------------------------------------------------------------------------------

<html>

<head>

</style>

//<![CDATA[

window.addEvent('load', function() {

var contIDArray = ["google", "youtube", "wiki", "facebook", "twitter", "tumblr", "dropbox"];

window.load = initAll();

function initAll(){

applyProperties();

}

function applyProperties(){

for (var i = 0; i < contIDArray.length; i++){

addEventListeners(contIDArray[i] + "SearchButton");

}

function addEventListeners(id){

var obj = document.getElementById(id);

obj.addEventListener("click", function() { testAlert(id); }, true);

}

function testAlert(id){

alert(id + " clicked")

}

});

//]]>

</script>

</head>

<body>

<button id="googleSearchButton">GOOGLE</button>

<button id="youtubeSearchButton">YOUTUBE </button>

<button id="facebookSearchButton"> FACEBOOK </button>

<button id="twitterSearchButton"> TWITTER</button>

<button id="tumblrSearchButton"> TUMBLR</button>

<button id="dropboxSearchButton"> DROPBOX</button>

</body>

</html>

-------------------------------------------------------------------------------------------------------------------------
🅱🆄🆃🆃🅾🅽 🅲🅻🅸🅲🅺 🅰🅽🅳 🅸🅼🅰🅶🅴 🆂🅷🅾🆆 🅹🅰🆅🅰🆂🅲🆁🅸🅿🆃
-------------------------------------------------------------------------------------------------------------------------

<html>
<head>
<style>
.off {
display: none;
}
</style>
</head>
<body>
<div id="btn-group">
<input type="button" value="A" class="btn" />
<input type="button" value="B" class="btn" />
<input type="button" value="C" class="btn" />
<input type="button" value="D" class="btn" />
<input type="button" value="E" class="btn" />
</div>
<div id="img-group">
<img src="http://www.ipicthat.com/alphabet/a.jpg" class="img" width='100'>
<img src="http://www.ipicthat.com/alphabet/b.jpg" class="img" width='100'>
<img src="http://www.ipicthat.com/alphabet/c.jpg" class="img" width='100'>
<img src="http://www.ipicthat.com/alphabet/d.jpg" class="img" width='100'>
<img src="http://www.ipicthat.com/alphabet/e.jpg" class="img" width='100'>
</div>
<script type="text/javascript">
var btnGroup = Array.from(document.getElementsByClassName("btn"));
var imgGroup = Array.from(document.getElementsByClassName('img'));
imgGroup.forEach(function(img, idx) {
btnGroup[idx].onclick = function() {
img.classList.toggle('off');
}
});
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------