SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Dec 6, 2003, 12:43 #1
- 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 (i = 0; i < 13; i++)
{
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>
I've done lots of search on google but no luck. Hope someone could help me here. Thanks in advanced.
-
Dec 7, 2003, 00:35 #2
- 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.Cross-Browser.com, Home of the X Library
-
Dec 7, 2003, 00:40 #3
- 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.
-
Dec 7, 2003, 01:06 #4
- 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>
Cross-Browser.com, Home of the X Library
-
Dec 7, 2003, 02:23 #5
- 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!
-
Dec 8, 2003, 09:23 #6
- 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 hereCross-Browser.com, Home of the X Library
-
Dec 11, 2003, 02:29 #7
- 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>
Code:var ele = document.getElementsByTagName("a"); for( var i=0; i<ele.length; i++ ) { if( activeEle ) { document.write(ele.item(i).id); break; } }
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.
-
Dec 11, 2003, 02:44 #8
- 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