www.webdeveloper.com
Results 1 to 10 of 10

Thread: Updating an image, per select value

  1. #1
    Join Date
    Apr 2006
    Location
    Wisconsin
    Posts
    48

    Updating an image, per select value

    Hello,
    I have some code that updates an image called on a select value's "onChange":

    Code:
    function updateimage(whichpic){
         // create an array for the images
        var pics = new Array("red.gif","blue.gif","green.gif","yellow.gif");
     if(document.layers){ //NN4 DOM
         document.images['det_pic'].src=pics[whichpic];
      }else{  //Other DOMs
        document.det_pic.src=pics[whichpic];
      }
    }

    However, rather than having the value the same name as the image. I need to check against an Array... match the color, then select the image name from the array.

    I have started to do this. I've created an array of colors and images deliminated by a pipe that results to something like:

    Code:
    var array2Data = new Array(); 
    // 
    array2Data[0]	= 'RED|detail_brand1_red.jpg|'
    array2Data[1]	= 'Blue|detail_brand1_blue.jpg|'
    array2Data[2]	= 'Blue|detail_brand1_blue.jpg|' 
    array2Data[3]	= 'Blue|detail_brand1_blue.jpg|'
    Now that I have the data set loaded, I'm stuck on how would I change my updateimages function to use it?

    TIA,
    Donovan

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Ids are best
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script language="JavaScript" type="text/javascript">
    <!--
    var array2Data = new Array();
    //
    array2Data[0]='RED|One.gif|';
    array2Data[1]='Blue|Two.gif|';
    array2Data[2]='green|Three.gif|';
    array2Data[3]='yellow|Four.gif|';
    
    function UpdateImage(val,ary,id){
     var imgobj=document.getElementById(id);
     for (var zxc0=0;zxc0<ary.length;zxc0++){
      if (val.toUpperCase()==ary[zxc0].split('|')[0].toUpperCase()){
        imgobj.src='http://www.vicsjavascripts.org.uk/StdImages/'+ary[zxc0].split('|')[1];
        return;
      }
     }
     imgobj.src='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif';
    }
    //-->
    </script>
    <img id="Pic1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=100 height=100 ><br>
    <select onchange="UpdateImage(this.value,array2Data,'Pic1');" >
    <option >Select Pic</option>
    <option value="RED" >red</option>
    <option value="RED" >red</option>
    <option value="Blue" >red</option>
    <option value="yellow" >red</option></select>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2006
    Location
    Wisconsin
    Posts
    48
    Excellent! vic, that worked great. I'm starting to realize that I'm quickly becomming indebted to this list.

    I hope I'm not abusing the feedback with one more question that I'm stuck on...

    I have to functions that are called from one (onChange) select list.

    function populateData( __COLOR ) { ....} is called by:
    onChange='populateData( this.options[selectedIndex].text )'

    and
    function UpdateImage(val,ary,id){...} is called by:
    onChange="UpdateImage(this.value,array2Data,'det_pic');"

    (both in the same select element).
    Well, from my last question/s, I learned that I can't have more than one call using the same method. How would I go about calling these two functions on the change of that one select menu?

    Much thanks as you guys have saved me a lot of time and headaches!

    Donovan

  4. #4
    Join Date
    Apr 2006
    Location
    Wisconsin
    Posts
    48
    This worked in Mozzilla:

    onChange="populateData( this.options[selectedIndex].text );UpdateImage(this.value,array2Data,'det_pic');"


    But is it good practice? Is there a better way?

    Donovan

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script language="JavaScript" type="text/javascript">
    <!--
    var array2Data = new Array();
    //
    array2Data[0]='RED|One.gif|Some text for red';
    array2Data[1]='Blue|Two.gif|Some text for blue';
    array2Data[2]='green|Three.gif|Some text for green';
    array2Data[3]='yellow|Four.gif|Some text for yellow';
    
    function UpdateImage(val,ary,imgid,txtid){
     var imgobj=document.getElementById(imgid);
     var txtobj=document.getElementById(txtid);
     for (var zxc0=0;zxc0<ary.length;zxc0++){
      if (val.toUpperCase()==ary[zxc0].split('|')[0].toUpperCase()){
        if (imgobj&&ary[zxc0].split('|')[1]) { imgobj.src='http://www.vicsjavascripts.org.uk/StdImages/'+ary[zxc0].split('|')[1]; }
        if (txtobj&&ary[zxc0].split('|')[2]){ txtobj.innerHTML=ary[zxc0].split('|')[2]; }
        return;
      }
     }
     if (imgobj){ imgobj.src='http://www.vicsjavascripts.org.uk/StdImages/Blank.gif'; }
     if (txtobj){ txtobjinnerHTML=''; }
    }
    
    //-->
    </script>
    <img id="Pic1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=100 height=100 ><br>
    <div id="Txt1" style="width:200px;height:50px;border:solid black 1px;" ></div>
    <select onchange="UpdateImage(this.value,array2Data,'Pic1','Txt1');" >
    <option >Select Pic</option>
    <option value="RED" >red</option>
    <option value="RED" >red</option>
    <option value="Blue" >red</option>
    <option value="yellow" >red</option></select>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Apr 2006
    Location
    Wisconsin
    Posts
    48
    Thanks! - D

  7. #7
    Join Date
    Apr 2006
    Location
    Wisconsin
    Posts
    48
    Vic,
    I'm a bit confused on this second code. The last var "txt1".. what is that for?

    thanks,
    Donovan

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Txt1

    is the ID name of the element to display the text
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Apr 2006
    Location
    Wisconsin
    Posts
    48
    I see.

    I don't want to push it :-) So, I'll understand if you don't answer. But, I'm unclear how this works with my populatedata function. Here is the function:

    Code:
    function populateData( __COLOR ) { 
    	select	= window.document.size_color.__SIZE; 
    	string	= ""; 
    	count	= 0; 
    	select.options.length = count; 
    		// Place all matching categories into Options. 
    	for( i = 0; i < arrayData.length; i++ ) { 
    		string = arrayData[i].split( "|" ); 
    		if( string[0] == __COLOR ) { 
    			select.options[count++] = new Option( string[1] ); 
    		} 
    	} 
    }

    ** Sample reference of array:
    arrayData[0] = 'SALES|[SAL] User 01|'
    arrayData[1] = 'SALES|[SAL] User 02|'
    arrayData[3] = 'MARKETING|[MAR] User 01|'
    arrayData[4] = 'MARKETING|[MAR] User 02|'
    **

    I'm trying to call that as well as the original code that you helped with. The workaround posted is working in all the browsers I've tested but I have no idea if it robust.

    Thx again for your help.
    Donovan

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    bit confused as first time you have posted content of 'populateData('

    not very well written but works

    not sure what you are trying to achieve with the two sctipts though

    but basically one function can call another fumction passing a parameter to the next function

    so the value of _COLOR can be established and passed through UpdateImage(

    to 'populateData('
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles