Function to change image only if .src matches

JavaScript
1

i’m struggling to understand how to make a function that changes a specific image on a page when the user chooses from a menu, but only if the src name matches “transparent.gif”

With numerous other scripts, I’ve cornered myself into this as the only solution for now to what I’m trying to do. But the script is not working. Here it is:



 <script>

function changecolor(picName,imgName)

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

image28= new Image(250,350);
     image28.src="/images/leaf_shapes/leafbg_green.gif";

</script>

<!-- here's the image to change -->
<IMG SRC="http://www.sitepoint.com/forums/images/leaf_shapes/entire/transparent1.gif" name="pic4" width="250" height="350" border="0">



<!-- here's where they've selected -->

<li><a href="javascript:passit('auriculate')" onMouseover="change1('pic1','image2')" onClick="ShowContent('uniqueleaf'); ShowContent('uniquename'); c[B]hangecolor('pic4','image28');[/B] add_content('auriculate');" onMouseout="change1('pic1','image46');">Auriculate</a></li>
2

This line stands out:

   if (leafcolor = "/images/leaf_shapes/entire/transparent1.gif")

Change it to

   if (leafcolor == "/images/leaf_shapes/entire/transparent1.gif")

The single equal sign means you’re assigning a value to a variable. Two equal signs mean you’re checking two items for equality.

3

ah! cool. I overlooked that. Still didn’t make it work, but it’s a step closer!

4

The following script uses an id reference passed to it by clicking on the menu item. It then checks to see if he reference is the correct one and, if so, changes the src of the image. B2 will replace B1 on clicking on menu item Image 1, but B2 will not replace B3 unless yout change the test line to

if(idRef==“B1”){ alert(“this image is disabled”); return; }

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Target Image src</title>
<script type=“text/javascript”>
<!–
function getSrc(idRef)
{ // this line determines which image will be changed, only B1 in this case
if(idRef==“B3”){ alert(“this image is disabled”); return; }
//
// use reference to get target image object
var targetImg=document.getElementById(idRef);
// use old src information to build new src info
// in this case replacing the old B1 or B3 with B2
var newSrc=targetImg.src.replace(idRef,“B2”);
// apply the src info to the target image object
targetImg.src=newSrc;
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial,helvetica,sans-serif; font-size:13px; color:#000; font-weight:bold; margin-top:3px; margin-left:0px; text-align:left; }
#wrap { position:relative; top:0px; left:0px; width:400px; height:400px; margin-left:100px; border:1px solid #CCC; }
#myImages { position:absolute; top:100px; left:50px; text-align:left; }
#myImages img { margin-right:20px; }
#menu { position:absolute; top:250px; left:50px; text-align:left; }
ul.targ { padding:0px; margin:0px; list-style-type:none; }
ul li { margin-top:0px; margin-bottom:10px; cursor:pointer; }
.a14B { font-weight:bold; font-size:16px; color:#000080; }
–>
</style>
</head>

<body>

<div id=“wrap”>
<div id=“myImages”>
<img id=“B1” border=“0” src=“B1.jpg” width=“100” height=“100”><img id=“B3” border=“0” src=“B3.jpg” onclick=“getSrc(this)” width=“100” height=“100”></div>
<!-- end myImages –>
<div id=“menu”>
<p class=“a14B”>Click a menu item to change the image.</p>
<ul class=“targ”>
<li onclick=“getSrc(‘B1’)”>Image 1</li>
<li onclick=“getSrc(‘B3’)”>Image 3</li>
</ul>
</div>
<!-- end menu –>
</div>
<!-- end wrap –>

</body>

</html>