...

View Full Version : Help with accessing an image in an array



Nora9999
04-22-2008, 07:56 PM
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


<!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>

mjlorbet
04-22-2008, 08:53 PM
images = new Array() {;

should be

window["images"] = new Array();

so that you have the names of the pre-loaded images in global scope
then you can use
document.images.image1.src = images[whatever_image_index];
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...



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&#37; on whether or not it's already been loaded or not

Nora9999
04-22-2008, 09:26 PM
Thanks Mike.
I still don't know how to call the image up and display it.
Here is the code- changed to your suggestions.

<!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
window ["images"] = ["9.gif","10.gif","rock_lee.gif"]; { // create array

// start preloading
// start preloading
for(var i=0; i< images.length; i++) {
var tmp = new Image();
tmp.src=images[i];
}
}

function ChoosePlayer(player)
{
if (player.value == Player[0]);
document.images.image1.src = images[0];
}

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>

mjlorbet
04-22-2008, 09:35 PM
<!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() {
window ["images"] = ["9.gif","10.gif","rock_lee.gif"];
var Player = ["Sandro", "James", "Shane", "Dan"];
// start preloading
for(var i=0; i<=3; i++){
var imgObj = new Image();
imageObj.src=images[i];
}
}
function ChoosePlayer(player)
{
document.getElementById("player" + player + "img").src = images[player];
}
preLoader();
</script>
</head>
<body>
<form name="Calc" id="Calc" length ="6" action="">
<img id="player1img" />
<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(document.getElementById('field1').value);"/>
<input name="button" type="reset" value="Clear Form"/>
</td>
</tr>
</table>
</form>
</body>
</html>

Nora9999
04-22-2008, 09:58 PM
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

mjlorbet
04-22-2008, 10:16 PM
even if you do a preload on the image, you just set the source of an image tag on in the markup to the source of the image file that you've preloaded



<img src="nothing.jpg" id="myImg" />
<script type="text/javascript">
document.getElementById("myImg").src = "yourimage.jpg";
</script>


for some clarification the [...] syntax defines the elements within an array



<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



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



var myImg = document.createElement("img");
myImg.src = "whatever";
document.getElementById("your_image_containers_id").appendChild(myImg);

Nora9999
04-23-2008, 12:11 AM
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!!

<!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>page7</title>

<script type = "text/javascript">
function showImg() {
document.images.myimg
}
</script>
</head>

<body>

<form name="Img" id="Calc" length ="6" action="">
<table width="600" border="0" align="left">
<tr>
</td>

<td width="900">
<input name="calcButton" type="button" value="Show image" img name = "myimg" img src="9.jpg" onclick = showImg() />
</td>

</tr>
</table>
</form>

</body>
</html>

mjlorbet
04-23-2008, 12:13 AM
no no, img is a tag just like input



<img src="myimg" id="img2show" style="display:none;"/>
<input type="button" onclick="document.getElementById('img2show').style.display='block';" value="Show image" />

Nora9999
04-23-2008, 12:23 AM
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.


<!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>page7</title>

<script type = "text/javascript">
function showImg() {
document.getElementById.("9.jpg")
}
</script>
</head>

<body>

<form name="Img" id="Calc" length ="6" action="">
<table width="600" border="0" align="left">
<tr>
</td>

<td width="900">
<input type="button" id="img2show" img name = "myimg" img src="9.jpg"
onclick = "document.getElementById('img2show').style.display='block';" value="Show image" />
</td>
</tr>
</table>
</form>
</body>
</html>

mjlorbet
04-23-2008, 12:27 AM
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

Nora9999
04-23-2008, 12:09 PM
Thank you!!!!!

mjlorbet
04-23-2008, 12:13 PM
glad to help ;)

Kusko
07-10-2008, 06:11 AM
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.

Thanks in advanced fellas.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum