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?
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!
<!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>
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.
Reply With Quote
Bookmarks