Thursday 27 July 2017

IMAGE SRC ARRAY IN JAVA SCRIPT

IMAGE SRC ARRAY IN JAVA SCRIPT


---------------------------------------------------------------------------------------------------------------
CODE:1
http://fbgadgets.blogspot.co.uk/2017/07/java-script-array.html
---------------------------------------------------------------------------------------------------------------
<html>
<head>
<script>
var pictures = new Array();
function myFunction(){
pictures[0] = new Image();
pictures[0].src = "https://1.bp.blogspot.com/-OqM5Kg7Pd_k/Vx0pylxo6-I/AAAAAAABano/6E74V__h_o0nCOuZ9S6DG1htf7OifIA_ACLcB/s1600/Symbol%2B1.png";
document.imgDisplay.src = pictures[0].src;
}
</script>
</head>
<body onLoad = "myFunction()">
<img src = "" name = "imgDisplay" />
</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
---------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
<body>
<!-- https://stackoverflow.com/questions/42600887/image-array-in-html5 -->
<div id='box'></div>
<script type="text/javascript">
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
<img id="SameWord1">
<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">';"
-----------------------------------------------------------------------------------------------------------------------
<!-- https://www.youtube.com/watch?v=pdKSvE0XTLM-->
<body>
<script>
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
<script>
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
-----------------------------------------------------------------------------------------------------------------------
<img id="SameWord1">
<script>
SameWord1.src="https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/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
<div id="demo"></div>
<script type="text/javascript">
var x =[
"https://www.w3schools.com/tags/smiley.gif",
"https://www.w3schools.com/tags/smiley.gif",
"https://www.w3schools.com/tags/smiley.gif",
"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"];
-----------------------------------------------------------------------------------------------------------------------
<DIV id="TextBox1"></DIV>
<script>
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[RandomNumber] = MovieArray[i]
MovieArray[i] = MoviePosX
MovieArray[i] = MoviePosY
}
TextBox1.innerHTML += MovieArray
</script>
------------------------------------------------------------------------
OR USE ABOVE SHORT CODE FOR RANDOM WORD
------------------------------------------------------------------------
<DIV id="TextBox1"></DIV>
<script>
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 id="container">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
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
--------------------------------------------------------------------------------------------------------------------
<DIV id="TextBox1"></DIV>
<script type="text/javascript">
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[RandomNumber] = MovieArray[i]
MovieArray[i] = MoviePosX
MovieArray[i] = MoviePosY
}
TextBox1.innerHTML = '<img src="' + MovieArray .join('" /><img src="') + '" />';
</script>
---------------------------------------------------------------------------------------------------------------
<body>
<!-- https://stackoverflow.com/questions/42600887/image-array-in-html5 -->
<div id='demo'></div>
<script type="text/javascript">
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);
---------------------------------------------------------------------------------------------------------------
<!-- https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create -->
<title> IMAGE REPEAT 5 TIMES WITH IMAGE ADD CHILD </title>
<body>
<script>
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>
============================================================================
<img id="demo">
<script>
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>
<!-- https://stackoverflow.com/questions/29488371/how-to-add-a-list-of-images-to-the-document-from-an-array-of-urls -->
<body>
<div id="imageContainer"></div>
<script type="text/javascript">
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
-----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- https://www.youtube.com/watch?v=QkcemPr4xaU -->
<title>JavaScript Slider 1</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
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>
<img id="slide" src="" alt="" width="400" height="200"  />
<script>mySlider();</script>
</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
-----------------------------------------------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/16825964/create-and-load-images-using-a-loop-in-javascript -->
<body>
<title>image loop in javascript</title>
<script type="text/javascript">
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
 -->
<!-- http://jsfiddle.net/9aUq8/1/ -->
<!-- https://stackoverflow.com/questions/16842941/dynamically-add-javascript-array-to-img-src -->
<!-- http://plnkr.co/edit/T1PGGCQ6QmjeEqDAREI9?p=preview -->
<title>dynamically add javascript array to img src</title>
<script type='text/javascript'>
//<![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>
<img  id="prodimg">
</body>
</html>
 -----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script type='text/javascript'>
window.onload=function(){
x = "http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",
document.getElementById("myImg").src= x;
}
</script>
</head>
<body>
<img  id="myImg">
</body>
</html>
================================================================================
FOR BUTTON LOAD IMAGE CHANGE BELOW BODY PART
CLICK ON BUTTON FOR LOAD IMAGE IN BUTTON
<button onClick = "myFunction()">
<img  id="myImg"/>
</button>
FOR IMAGE LOAD IMAGE CHANGE BELOW BODY PART
CLICK ON IMAGE TAB FOR LOAD IMAGE IN IMAGE TAB
<img id="myImg" height="150" size="150" alt="ClickHereImageTag" onClick="myFunction()">
OR USE VERITABLE X AND BRACKET IN BELOW CODE
var x =["http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"]
=============================================================================
<img id="demo">
<script>
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
<body onLoad = "myFunction()">
<button type="button" onclick="myFunction()">Try it</button>
==============================================================================
<html>
<head>
<script type='text/javascript'>
function myFunction(){
var x =["https://www.w3schools.com/tags/smiley.gif"]
document.getElementById("demo").src= x;
}
</script>
</head>
<button type="button" onclick="myFunction()">Try it</button>
<img  id="demo">
</html>
===============================================================================
<html>
<head>
<script type='text/javascript'>
function myFunction(){
x = "http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",
document.getElementById("myImg").src= x;
}
</script>
</head>
<body onLoad = "myFunction()">
<img  id="myImg">
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
HOW TO REMOVE BODY ON LOAD FUNCTION
<!--AFTER BODY TAG HTML CODE THEN USE JAVASCRIPT CODE-->
WE CANT USE AFTER BODY TAG JAVA SCRIPT CODE THEN HTML CODE
<body onLoad = "myFunction()"> <-----------> <body>
 -----------------------------------------------------------------------------------------------------------------------
<html>
<head></head>
<body>
<!--AFTER BODY TAG HTML CODE THEN USE JAVASCRIPT CODE-->
<img  id="myImg">
<script type='text/javascript'>
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
 -----------------------------------------------------------------------------------------------------------------------
<!-- https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create -->
<button onclick="myFunction()">ADD IMAGE</button>
<script>
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>
<div id="container"></div>
<script>
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>
===============================================================================
<div id="demo"></div>
<script>
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>
<!-- https://jsfiddle.net/Hek_Mat/7xen5tgc/ -->
<script type='text/javascript'>
//<![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>
<!-- https://stacksnippets.net/js -->
<style>
</style>
</head>
<body>
<script type="text/javascript">
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>
<!-- http://jsfiddle.net/ZRZY9/2/ -->
<!-- https://stackoverflow.com/questions/45062578/how-to-display-an-image-array-with-js-and-use-lightbox2 -->
<head>
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.2-full-nocompat.js"></script>
<style type="text/css">
</style>
<title></title>
<script type='text/javascript'>
//<![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="wikiSearchButton"> WIKI</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>
--------------------------------------------------------------------------------------------------------------------------













Posted by on Thursday 27 July 2017 at 08:33
Labels: , , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets