IPB

Welcome Guest ( Log In | Register )



Tags
This content has not been tagged yet
 
Reply to this topicStart new topic

Highlight Tables On Mouseover

, Example Script


deedee2003
no avatar
Newbie [Level 1]
*
Group: Members
Posts: 10
Joined: 5-September 04
Member No.: 1,025



Post #1 post Sep 5 2004, 08:58 PM
Heare is a good trick:
Copy and paste the code below, into the <head> of your html document:
CODE
<script>[br]function changeto(highlightcolor){[/br]source=event.srcElement[br]if (source.tagName=="TR"||source.tagName=="TABLE")[/br]return[br]while(source.tagName!="TD")[/br]source=source.parentElement[br]if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")[/br]source.style.backgroundColor=highlightcolor[br]}[/br][br]function changeback(originalcolor){[/br]if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")[br]return[/br]if (event.toElement!=source)[br]source.style.backgroundColor=originalcolor[br]}[/br]</script>
[/br]Now in the table write:
CODE
<table onMouseover="changeto('lightgreen')" onMouseout="changeback('white')">

of course you can put anny color.

To exclude any cell(s) from the rollover effect, simply give that cell an id="ignore" [br]
CODE
<table onMouseover=.... onMouseout=....>[/br]<td id="ignore">

and that`s it , if you have any questions ask me wink.gif
Go to the top of the page
+Quote Post
Triple X
no avatar
Super Member
*********
Group: Members
Posts: 390
Joined: 22-August 04
From: No Where
Member No.: 876



Post #2 post Sep 5 2004, 09:27 PM
QUOTE (deedee2003 @ Sep 5 2004, 03:58 PM)
Heare is a good trick:
Copy and paste the code below, into the <head> of your html document:
CODE
<script>[br]function changeto(highlightcolor){[/br]source=event.srcElement[br]if (source.tagName=="TR"||source.tagName=="TABLE")[/br]return[br]while(source.tagName!="TD")[/br]source=source.parentElement[br]if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")[/br]source.style.backgroundColor=highlightcolor[br]}[/br][br]function changeback(originalcolor){[/br]if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")[br]return[/br]if (event.toElement!=source)[br]source.style.backgroundColor=originalcolor[br]}[/br]</script>
[/br]Now in the table write:
CODE
<table onMouseover="changeto('lightgreen')" onMouseout="changeback('white')">

of course you can put anny color.

To exclude any cell(s) from the rollover effect, simply give that cell an id="ignore"
CODE
<table onMouseover=.... onMouseout=....>[/br]<td id="ignore">
[br]and that`s it , if you have any questions ask me  wink.gif

*already knew*

Its pretty neat...did I just use the word neat...*shoots himself*.

On a side note: you have the smallest IP I have ever seen o_o
Go to the top of the page
+Quote Post
Zenchi
no avatar
Super Member
*********
Group: Members
Posts: 498
Joined: 23-August 04
Member No.: 878



Post #3 post Sep 5 2004, 10:20 PM
Aye, that's awesome! Is there any way to make it dither or change colors like from white to gray smoothly? biggrin.gif
Go to the top of the page
+Quote Post
NeXDesigns
no avatar
Super Member
*********
Group: Members
Posts: 260
Joined: 12-August 04
From: Hurricane Alley, Florida
Member No.: 770



Post #4 post Sep 12 2004, 07:35 PM
yeah like make it fade from the two colors? or only possible in flash?
Go to the top of the page
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   4 noxit 8,949 19th June 2004 - 05:45 PM
Last post by: OpaQue
No New Posts   1 holyium 3,314 2nd September 2004 - 11:50 PM
Last post by: football123213
No New Posts   0 deedee2003 3,717 5th September 2004 - 09:11 PM
Last post by: deedee2003
No New Posts   11 Avalon 2,613 21st August 2006 - 05:35 AM
Last post by: IvanDLegacy
No New Posts 10 serverph 1,410 15th July 2007 - 12:47 AM
Last post by: homespeaker
No New Posts   0 ZPGames 543 20th July 2006 - 07:36 AM
Last post by: ZPGames
No New Posts   1 faceofdie 2,509 31st December 2004 - 02:26 PM
Last post by: no9t9
No New Posts   1 Chatz 1,043 11th August 2007 - 04:00 PM
Last post by: lilemi
No New Posts   0 cse-icons 3,543 24th January 2005 - 01:02 PM
Last post by: cse-icons
No New Posts   10 wasi 3,711 20th February 2005 - 04:01 PM
Last post by: wasi
No New Posts   1 eskimmer 1,115 11th October 2007 - 04:14 PM
Last post by: Stenno
No New Posts   13 the_furious1 3,122 9th March 2005 - 02:36 AM
Last post by: beeseven
No New Posts   8 tempest 1,403 27th June 2006 - 05:33 PM
Last post by: Paul
No New Posts 11 electriic ink 3,072 9th August 2005 - 04:01 PM
Last post by: squeezer
No New Posts   5 Amezis 2,594 9th April 2005 - 12:03 PM
Last post by: Amezis


 



RSS Open Discussion Time is now: 5th November 2009 - 08:27 PM

Web Hosting Powered by ComputingHost.com.