I've got a form page with two dropdowns, where people first select a leaf shape, and it shows the image. For example, choosing "auriculate" makes images/leaf_shapes/entire/auriculate.jpg appear.

Then they choose the margin design, which could be "crenate" or "serrate" or "undulate" or several others. This changes the image to images/leaf_shapes/"their choice"/auriculate.jpg. I only want to change the specific.

I also want to accomodate if they change their mind, and click something else on that second margin menu.

I've got a simple script but it's creating a problem on three of the choices:
finely serrate, doubly serrate and lobed.

For finely serrate I want “margin_finelyserrate”
but it creates “margin_finelymargin_finelyserrate”

For doubly serrate I want “doubly_serrate”
but it creates “doubly_doubly_serrate”

For lobed I want”margin_lobed”
But it creates “margin_margin_lobed”

Below are the dropdown and the function I can't make work. here's the second dropdown:

<div id="megamenu4" class="megamenu">
                       <div class="column">
                       <li id="margin1"><a href="javascript:passit4('entire')" onMouseover="change1('pic8','image34')" onclick="ShowContent('uniquename3'); change3('pic2','entire');" onMouseout="change1('pic8','image_off');">Test Aur (entire)</a></li>

          	       <li id="margin2"><a href="javascript:passit4('undulate')" onMouseover="change1('pic8','image35')" onclick="ShowContent('uniquename3'); change3('pic2','margin_undulate');" onMouseout="change1('pic8','image_off');">Undulate</a></li>
	               <li id="margin3"><a href="javascript:passit4('crenate')" onMouseover="change1('pic8','image36')" onclick="ShowContent('uniquename3'); change3('pic2','crenate');" onMouseout="change1('pic8','image_off');">Crenate</a></li>
	               <li id="margin4"><a href="javascript:passit4('finely dentate')" onMouseover="change1('pic8','image37')" onclick="ShowContent('uniquename3'); change3('pic2','margin_finelyserrate');" onMouseout="change1('pic8','image_off');">Finely Serrate</a></li>
	               <li id="margin5"><a href="javascript:passit4('serrate')" onMouseover="change1('pic8','image38')" onclick="ShowContent('uniquename3'); change3('pic2','serrate');" onMouseout="change1('pic8','image_off');">Serrate</a></li>
	               <li id="margin5"><a href="javascript:passit4('doubly serrate')" onMouseover="change1('pic8','image39')" onclick="ShowContent('uniquename3'); change3('pic2','doubly_serrate');" onMouseout="change1('pic8','image_off');">Doubly Serrate</a></li>
	               <li id="margin5"><a href="javascript:passit4('lobed')" onMouseover="change1('pic8','image40')" onclick="ShowContent('uniquename3'); change3('pic2','margin_lobed');" onMouseout="change1('pic8','image_off');">Lobed</a></li>	               


and here's the function it calls:

function change3(picName,choice)

var url = (document[picName].src); 

url = url.replace(/crenate/, choice);
url = url.replace(/margin_finelyserrate/, choice);
url = url.replace(/margin_lobed/, choice);
url = url.replace(/margin_undulate/, choice);
url = url.replace(/doubly_serrate/, choice);
url = url.replace(/entire/, choice);
url = url.replace(/serrate/, choice);
url = url.replace(/lobed/, choice);
alert (url)
document[picName].src = url;


Edited by turpentyne: n/a

7 Years
Discussion Span
Last Post by turpentyne

hah! I keep getting the answers right after I post my question! I have to put \b before and after the folder names because some of them duplicate so it makes the change and then tries to change it's own name as well.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.