Hi-
I need to access an image from an array. I've preloaded them into an array within the JS portion of my code. Do I need to access each part of the array from the HTML portion of the code?
I've tried using document.image, but it doesn't work.
I'm sure it's something really easy that I'm missing....
Thanks!
N_N
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Choose your player</title>
<script type = "text/javascript">
function preloader(); {
var i = 0; // counter
imageObj = new Image(); // create object
images = new Array() {; // create array
images[0]=""9.gif"" // set image list
images[1]=""10.gif""
images[2]="rock_lee.gif"
images[3]="break_dance.gif"
}
// start preloading
for(i=0; i<=3; i++) {
imageObj.src=images[i];
}
}
function ChoosePlayer(player)
{
// if (player.value == Player[0]);
document.images.image1;
}
var Player = new Array;
{
Player[0] = "Sandro"; //first thing in array defined as string
Player[1] = "James"; //second thing in array defined as string
Player[2] = "Shane"; //third thing in array defined as string
Player[3] = "Dan"; //fourth thing in array defined as string
}
</script>
</head>
<body>
<form name="Calc" id="Calc" length ="6" action="">
<table width="600" border="0" align="left">
<tr>
<td width="300" align="left" valign="top">
Choose Your Character:
</td>
<td width="900">
Player's Name: <input type="text" value = "" name="field1" id="field1" size="7"<br />
<input name="calcButton" type="button" value="Calculate" onclick = "ChoosePlayer(field1)"/>
<input name="button" type="reset" value="Clear Form"/>
</td>
</tr>
</table>
</form>
</body>
</html>
to set the source of the image in the images collection of the document to the path to the image you want (which has already been loaded).
couple changes if i may...
Code:
window["images"] = ["9.gif", "10.gif", "rock_lee.gif", "break_dance.gif"];
for(var a = 0; a < images.length; a++){
var tmp = new Image();
tmp.src = images[a];
}
is a better preload script, otherwise you're assigning a new source to the same image place holder before the image actually loads, thus you're not 100% on whether or not it's already been loaded or not
__________________
-Mike
"Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender
Thanks for taking the time to adjust my code.
Unfortunately it does not work. I just want to know how to call an image, without all of the optimization. I am getting very confused (I am easily confused )
Can you just tell me how to access an image please?
Thanks!
N_N
for some clarification the [...] syntax defines the elements within an array
Code:
<div id="message"></div>
<script type="text/javascript">
var tmp = ["hello", "there", "how", "are", "you", "?"];
var holder = document.getElementById("message");
var msghld = "";
for(var a = 0; a < tmp.length; a++){
msghld += tmp[a] + " ";
}
msghld = msghld.substr(0, msghld.length-1);
holder.innerHTML = msghld;
</script>
would print: hello there how are you? in a div. that's also an illustration of the document.getElementById function that locates an element within your html document with the id matching the one specified as a parameter to the function.
the new Image() code supplied is only a container for an image in memory. if you're looking to make a display element for an image, you would use
Code:
var myImg = document.createElement("img");
myImg.src = "whatever";
document.body.appendChild(myImg);
to create an image tag, assign a source to it, and append it to the body element. if you want to append it to a different element (instead of just to the body) you give the element you want to contain the image an id and use
Code:
var myImg = document.createElement("img");
myImg.src = "whatever";
document.getElementById("your_image_containers_id").appendChild(myImg);
__________________
-Mike
"Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender
OK, I shortened my code a lot so that I can just get how to access the image itself.
What I'd like is to be able to click the button and have the image show up.
My confusion is in that I don't know how to call the image- what is it "value", "src", or what?
I appreciate your help!!
But how do I get at it from the Javascript? Syntax and so on? Doesn't the source have to point at something?
When I put the "myimg.jpg" somewhere in the HTML, it displays before the button is clicked.
I want the onclick to run the function, which isn't shown here in the following code, but I know how to do this.
I want the function to show the image.
add style="display:none" to the image tag, it hides the element. if you have given the image tag an id, you use document.getElementById("the_id_of_your_image").src = variable_name_from_script; in your script to assign the source to the image and
document.getElementById("the_id_of_your_image").style.display="block"; to display the image
__________________
-Mike
"Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender
I'm very new to this all, so any help is appreciated. I've come close to finishing this Horoscope Signs form, just the image is where I'm stuck..
I've got a blank image on my form. I'm trying to do a similar thing with an onClick of a button as in this thread, but the image shown depends on the textfield value.. For example, I have a bunch of if statements, they are executed onSubmit of a button and they check/compare the value of the textfield to the statement. If the value of the textfield is a match to a certain Horoscope sign within the if statement, I'd like to be able to change the blank image on my form into that particular Horoscope sign.. I was thinking of using an image array, but I got stuck on it.
Before you post, read our: 
)
