Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with accessing an image in an array

    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>

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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
    Code:
    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...

    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&#37; 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

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Mike.
    I still don't know how to call the image up and display it.
    Here is the code- changed to your suggestions.
    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   
    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>
    Last edited by Nora9999; 04-22-2008 at 09:31 PM.

  • #4
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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() {            
     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>
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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

    Code:
     
    <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

    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

  • #7
    New Coder
    Join Date
    Mar 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    I'm still baffled

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

  • #8
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    no no, img is a tag just like input

    Code:
     
    <img src="myimg" id="img2show" style="display:none;"/>
    <input type="button" onclick="document.getElementById('img2show').style.display='block';" value="Show image" />
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #9
    New Coder
    Join Date
    Mar 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

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

  • #10
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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

  • Users who have thanked mjlorbet for this post:

    Nora9999 (04-23-2008)

  • #11
    New Coder
    Join Date
    Mar 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you!!!!!

  • #12
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    glad to help
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #13
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Kusko; 07-10-2008 at 06:13 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •