SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    highlight unhighlight link background?

    Hi, I'm trying to create link that when a user clicks it, it will highlight the link with a bgcolor of blue, while when the user clicks on another link, the previous link will unhighlight and highlight the new link which was clicked.

    What I've been trying had got me into this:

    PHP Code:
    <script language="JavaScript">
    <!--

    function 
    highlight( )
    {
        
    undohighlight();
        
        var 
    oObj event.srcElement;
        
    oObj.style.color "#FFFFFF";
         
    oObj.style.background "#000066";
    }

    function 
    undohighlight()
    {
         var 
    i
         
    for (013i++)
        {
               if(
    i.style.color == "#FFFFFF")
         }
    }
    //-->
    </script> 
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" class="body">
      <tr> 
        <td><img src="http://localhost/images/pic.gif"></td>
        <td><div onClick="highlight( );">Link 1</div></td>
      </tr>
      <tr> 
        <td><img src="http://localhost/images/pic.gif"></td>
        <td><div onClick="highlight( );">Link 2</div></td>
      </tr>
    </table>
    For this snippets, its working on the highlighting part, but I've no idea how to get the unhighlighting work.
    I've done lots of search on google but no luck. Hope someone could help me here. Thanks in advanced.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an idea...

    When highlight() is called it should assign a reference to the highlighted element to a global variable. When undohighlight() is called it will use the global variable to know which element to unhighlight.

  3. #3
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Mike! I've no knowledge in javascript totally, can you show me some example? Thanks and thanks.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are many different ways, but you are very close. Taking your code and making minimal changes...
    Code:
    <script type='text/javascript'>
    
    var activeEle = null;
    
    function highlight( ) 
    { 
        if (activeEle) {
          activeEle.style.color = '#000';
          activeEle.style.background = 'transparent';
        }
        var oObj = event.srcElement; 
        oObj.style.color = "#FFFFFF"; 
        oObj.style.background = "#000066"; 
        activeEle = oObj;
    } 
    
    </script>

  5. #5
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW, what can I say. I've been dealing with this and searching high and low for explaination on this for approx 3 days and here, Mike save me with the final answer with one neat function! Thanks a million Mike! You're truly the man and I'll support Cross-Browser.com on my signature! Thanks again!

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much, say!

    We do like to play with javascript here

  7. #7
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike, sorry to trouble you again. May I know how to reference the selected link? I have place an id on each link as:

    Code:
     <td width="1%"><img src="http://localhost/folder.gif" /></td>
    <td width="99%"><a id="9" onClick="highlight( );">link 1</a></td> 
    <td width="1%"><img src="http://localhost/folder.gif" /></td>
    <td width="99%"><a id="10" onClick="highlight( );">link 2</a></td>
    and I tried a loop on this to get the highlighted link:

    Code:
    var ele = document.getElementsByTagName("a");
    
    for( var i=0; i<ele.length; i++ )
    {
        if( activeEle )
       {
            document.write(ele.item(i).id);
            break;
        }
    }
    Is giving me the same 9 id everytime despite I choose link 2. I tried reading getElementsBySelector(), but no idea how to use it to reference the style in any way. Hope you can give some pointers here. Thanks.

  8. #8
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After playing around, I got it!

    Code:
    var ele = document.getElementsByTagName("a");
    
    	for( var i=0; i<ele.length; i++ )
    	{
    		if( ele.item(i).style.background == "#000066" )
        	{
    			document.write(ele.item(i).id);
    			break;
    		}
    	}


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
  •