Using a non-standard attribute?

[Foamy]

Total Noob question here.

My code, well actually someone else's from this forum.

function previewPicJN(sel) {
document.previewpicJN.src = "" + sel.options[sel.selectedIndex].mylabel;
}


And the select box.


<td align="center" rowspan="2"><select name=op1 size=1 onChange="previewPicJN(this)">
<option value="Beef" mylabel="/images/jn/BEEF-RICE--W_O--CUT-100.jpg" selected >Beef & Rice
<option value="Lamb" mylabel="/images/jn/LAMB-RICE-W_O-CUT-100.jpg">Lamb & Rice
<option value="Mixed (Beef, Lamb)" mylabel="/images/jn/beef-lamb.jpg">1/2 Beef, 1/2 Lamb
</select>
<td align="center" rowspan="2"><img name="previewpicJN" src="/images/jn/BEEF-RICE--W_O--CUT-100.jpg" width=100 height=125 border=0></td>


This won't work in Mozilla, but works fine on others (Safari and Omniweb on OSX). If I change the .mylabel; to .value; and put the image paths in the value attribute it works for all the browsers I tested. However, I can't use value for the image path since that variable is important to the shopping cart.

The image in Mozilla is "undefined" if I use .mylabel. Does mozilla somehow validate what are "proper" select attributes and won't allow anything other than value?

Any suggestions, pointers, explanations?

Thanks

[AdamGundry]

It won't work in Mozilla because it is not valid HTML, and Mozilla sticks very closely to the W3C Recommendations as a rule.

Instead, you could create a seperate array like the following:
mylabel = new Array("/images/jn/BEEF-RICE--W_O--CUT-100.jpg", "/images/jn/LAMB-RICE-W_O-CUT-100.jpg", "/images/jn/beef-lamb.jpg");

Then set the preview image using:
document.previewpicJN.src = mylabel[sel.selectedIndex];

Hope this helps

Adam

[Foamy]

Adam. The array method works wonderfully. Thanks!