function to change image only if .src matches

**turpentyne** · May 1, 2011 17:04

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:

Code:

 <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'); changecolor('pic4','image28'); add_content('auriculate');" onMouseout="change1('pic1','image46');">Auriculate</a></li>

**Force Flow** · May 1, 2011 17:34

This line stands out:

Code:

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

Change it to

Code:

   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.

**turpentyne** · May 1, 2011 17:44

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

**AllanP** · May 3, 2011 00:46

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; }

Code :

<!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>

User Tag List

Thread: function to change image only if .src matches

Thread Tools

Display

function to change image only if .src matches

Bookmarks

Bookmarks

Posting Permissions