Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help modifying function

    I'm trying to get this function

    Code:
    function showPic (whichpic) {
    	if (document.getElementById) {
    		document.getElementById('placeholder').src = whichpic.href;
    		
    		cswitch=document.getElementsByTagName('body')[0].getElementsByTagName('*');
     			for (i=0;i<cswitch.length;i++){
      				if (cswitch[i].className=='notselected'){
        				cswitch[i].className='selected';
      				}
    			 }
    		return false;
    		} else {
    		return true;
    	}
    }
    to control the css class of these links

    Code:
    <td id="t1"><a onclick="return showPic(this)" href="img01.jpg" class="notselected"></a></td>
    <td id="t2"><a onclick="return showPic(this)" href="img01.jpg" class="notselected"></a></td>
    <td id="t3"><a onclick="return showPic(this)" href="img01.jpg" class="notselected"></a></td>
    <td id="t4"><a onclick="return showPic(this)" href="img01.jpg" class="notselected"></a></td>
    So when you click on a link, it should switch its class to selected. Then when you click on another link, that link gets switched to selected and the other link gets switched back to nonselected.

    I've been trying to figure this out for a couple days now and just can't get my head around it and haven't found anyone to help out. So if you can work with me on this, I'd greatly appreciate it.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,533
    Thanks
    3
    Thanked 512 Times in 499 Posts
    doble post from another forum

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var Ary=new Array();
    function showPic (obj,whichpic) {
        if (!obj.set){
         obj.set=true;
         Ary[Ary.length]=obj;
        }
        for (i=0;i<Ary.length;i++){
         Ary[i].className='notselected';
        }
        obj.className='selected';
    	if (document.getElementById) {
    		document.getElementById('placeholder').src = whichpic;
    	}
    }
    
    /*]]>*/
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    .notselected {
      color:green;
    }
    .selected {
      color:red;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <img id="placeholder" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=200 height=200  /><br />
    
    <a onclick="showPic(this,'http://www.vicsjavascripts.org.uk/StdImages/One.gif');" class="notselected">Link1</a><br />
    <a onclick="showPic(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" class="notselected">Link2</a><br />
    <a onclick="showPic(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif');" class="notselected">Link3</a><br />
    </body>
    
    </html>


  •  

    Posting Permissions

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