How to dynamically load images with HTML5 and Javascript?

[baqai]

Hey all you programming cheeeta's

i am stuck with a problem and i can't get my head around it, i am making a html5/css/java based page in which user is presented with dynamic drop down menus, each menu apart from the very first is populated dynamically depending on the choice made on the previous one

e.g.

Select Game (list of games) -> loads list of game -> User selects Dota 2 -> loads list of categories like strength/agility/intelligence -> User selects a category e.g. Strength -> loads list of strength heros

all this is being done via function which loops through array and with if condition

now i am stuck, i want to load an image of the hero when it's selected, i also want the html to be without the image when nothing is selected, also i want to load text from a text file which can be image description or caption and it also needs to change with the image

heroname.innerHTML=""; <- this sorts out my problem of making text/label empty when ever change is make

A select function i am making to populate the list is as follows

<select id="gamelist" name="game-name" onchange="populate(this.id,'herolist')">

gamelist would be the id while game-name would be value, this.id will pass the value gamelist to the function "populate" while herolist is the id for the next drop down menu

i am lost in what to do, i cannot go around creating an array for the image file names as i am dealing with more than 5k images , maybe i can use a for loop to achieve this ... i have been at it straight for couple of hours so i am frustrated and can't think logically so would appreciate some help ...

 

[EternalBlizzard]

I don't know html or css.. but it seems you are having problem storing images in order to call them. You can't use array as you say there are 5k images. One solution could be to write names in a text file and read from text file whenever you want to load the image?

 

[qaiser]

You will have to make classes of all the images you need in CSS and then on hero selection remove all classes from the div (imageContainer) and apply new class depending upon the hero.
Something like this:

HTML:

<div id="imageContainer" class=""></div>​

CSS:

.img1{
​

background: url("(image path)/image1.jpg");
background-size: *define size here*;​

}
.img2{
​

background: url("(image path)/image2.jpg");
background-size: *define size here*;​

}​

and so on...

 

[HolyCrap]

You sure you don't need a backend for this? Loading a new image everytime a person selects a specific item seems like a bad idea, you could cache images, but we are talking 5k images here, that would make the process even slower.

 

[mubaidr]

-Do you know the location where images are stored? If yes, this is how you load an image from the web and insert in to html content:

var img = new Image();
img.onload = function(){
document.getElementById('container').appendChild(this);
};
img.src= image_url_here;