html image src call javaScript variable - javascript

this is my code: I want to ask
<script type="text/javascript">
var total = 4;
</script>
How can I do this?
<img src="img/apple_" + total + ".png" id="imageBox"/>
I've been try to use call function and document.onload but it's not work at all, can somebody save me?

I am supposing you just want to update the image src with javascript.
document.getElementById('imageBox').src = "img/apple_" + total + ".png";

You need to add html in JavaScript like this:
<div id="foo"></div>
<script type="text/javascript">
var total = 4;
document.getElementById('foo').innerHTML = '<img src="img/apple_' + total + '.png" id="imageBox"/>';
</script>

window.onload = function() {
var total = 4;
document.getElementById('imageBox').src = 'img/apple_' + total + '.png"';
};
<img src="" id="imageBox"/>

Here is a clean way to do this.
Demo
var create_img_element = function(total, targetId){
//create the img element
var img = document.createElement('img');
//set the source of the image
img.src = 'img/apple_' + total + '.png';
//add the image to a specific element
document.getElementById(targetId).appendChild(img);
}
create_img_element(5, 'foo');

Related

display images array onclick button

HTML: I set the button onclick "myFunction" Now I would like images to be displayed onclick
<body>
<p>Click the button to see some images</p>
<button onclick="myFunction()">See the Images!!!</button>
<script src="js2/images.js">
</script>
</body>
JS: Need to display images onclick...Not sure if i am on the right track as I am a beginner at JS...I cant seem to get the images to display, only the src name of the images....
function myFunction() {
pge = new Array ()
pge[4] = "../images/sky3.jpg"
pge[3] = "../images/sky8.jpg"
pge[2] = "../images/sky7.jpg"
pge[5] = "../images/sky6.jpg"
pge[0] = "../images/sky5.jpg"
pge[1]= "../images/sky4.jpg"
pge[6] = "../images/sky1.jpg"
pge[7] = "../images/sky2.jpg"
for (i=0;i<=pge.length-1;i++) {
var img = document.createElement("img");
????????
}
}
Add line
img.setAttribute("src", pge[i]);
in your ?????? part
Something like this should do the trick. (in part based on How to display image with javascript?)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Click the button to see some images</p>
<button onclick="myFunction()">See the Images!!!</button>
<script>
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
// This next line will just add it to the <body> tag
document.body.appendChild(img);
}
function myFunction() {
var pge = ["http://www.w3schools.com/graphics/pic_the_scream.jpg", "http://www.w3schools.com/images/colorpicker.gif"];
for(var i = 0; i < pge.length; i++){
show_image(pge[i], 100, 200, i)
}
}
</script>
</body>
</html
Your HTML needs a place to display the images when the button is clicked. You can use CSS to style the div.
<body>
<p>Click the button to see some images</p>
<button onclick="myFunction()">See the Images!!!</button>
<div id="showImg"></div>
<script src="js2/images.js"></script>
</body>
You don’t have to use the Array constructor. Store your images in an array as shown below, use a for-loop to loop through the array, then use the innerHTML property to create img tags, locate your images and display them. You can use CSS to style the images.
var pge = ["sky3.jpg", "sky8.jpg", "sky7.jpg", "sky6.jpg", "sky5.jpg", "sky4.jpg", "sky1.jpg", "sky2.jpg"];
var showImg = document.getElementById("showImg");
var myFunction = function(){
for(var i = 0; i < pge.length; i++)
{
showImg.innerHTML = "<img src='images/" + pge[0] + "'/> <img src='images/" + pge[1] + "'/> <img src='images/" + pge[2] + "'/> <img src='images/" + pge[3] + "'/> <img src='images/" + pge[4] + "'/> <img src='images/" + pge[5] + "'/> <img src='images/" + pge[6] + "'/> <img src='images/" + pge[7] + "'/>";
}
}

how to make javascript random image with hyperlink with array

i want to make random image with link, but i didnt understand. anyone can help me?
this is the javascript in header
<script type="text/javascript">
var random_images_array = ['banner/headline/chrome.png','banner/headline/thunderbird.png','banner/headline/vlc.png'];
function getRandomImage(imgAr, path) {
path = path || 'images/';
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var lnk = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt="" class="img-responsive">';
document.write(imgStr); document.close();
}
</script>
this is the javascript in body
<script type="text/javascript">
getRandomImage(random_images_array, 'images/')
</script>

Read GET value on JavaScript src attribute using JavaScript

I am using this code and my file name is ads.js
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*?)[#.]/gi, function(m, key, value) {
vars[key] = value;
});
return vars;
}
var pic = getUrlVars()["pic"];
var random_ads_array = ["visitors.jpg", "payouts.jpg", "logos-icon.jpg"];
function getRandomAds(imgAr, path) {
path = path || 'buycimg/'; // default path here
var num = Math.floor(Math.random() * imgAr.length);
var img = imgAr[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}
And in html part I am using this code
<script type="text/javascript" src="ads.js?pic=45bus67"></script>
<script type="text/javascript">getRandomAds(random_ads_array);</script>
Out put is showing an image but not showing the correct link
Output is like this
http://appricart.com/undefined.html
I want to show
http://appricart.com/45bus67.html
Help related this thankx
Why don't you just put the pic value into the function?
<script type="text/javascript" src="ads.js"></script>
<script type="text/javascript">getRandomAds(random_ads_array, "45bus67");</script>
ads.js
var random_ads_array = ["visitors.jpg", "payouts.jpg", "logos-icon.jpg"];
function getRandomAds(imgAr, pic, path) {
path = path || 'buycimg/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
Perhaps you could give it an ID - and then:
src = document.getElementById("scriptId").getAttribute("src");
src = src.split("?pic=");
src = src[1];
And voila! You can do what you need to do with src

Javascript for i not printing array

I've searched around and found no pure js solution to my issue that I can apply to my code.
It's a script that prints an array of images, but for now it only prints 1 array.
Pertinent code in html:
<div id="imgViewer"></div>
<script>
var imgViewerImages = ['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];
</script>
<script src="services/imgViewer.js"></script>
And in JS:
function imgViewerPrinter(){
var imgViewerTarget = document.getElementById('imgViewer');
imgViewerImages.toString();
for (var i=0;i<imgViewerImages.length;i++){
imgViewerTarget.innerHTML = '<img src="' + imgViewerImages[i] + '">';
}
}
window.onload = imgViewerPrinter();
I'm still a noob is JS so I ask for your pacience.
Thanks in advance
try :
imgViewerTarget.innerHTML += "<img src="' + imgViewerImages[i] + '">";
If you want to print out an array of images shouldnt you have your HTML code in the loop making i the image number for example;
for (var i=0;i<imgViewerImages.length;i++){
var imgViewerImages = ['img/imgViewer/' + [i] + '.png'];
}
Try this optimized soln.
var imgViewerImages =['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];
function imgViewerPrinter(){
var imgList=[];
for (var i=0;i<imgViewerImages.length;i++){
imgList.push('<img src="' + imgViewerImages[i] + '" />');
}
var imgViewerTarget = document.getElementById('imgViewer');
imgViewerTarget.innerHTML = imgList.join('');
}
window.onload = imgViewerPrinter();
try something like this,Because your code rewrite innerHTML again and again, so you get last iterated value.
Instead of manipulating DOM in every loop,Below code will manipulate your DOM one time only.
function imgViewerPrinter(){
var imgViewerTarget = document.getElementById('imgViewer');
var imgViewerImages_length = imgViewerImages.length;
var image = '';
for (var i=0;i<imgViewerImages_length;i++){
image += '<img src="' + imgViewerImages[i] + '">';
}
imgViewerTarget.innerHTML = image;
}

javascript to iterate image folders and add images to an unordered list

I am trying to figure out exactly why this script wont work. I first thought it might be because of the div and the following ul, but it still wont work after assigning an additional ID to the ul. Really need to figure this out tonight, so all help is highly appreciated.
HTML
<div id="Home-Image">
<h1>Images</h1>
<ul id="Home-Images">
<li><img src="" width=100 height=100/></li>
<li><img src="" width=100 height=100/></li>
<li><img src="" width=100 height=100/></li>
<li><img src="" width=100 height=100/></li>
<button id="toggle-two">View more Images</button>
</ul>
JavaScript
$(document).ready(function() {
var files = {'jpg':4};
var pageName = "d";
for (var ext in files){
for (var i = 0; i < files[ext]; i++){
var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext;}
var img = new Image();
img.src = src;
var container = document.getElementById('Home-Images');
container.appendChild(img);
}});
Maybe you want something like this
$(document).ready(function() {
var files = {'jpg':4}, pageName = "d", container = $('#Home-Images');
for (var ext in files)
{
for (var i = 0; i < files[ext]; i++)
{
var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "."+ext ;
var img = $('<img src="'+src+'" width=100 height=100 />');
container.append($('<li/>').html($('<a/>', {'href':'#'}).html(img)));
}
}
});
But make sure this path http://yourDomain/Images/D/allimagesd-1.jpg ​is right for all images.
Here is a demo but images are not available but you can see the source by browser inspection tool.
Modified code:jsfiddle
HTML:
<div id="Home-Image">
<h1>Images</h1>
<ul id="Home-Images">
<button id="toggle-two">View more Images</button>
</ul>​
JS:
$(document).ready(function() {
var files = {'jpg':4};
var pageName = "d";
var html = "", src;
for (var ext in files){
for (var i = 0; i < files[ext]; i++){
src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext;
html += '<li><img src="'+ src +'" width=100 height=100/></li>';
}
$("#Home-Images").prepend(html );
}}); ​

Categories