I am making an rpg game. So I am trying to make a for loop that will generate buttons to the screen this what I have so far,
$(document).ready(function() {
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'assets/images/young_link.jpg';
//var test = "<img src= '../images/young_link.jpg'>";
//var young_hero = ["young_link","young_zelda","impa", "malon"];
var young_hero = ["young_link"];
//var hero_images = [test];
for (var i = 0; i < young_hero.length; i++) {
var hero_btns = $("<buttons>");
hero_btns.addClass("hero");
hero_btns.attr("data-hero" , young_hero[i]);
hero_btns.attr("data-image" , imgArray[i]);
hero_btns.text(imgArray[i]);
hero_btns.text(young_hero[i]);
$("#buttons").append(hero_btns);
}
});
The problem is that it is not putting the image on the button.
In order to add an image to your button, you will have to do more than just data-image, You will need to actually create an <img> tag and give it the source of the image. Then you will need to use css to get the image lined up properly in your button.
I have updated your code to add the image to the first button.
$(document).ready(function() {
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7o2tCpqvs_XRpvtHbuRe9KwkzydiVhWLJ6YVTkQcpkev09w0MBCgNu2w';
//var test = "<img src= '../images/young_link.jpg'>";
var young_hero = ["young_link","young_zelda","impa", "malon"];
//var young_hero = ["young_link"];
//var hero_images = [test];
for (var i = 0; i < young_hero.length; i++) {
var hero_btns = $("<button>"); // changed from <buttons>
hero_btns.addClass("hero");
hero_btns.attr("data-hero" , young_hero[i]);
//hero_btns.text(imgArray[i]);
hero_btns.text(young_hero[i]);
hero_btns.append(imgArray[i])
$("#buttons").append(hero_btns);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
</div>
Not sure about your exact requirement. Seems you are trying to create a button inside another button.
If you want to add an image use img tag and its src attribute
Not tested but you can try this
$(document).ready(function() {
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'assets/images/young_link.jpg';
var young_hero = ["young_link"];
for (var i = 0; i < young_hero.length; i++) {
var hero_btns = $("<img>");
hero_btns.addClass("hero");
hero_btns.attr("data-hero", young_hero[i]);
hero_btns.attr("src", imgArray[i]);
hero_btns.text(imgArray[i]);
hero_btns.text(young_hero[i]);
$("#buttons").append(hero_btns);
}
});
$(function(){
var heroList = {
{heroName: "young_link", imagePath: "assets/images/young_link.jpg"},
{heroName: "young_zelda", imagePath: "assets/images/young_zelda.jpg"},
{heroName: "impa", imagePath: "assets/images/impa.jpg"},
{heroName: "young_link1", imagePath: "assets/images/young_link1.jpg"}];
for (var i = 0; i < heroList.length; i++) {
var hero_btns = $('<img class="hero">');
hero_btns.attr({
"data-index": i,
"src": heroList[i].imagePath,
"data-name": heroList[i].heroName,
"title": heroList[i].heroName
});
$("#buttons").append(hero_btns);
}
})
You can use this simple on jsfiddle example.
Related
i would like to create a function (javascript) where some images are displayed on the screen and the user can chose one of them by simply clicking over it. Once chosen, the src of the picture will be stored in a var. So far i made an images array, but i dont know if it's the right way to proceed, do any of you have some tips? Thanks all!
<script typre="text/javascript">
var img = new Array();
img[0] = new Image();
img[0].src = "../images/poggiatesta2.jpg";
img[1] = new Image();
img[1].src = "../images/poggiatesta1.JPG";
for (var i = 0; i < img.length; i++) {
document.body.appendChild(img[i]);
};
</script>
Try this :
var img = new Array();
img[0] = new Image();
img[0].src = "http://dummyimage.com/200/000/fff&text=Img0";
img[1] = new Image();
img[1].src = "http://dummyimage.com/200/000/fff&text=Img1";
img[2] = new Image();
img[2].src = "http://dummyimage.com/200/000/fff&text=Img2";
for (var i = 0; i < img.length; i++) {
var imagetag = document.createElement("img");
var onclick = document.createAttribute("onclick");
onclick.value = "myfun("+i+")";
var sorc = document.createAttribute("src");
sorc.value = img[i].src;
var id = document.createAttribute("id");
id.value = "my_image"+i;
imagetag.setAttributeNode(onclick);
imagetag.setAttributeNode(sorc);
imagetag.setAttributeNode(id);
document.body.appendChild(imagetag);
};
function myfun(i) {
var src = document.getElementById('my_image'+i).src;
//you can do anything with 'src' here
document.getElementById('demo').innerHTML = src; //for demo purpose
}
<p id="demo"></p>
OK, so, I am trying to allow a user to see a choice of images and click one to change the image in the table. The way it is currently merely adds the last image of the array. I know why this is (I think!), but struggling to find a solution. See comments. As always, all help appreciated.
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST4.png";
myImages[1] = "../www/images/TEST2.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i]; //I want to display this array to user somehow
//and for them to be able to choose one and for this.src to point to that.
var gogetImages = allImages.src;
this.src = (gogetImages); //I know this is wrong
};
};
};
};
//LATEST VERSION STARTS FROM HERE
function addImage (col) {
var img = new Image(); // Note that a new img variable will be declared each time this function is called
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src=myImages[i];
var newList = document.createElement("ul");
var newContent = allImages;
newList.appendChild(newContent);
my_div = document.getElementById("showPics");
document.body.insertBefore(newList, my_div);
};
allImages.onclick = function(){
alert("the click is working");//it is but only for the last image...grrrrr
//this.src = ????;
};
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
};
};
document.getElementById('holdTable').appendChild(table);
};
Well, in your case,
you are using img = new Image();
Assigning a value to a variable without declaring it "with a var inside a function" creates a global variable.
So, in your code, you are creating a global "img" variable and re-assigning it to a new image which is causing problems for you.
I would suggest you to split up code into a function as below.
function addImage (col) {
var img = new Image(); // Note that a new img variable will be declared each time this function is called
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST4.png";
myImages[1] = "../www/images/TEST2.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i]; //I want to display this array to user somehow
//and for them to be able to choose one and for this.src to point to that.
var gogetImages = allImages.src;
this.src = (gogetImages); //I know this is wrong
};
};
}
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
};
};
Hope it works fine for you now.
I am displaying the images from the array. I want the user to be able to choose an image from the array and for it to replace the current image img.src in the table. I have managed to show the user the image choices when a cell is clicked, but unsure where to go from here. I have tried a clickhandler on the array image but the alert is only showing when last image in array is clicked. Confused. All help appreciated.
function addImage (col) {
var img = new Image(); // Note that a new img variable will be declared each time this function is called
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src=myImages[i];
var newList = document.createElement("ul");
var newContent = allImages;
newList.appendChild(newContent);
my_div = document.getElementById("showPics");
document.body.insertBefore(newList, my_div);
};
allImages.onclick = function(){
alert("the click is working");//it is but only for the last image...grrrrr
};
//this.src = ????;
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
};
};
document.getElementById('holdTable').appendChild(table);
};
For starters, you need to move your click assignment inside your loop:
function addImage(col) {
var img = new Image(); // Note that a new img variable will be declared each time this function is called
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function() {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var newList = document.createElement("ul");
var newContent = allImages;
newList.appendChild(newContent);
my_div = document.getElementById("showPics");
document.body.insertBefore(newList, my_div);
allImages.onclick = function(e) {
img.src = e.target.src;
};
};
//this.src = ????;
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
};
};
document.getElementById('holdTable').appendChild(table);
};
...but the code you have will re-assign your click handlers every time an image is clicked, as well as recreating your DOM (HTML) elements. You might want to consider instead having it only hide/show my_div on subsequent clicks.
I have a table with a background image that, when clicked, displays other images for the user to choose from. This is working and appears or hides on click events. However, when the user clicks to add a second image the menu of images appears again (as it should) but twice. I have commented out a solution I tried. I thought on first click I could display my_div and then delete it in allImages.onclick. This is throwing up a null error in Chrome, probably understandably. The problem here is similar. Hope I added link correctly. Anyway, advice or help appreciated.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'block';
allImages.onclick = function (e) {
img.src = e.target.src;
my_div.style.display = 'none';
//var element = document.getElementById("showPics");
//element.parentNode.removeChild(element);
};
}
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);
I modified your code adding ul to hold all img. It works, but could be better.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
var myImages = new Array();
myImages[0] = "../www/images/TEST1.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST3.png";
var container = document.createElement("ul"); //ul to simplify hide/show
container.style.display = "none";
for (var i = 0; i < myImages.length; i++) {
var newList = document.createElement("li");
var im = document.createElement("img");
im.src = myImages[i];
newList.appendChild(im);
im.onclick = function () {
img.src = this.src;
};
container.appendChild(newList);
}
col.appendChild(container);
col.onclick = function () {
if (container.style.display == "none")
container.style.display = "block";
else
container.style.display = "none";
};
}
I'm trying to preload images with javascript:
$(document).ready(function () {
preloadImages(
['../../Content/Resources/close_mouse_over.png',
'../../Content/Resources/close.png']);
});
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i];
}
}
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
In Html:
<input type="image" src="../../Content/Resources/close.png" name="Action" value="Save" onmouseover="mouseOverForImage('close', '../../Content/Resources/close_mouse_over.png')"
onmouseout = "mouseOverForImage('close', '../../Content/Resources/close.png')" id="close" title = "Close" />
But request is still sending to server after mouseover. Is not working only in chrome
As noted within my comment, you are passing an array of arrays to the preLoadImages method.
As a result, you are passing an array to image[i].src which means it won't get loaded.
Try
$(document).ready(function () {
preloadImages(
['../../Content/Resources/close_mouse_over.png', '../../Content/Resources/close.png']);
});
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i];
}
}
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
or, if you want to keep the array of array's, then use
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i][0];
}
}
Edit, on further investigation, a possible cause is preloadImages destroys the image array after preloading the images.
try this instead:
function preloadImages(sources) {
window.preloadedImages = new Array();
for (var i = 0; i < sources.length; i++) {
window.preloadedImages[i] = new Image();
window.preloadedImages[i].src = sources[i];
}
}
This stores the preloaded images within the window object, allowing them to preload properly.
Hope that helps?