change of url screws up folder name

[turpentyne]

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">
	               <ul>
                       <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>	               

</ul>
                       </div>

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;

}

[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.