SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    function to change image only if .src matches

    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>
    Last edited by Force Flow; May 1, 2011 at 17:32. Reason: closed code tag

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah! cool. I overlooked that. Still didn't make it work, but it's a step closer!

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •