javascript to change image only if .src matches

Question

turpentyne 0 Newbie Poster

13 Years Ago

I have a form with two fields: shape and color.

where people select a shape an image of the shape appears, and a default color image appears.

When they select a color, it changes the color image. But if they go back and change the shape, I don't want it to turn the color back into the default image. But I don't know how to do this script.

Here's the function I have, but I don't know how to write it:

function changecolor(picName,imgName)

 {
	 var idx = filepath.pic4
   if (idx = "/images/leaf_shapes/entire/transparent1.gif")
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
    }
 }

The rest of the code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="scriptstest25.css" />
<title>Search by leaf shape</title>


<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover")
jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover")
jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover")
</script>


<!-- start add by me -->
   <SCRIPT language="JavaScript">
<!--
  if (document.images)
   {
     image_off= new Image(250,350);
     image_off.src="/images/leaf_shapes/entire/transparent1.gif";  

     image2= new Image(250,350);
     image2.src="/images/leaf_shapes/entire/leaf_auriculate.png";
     image3= new Image(250,350);
     image3.src="/images/leaf_shapes/entire/leaf_cordate.png";  
     image4= new Image(250,350);
     image4.src="/images/leaf_shapes/entire/leaf_cuneate.png";   
     
     image27.src="/images/leaf_shapes/leafbg_blue.gif";
     image28= new Image(250,350);
     image28.src="/images/leaf_shapes/leafbg_green.gif";
     image29= new Image(250,350);
     image29.src="/images/leaf_shapes/leafbg_orange.gif";
     image30= new Image(250,350);
     image30.src="/images/leaf_shapes/leafbg_red.gif";
     image31= new Image(250,350);
     image31.src="/images/leaf_shapes/leafbg_blue.gif";
     image32= new Image(250,350);
     image32.src="/images/leaf_shapes/leafbg_purple.gif";
     image33= new Image(250,350);
     image33.src="/images/leaf_shapes/leafbg_purpleblack.gif";
     image34= new Image(100,100);
     image41.src="/images/leaf_shapes/leafbg_white.gif";
     image46.src="/images/leaf_shapes/leafbg_pure.gif";
}

function change1(picName,imgName)

 {
   if (document.images)
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
    }
 }

function changecolor(picName,imgName)

 {
	 var idx = filepath.pic4
   if (idx = "/images/leaf_shapes/entire/transparent1.gif")
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
    }
 }


function change4(picName,choice)

{ 
var url = (document[picName].src); 
url = url.replace("_transparent", choice);
url = url.replace("_auriculate", choice);
url = url.replace("_cordate", choice);
url = url.replace("_cuneate", choice);
url = url.replace("_deltoid", choice);
document[picName].src = url;
}


</script> 


<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
<!-- end add of layer script -->
</head>

<body>
<div class="maincontainer">
     <div id="contentwrapper">
          <div id="middlecolumn">


          <FORM action="leafsearch4c.php" style="border: 1px dotted red; padding: 2px" method="get" name="formsearch1">


          <table border=0 width=710><tr>
             <td valign=top>
          <p align="left"><!--Mega Menu Anchor-->
          <a href="#" id="megaanchor"><img src="images/anchor.jpg" style="border-width:0" /></a>
<div id="picked1" style="font-family:Verdana; font-size:.8em;"></div>


           <!--Mega Drop Down Menu HTML. Retain given CSS classes-->
          <div id="megamenu1" class="megamenu">
               <div class="column">
	       <ul>
	       <li><a href="javascript:passit('auriculate')" onMouseover="change1('pic1','image2')" onClick="ShowContent('uniqueleaf'); change4('pic2','_auriculate'); ShowContent('uniquename'); changecolor('pic4','image28'); add_content('auriculate');" onMouseout="change1('pic1','image46');">Auriculate</a></li>

	       <li><a href="javascript:passit('cordate')" onMouseover="change1('pic1','image3')" onClick="ShowContent('uniqueleaf'); change4('pic2','_cordate'); ShowContent('uniquename'); changecolor('pic4','image28'); add_content('Cordate');" onMouseout="change1('pic1','image46');">Cordate</a></li>
	       <li><a href="javascript:passit('cuneate')" 	       </ul>
	       </div>
	  </div></p>

     </td>
     
     <td valign=top><table bgcolor=black width=70 height=70 border=0 cellpadding=0 cellspacing=0><tr><td>
     <IMG SRC="images/leaf_shapes/leafbg_pure.gif" name="pic1" width="70" height="70" border="0"></td></tr></table>
     </td>

     <td valign=top rowspan=2 bgcolor=white id="centerCell">
    <img src="images/leaf_shapes/entire/transparent1.gif" width=250 height=350>
    <div id="uniqueleaf" 
    style="display:none; 
      z-index:2;
      position:absolute; 
      left:227px; 
      top:157px; 
      border-style: none; 
      background-color: transparent; 
      padding: 5px;">
      <IMG SRC="images/leaf_shapes/entire/leaf_transparent.gif" name="pic2" width="250" height="350" border="0">
      </div>



     <div id="uniquename" 
   style="display:none; 
      z-index:1;
      position:absolute; 
      left:227px; 
      top:157px; 
      border-style: none; 
      background-color: transparent; 
      padding: 5px;">
      <IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic4" width="250" height="350" border="0">
      </div>

     <div id="uniquename2" 
   style="display:none; 
      z-index:3;
      position:absolute; 
      left:227px; 
      top:157px; 
      border-style: none; 
      background-color: transparent; 
      padding: 5px;">
      <IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic10" width="250" height="350" border="0">
      </div>

     <div id="uniquename3" 
   style="display:none; 
      z-index:4;
      position:absolute; 
      left:227px; 
      top:157px; 
      border-style: none; 
      background-color: transparent; 
      padding: 5px;">
     <br>
 <IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic9" width="250" height="350" border="0">
      </div>


      </td>

      <td valign=top>
      <IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic3" width="70" height="70" border="0">
      </td>

      <td valign=top>
      <div class="maincontainer">
           <div id="contentwrapper">
	        <div id="middlecolumn">
	             <!--Mega Menu Anchor-->
	             <a href="#" id="megaanchor2"><img src="images/anchor2.jpg" style="border-width:0" /></a>
<div id="picked2" style="font-family:Verdana; font-size:.8em;"></div>

                       <!--Mega Drop Down Menu HTML. Retain given CSS classes-->
                     <div id="megamenu2" class="megamenu">

                          <div class="column">
	                  <ul>
	                   <li id="green"><a href="javascript:passit2('green')" onMouseover="change1('pic3','image28')" onClick="ShowContent('uniquename'); change1('pic4','image28'); add_content2('green');" onMouseout="change1('pic3','image_off');">green</a></li>
		           <li id="orange"><a href="javascript:passit2('orange')" onMouseover="change1('pic3','image29')" onClick="ShowContent('uniquename'); change1('pic4','image29'); add_content2('orange');" onMouseout="change1('pic3','image_off');">orange</a></li>
  	                  <li id="red"><a href="javascript:passit2('red')" onMouseover="change1('pic3','image30')" onClick="ShowContent('uniquename'); change1('pic4','image30'); add_content2('red');" onMouseout="change1('pic3','image_off');">red</a></li>
                          <li id="blue"><a href="javascript:passit2('blue')" onMouseover="change1('pic3','image31')" onClick="ShowContent('uniquename'); change1('pic4','image31'); add_content2('blue');" onMouseout="change1('pic3','image_off');">blue</a></li>
	                  <li id="purple"><a href="javascript:passit2('purple')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image32'); add_content2('purple');" onMouseout="change1('pic3','image_off');">purple</a></li>
	                  <li id="purpleblack"><a href="javascript:passit2('purple-black')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image33'); add_content2('purple black');" onMouseout="change1('pic3','image_off');">purple-black</a></li>
</ul>
                          </div>

                     </div></p>
                     </td>
                  </tr>

                  <tr>
                    <td valign=top>
                    <p align="left"><!--Mega Menu Anchor-->
	            <a href="#" id="megaanchor3"><img src="images/anchor3.jpg" style="border-width:0" /></a>
<div id="picked3" style="font-family:Verdana; font-size:.8em;"></div>


                    <!--Mega Drop Down Menu HTML. Retain given CSS classes-->
                    <div id="megamenu3" class="megamenu">

                 </div>
                 </td>
                 <td valign=top><IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic7" width="70" height="70" border="0"></td>

                 <td valign=top><IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic8" width="70" height="70" border="0"></td>
                 <td valign=top>
                 <p align="left"><!--Mega Menu Anchor-->
	             <a href="#" id="megaanchor4"><img src="images/anchor4.jpg" style="border-width:0" /></a>
<div id="picked4" style="font-family:Verdana; font-size:.8em;"></div>
                     <!--Mega Drop Down Menu HTML. Retain given CSS classes-->

                     <div id="megamenu4" class="megamenu">
                       </div>
                     </div>
                   </td>
                 </tr>
             </table>
             <br>
             <input type="hidden" name="s1" value="" id="s1" /><br>
             <input type="hidden" name="s2" value="" id="s2" /><br>
             <input type="submit" value="Search" name="selected"/>  &nbsp;  &nbsp;  &nbsp; &nbsp; <input type="reset" value="Reset page" onClick="change1('pic2','image_off'); change1('pic4','image_off'); change1('pic10','image_off');">

             </form>



<SCRIPT language="JavaScript">
function set_fake_select(id) {
   //turn off any active options
   var elems = document.getElementsByName("fake_select1");
   for(var i=0; i < elems.length; i++) {
      elems[i].className = "";
   }

   //mark the fake option as active
   document.getElementById("fake_select_opt" + id).className = "active";

   //store the value in the hidden form field for submission
   document.getElementById("select1").value = id;
}
</script>

javascript

2 Contributors
1 Reply
229 Views
18 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2011-05-02T01:09:01+00:00

Turpentyne,

By constructing the leaf images as "masks", it should be possible to do something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Demo by Airshow</title>
<style type="text/css">
#leafImage {
	width: 70px;
	height: 70px;
	border: 2px solid #666;
}
#controls {
	margin: 5px 0px;
	padding: 5px;
}
</style>

<script type="text/javascript">
onload = function() {
	if(document.images) {
		var leafs = [];//new Array
		leafs[0] = new Image(); leafs[0].src = "/images/leaf_shapes/entire/transparent1.gif";    leafs[0].alt = "Pure";
		leafs[2] = new Image(); leafs[2].src = "/images/leaf_shapes/entire/leaf_auriculate.png"; leafs[2].alt = "Auriculate";
		leafs[3] = new Image(); leafs[3].src = "/images/leaf_shapes/entire/leaf_cordate.png";    leafs[3].alt = "Cordate";
		leafs[4] = new Image(); leafs[4].src = "/images/leaf_shapes/entire/leaf_cuneate.png";    leafs[4].alt = "Cuneate";
		var leafImage = document.getElementById('leafImage');
		var leafCodeMenu = document.formsearch1.leafShape;
		var leafBackgroundMenu = document.formsearch1.leafColor;
		function setLeaf() {
			var leafCode = leafCodeMenu[leafCodeMenu.selectedIndex].value;
			var leafBackground = leafBackgroundMenu[leafBackgroundMenu.selectedIndex].value;
			leafImage.src = leafs[leafCode].src;
			leafImage.alt = leafs[leafCode].alt;
			leafImage.style.backgroundColor = leafBackground;
		};
		leafCodeMenu.onchange = leafBackgroundMenu.onchange = setLeaf;
		setLeaf();
	}
};
</script>
</head>

<body>

<form action="leafsearch4c.php" method="get" name="formsearch1">
<div><img src="" id="leafImage" /></div>
<div id="controls">
Leaf:&nbsp;<select name="leafShape">
	<option value="0">None</option>
	<option value="2">Auriculate</option>
	<option value="3">Cordate</option>
	<option value="4">Cuneate</option>
</select>&nbsp;
Colour:&nbsp;<select name="leafColor">
	<option value="#009900">Green</option>
	<option value="#FF9900">Orange</option>
	<option value="#CC0000">Red</option>
	<option value="#000099">Blue</option>
	<option value="#990066">Purple</option>
	<option value="#660033">Purple-black</option>
</select>
</div>
</form>

</body>
</html>

By using select menus, you would lose the hover effect but the advantage is great simplicity.

Airshow