the ability to change an image through an pointer of dropdown

[Nick Calladine]

Is this possible to ...

I wish to get the value of a dropdown select but gets is indexable value
(dont know if that is the right term) if that is possible (the position it
assigned get assigned by the position on the list)

this is so i can then pass it to the array called pictureimage to get the
correct filename (similar to the picturetext part of this routine) and then
the final line on the fuction is to change an original image with a name of
base to show the case which is selected..

I had the routine originally using the value which was standardcase, case1,
case2, case3 then looking up the value to pass the image information...

i dont know if this is possible...

so if some can advise i be very gratefull
thanks

Nick


// function to change picture and text of case selection

function changepicture()

if (ns4)
{document.myform.dropdownchanger.value=picturetext[document.myform.itemname4.options.selectedIndex]
}

if (ie4) {document.all['dropdownchanger'].innerHTML ='<p>' +
picturetext[document.myform.itemname4.options.selectedIndex] + '</p>' }
else if (dom) {document.getElementById("dropdownchanger").innerHTML ='<p>'
+ picturetext document.myform.itemname4.options.selectedIndex] + '</p>' }

document.base.src=eval((document.myform.itemname4.options[document.myform.itemname4.options.selectedIndex].value))//set up images and link to the filenames pictureimage= new Array()pictureimage[0] = "images/casepackage.jpg"//default pictureimage[1] ="images/a24.jpg" //first pictureimage[2] = "images/a23.jpg" //secondpictureimage[3] = "images/a22.jpg" //third pictureimage[4] ="images/a40a.gif" //forth pictureimage[5] = "images/a42.jpg" //fifthpictureimage[6] = "images/a42.jpg" //sixth pictureimage[7] ="images/a33.jpg" //seventh pictureimage[8] = "images/a41.jpg"//eighth// Insert your text for each picture picturetext= new Array();picturetext[0]="Standard Case Included In Package"; picturetext[1]="Case 1 :8024-C4 All Black Neon Midi Case 400W + £26.50."; picturetext[2]="Case 2 :8024-C34 Black/Silver Neon Midi Case 400W +£26.50."; picturetext[3]="Case 3: 8024-B43 Silver/Black Neon Midi Case 400W +£26.50."; picturetext[4]="Case4 : 8023-B3 All Silver Neon Midi Case 400W +£26.50."; picturetext[5]="Case5 : 8001-C34 Black/Silver Neon Midi Case 400W +£26.50.";picturetext[6]="Case 6 : 8005-B32 Silver/Blue Neon Midi Neon Case 350W+£26.50."; picturetext[7]="Case 7 : 6063-CA Black/Silver Midi Case 400W +£26.50."; picturetext[8]="Case 8 : 8004-C4 All Black Neon Midi Case 400W +£26.50.";<select id="total2" name=itemname4 onchange="changepicture()"size="1"> <option value="standardcase {0.00}" selected>StandardCase</option> <option value="case1 {26.50}">All Black Neon MidiCase</option> <option value="case2 {26.50}">Black/Silver Neon MidiCase400W</option> <option value="case3 {26.50}">Silver/Black Neon MidiCase400W</option> <option value="case4 {26.50}">All Silver Neon MidiCase 400W</option> <option value="case5 {26.50}">Black/Silver Neon MidiCase400W</option> <option value="case6 {26.50}">Silver/Blue Neon MidiNeon Case350W</option> <option value="case7 {26.50}">Black/Silver MidiCase 400W </option> <option value="case8 {26.50}">All Black Neon MidiCase 400W</option></select>

 

[RobG]

Is this possible to ...

I wish to get the value of a dropdown select but gets is indexable
value (dont know if that is the right term) if that is possible
(the position it assigned get assigned by the position on the list)

You are after the selectedIndex property of the select:

var theSelectedIndexValue = document.formA.selectA.selectedIndex;

But this seems a strange request - you are making a dependency on the
option and array elements having the same index value. You have
available the option value and the text, either of which could be
used as a key to the elements in the image array. Using say the
value means the options and array elements don't have to be in
exactly the same sequence. You can add the key to the existing
value, the strip it out in the function.

this is so i can then pass it to the array called pictureimage to
get the correct filename (similar to the picturetext part of this
routine) and then the final line on the fuction is to change an
original image with a name of base to show the case which is
selected..

I had the routine originally using the value which was
standardcase, case1, case2, case3 then looking up the value to pass
the image information...

i dont know if this is possible...

so if some can advise i be very gratefull thanks

Nick


// function to change picture and text of case selection

function changepicture()

if (ns4)
{document.myform.dropdownchanger.value=picturetext[document.myform.itemname4.options.selectedIndex]
}

if (ie4) {document.all['dropdownchanger'].innerHTML ='<p>' +
picturetext[document.myform.itemname4.options.selectedIndex] +
'</p>' } else if (dom)
{document.getElementById("dropdownchanger").innerHTML ='<p>' +
picturetext document.myform.itemname4.options.selectedIndex] +
'</p>' }

Browser sniffing is sad. At a guess, you are adding a caption for
an image. By far the vast majority of web browsers now support
getElementById, yet it is last in your suite of tests. Here is a
copy of something posted earlier.

Browse of the group FAQ, particularly:

<URL:http://www.jibbering.com/faq/#FAQ4_15>

Check out the DynWrite stuff a very simple version is place the
following at the start of a script element outside any function:

if( !document.getElementById ){
if ( document.all ){
document.getElementById = function(id){return document.all[id];};
} else if ( document.layers ) {
document.getElementById = function(id){return document.layers[id];};
} else {
return null;
}
}

If you use the above, then the onclick script is changed to:

<select ... onclick="changepicture(this);" ...>


caption changing part of the script
becomes:

function changepicture(s) {
var x = document.getElementById('dropdownchanger');
x.innerHTML = picturetext[s.selectedIndex];
}

document.base.src=eval((document.myform.itemname4.options[

document.myform.itemname4.options.selectedIndex].value))

eval is evil and almost certainly not required, ever.

[...]

Here is a slight re-write of the clipped stuff. Note that the image
can be changed using as similar algorithm and just change the image
src attribute.

<script type="text/javascript">
function changepicture(s) {
var x = document.getElementById('dropdownchanger');
x.innerHTML = picturetext[s.selectedIndex];

// Change image (untested)
var i = document.getElementById('imageID');
i.src = pictureimage[s.selectedIndex];
}

var theOpt = document.myform.itemname4;
document.base.src = theOpt[theOpt.selectedIndex].value;

//set up images and link to the filenames
pictureimage = new Array();
pictureimage[0] = "images/casepackage.jpg"; //default
pictureimage[1] = "images/a24.jpg"; //first
pictureimage[2] = "images/a23.jpg"; //second
pictureimage[3] = "images/a22.jpg"; //third
pictureimage[4] = "images/a40a.gif"; //forth
pictureimage[5] = "images/a42.jpg"; //fifth
pictureimage[6] = "images/a42.jpg"; //sixth
pictureimage[7] = "images/a33.jpg"; //seventh
pictureimage[8] = "images/a41.jpg"; //eighth

// Insert your text for each picture
picturetext= new Array();
picturetext[0] = "Standard Case Included In Package";
picturetext[1] = "Case 1 :8024-C4 All Black Neon Midi"
+ " Case 400W + £26.50.";
picturetext[2] = "Case 2 :8024-C34 Black/Silver Neon Midi"
+ " Case 400W +£26.50.";
picturetext[3] = "Case 3: 8024-B43 Silver/Black Neon Midi"
+ " Case 400W +£26.50.";
picturetext[4] = "Case4 : 8023-B3 All Silver Neon Midi"
+ " Case 400W +£26.50.";
picturetext[5] = "Case5 : 8001-C34 Black/Silver Neon Midi"
+ " Case 400W +£26.50.";
picturetext[6] = "Case 6 : 8005-B32 Silver/Blue Neon Midi"
+ " Neon Case 350W+£26.50.";
picturetext[7] = "Case 7 : 6063-CA Black/Silver Midi"
+ " Case 400W +£26.50.";
picturetext[8] = "Case 8 : 8004-C4 All Black Neon Midi"
+ " Case 400W +£26.50.";

</script>


<select id="total2" name=itemname4
onchange="changepicture(this)" size="1">
<option value="standardcase {0.00}" selected>StandardCase</option>
<option value="case1 {26.50}
">All Black Neon MidiCase</option>
<option value="case2 {26.50
}">Black/Silver Neon MidiCase400W</option>
<option value="case3 {26.50
}">Silver/Black Neon MidiCase400W</option>
<option value="case4 {26.50
}">All Silver Neon MidiCase 400W</option>
<option value="case5 {26.50
}">Black/Silver Neon MidiCase400W</option>
<option value="case6 {26.50
}">Silver/Blue Neon MidiNeon Case350W</option>
<option value="case7 {26.50
}">Black/Silver MidiCase 400W </option>
<option value="case8 {26.50
}">All Black Neon MidiCase 400W</option>
</select>

<p id="dropdownchanger"></p>

 

[RobG]

RobG wrote:
[...]

if( !document.getElementById ){
if ( document.all ){
document.getElementById = function(id){return document.all[id];};
} else if ( document.layers ) {
document.getElementById = function(id){return document.layers[id];};
} else {
return null;
}
}

Ah, just discovered Richard C's response to an earlier post, the
above should be:

if( !document.getElementById ){
if ( document.all ){
document.getElementById = function(id){
return document.all[id];
};
} else if ( document.layers ) {
document.getElementById = function(id){
return document.layers[id];
};
} else {
document.getElementById = function(){return null;};
}
}

The last 'else' is important where none of getElementById,
document.all or document.layers is supported.


[...]