Change Table Colors On Mouse Effects! create onMouseover/onMouseout color effects within tables!

	Change Table Colors On Mouse Effects! - create onMouseover/onMouseout color effects within tables!
	Discussion by shiv with 11 Replies. Last Update: February 19, 2010, 11:26 am

shiv

[note=szupie]Source: http://www.cgiscript.net/cgi-script/csNews...wone&id=49&op=t[/note]

stun ur visitors with changing table colors!

QUOTE

change table rows or table cells bgcolor when mouse moves over elements of the table.

(works on IE only).

QUOTE

paste the following code into the table element that you want to change.

for example, if you want to change the table row you paste the code into the <TR>.
if you want to change a table cell color you paste the code on the <TD>.
you may even add it to the <TABLE> tag to highlight the entire table!

Code:

QUOTE

onMouseover="this.bgColor='lightgrey'"
onMouseout="this.bgColor='#FFFFFF'"

give different colors as u want!

njoy!

shiv

Tue Mar 21, 2006 Reply New Discussion

techocian

Interesting piece of code...though i don't think it relates to Javascript at all sorry. It is basically another attribute under the <tr> tag with a little twist in it. It would be good for creating links though, to give it a contrasting color when you hover over it. How many browsers does it cover? Or does it only work with IE and FireFox?

Tue Mar 21, 2006 Reply New Discussion

vizskywalker

Actually, it is javascript realted as the onevent triggers are all javascript. It may only be compatible with IE and Firefox because IE defined the background color of an object to be bgColor and to be a part of the element. I haven;t tried this out, but theoretically, to give these effects to anyobject, replace

CODE

this.bgColor = "foo";

where foo is either the color name (one of the sixteen html defined presets) or the hex color code preceeded by the # sign with the following

CODE

this.style.backgroundColor = "foo";

where foo is the same as above.

~Viz

Tue Mar 21, 2006 Reply New Discussion

Samya

Nice one

But I have heard that this is only limited to Internet Explorer.
I dont think that it will work with other Browsers as Firefox, Netscape Navigator etc

Anyone ???
who know that it also works on Firefox ??

Regards:
Samya Khalid

Tue Mar 21, 2006 Reply New Discussion

CrazyPensil

I don't think such a simple function may be restricted)

Tue Mar 21, 2006 Reply New Discussion

pyost

I used this on a small presentation of mine, really neat function. You can see it at www.final-desgin.net, the right vertical menu. Take a look at the source code and you'll see how it is used.

Tue Mar 21, 2006 Reply New Discussion

shiv

QUOTE (pyost)

I used this on a small presentation of mine, really neat function. You can see it at www.final-desgin.net, the right vertical menu. Take a look at the source code and you'll see how it is used.

Link: view Post: 73429

hey pyost real glad to know it was straight away useful to someone!

cheerz!

shiv

Tue Mar 21, 2006 Reply New Discussion

Jack Cheng

QUOTE (Samya)

But I have heard that this is only limited to Internet Explorer.
I dont think that it will work with other Browsers as Firefox, Netscape Navigator etc

Anyone ???
who know that it also works on Firefox ??
Regards:
Samya Khalid

Link: view Post: 73426

It works on the lastest version of Opera, Firefox, and IE. The style property was implemented in all DOM compliant browsers (as in getElementById["id"].style....)

Tue Mar 21, 2006 Reply New Discussion

FeedBacker

The following does work in Firefox (ver to.0.0.7)

onMouseover="this.style.backgroundColor='#ffffff'"
onMouseout="this.style.backgroundColor='#ff0000'"

Cheers & thanks for that!

-Alioop

Sat Sep 29, 2007 Reply New Discussion

(G)Chris Treu

Changing table cell colorsChange Table Colors On Mouse Effects!

Hello. Thank-you for the instructions above. I like this website and find it very informative. I'm setting up Crossword Puzzle webpages www.Biblestudy-theselastdays.Com/crossword1.Htm. Can you tell me how I can cause a particular cell to change color on the "crossword puzzle" grid when someone clicks on the clue number from the "clues" table. Then, when they click the next clue, the prior cell changes back to the original color (with the rest of the puzzle grid) and the new cell changes color and so forth and so on. Any help would be greatly appreciated.

Thank-you.

Chris Treu

Wed Apr 29, 2009 Reply New Discussion

TavoxPeru

QUOTE (GChris Treu)

Changing table cell colors
Change Table Colors On Mouse Effects!

Hello. Thank-you for the instructions above. I like this website and find it very informative. I'm setting up Crossword Puzzle webpages www.Biblestudy-theselastdays.Com/crossword1.Htm. Can you tell me how I can cause a particular cell to change color on the "crossword puzzle" grid when someone clicks on the clue number from the "clues" table. Then, when they click the next clue, the prior cell changes back to the original color (with the rest of the puzzle grid) and the new cell changes color and so forth and so on. Any help would be greatly appreciated.

Thank-you.

Chris Treu
Link: view Post: 136485

To do this you must use the Javascript events onfocus and onblur of every input html tag of your page, these events will control the change of the background color of the DOM's offsetParent property, in this case will be the TD tags of your crossword puzzle grid. Also, you will use the Javascript event onclick of the A html tag that will force the execution of the previous events.

So, when you click on any clue number hyperlink on your clues table it will execute the onclick handler which first will scroll to the anchor location and then the related input tag will get focused activating the code attached to the onfocus event controller, in this case its related cell's background color will change, then when the input tag lost the focus it will activate the code attached to its onblur event, in this case will restore its related cell's background color to the original background color.

First copy the following Javascript function to the header section of your page:

CODE

And then attach the following code to every input tag on your crossword puzzle grid:

CODE

You can visit the Live Example that i create to view it in action.

BTW, i test this code only with Firefox 3 and internet explorer 6.

Best regards,

Sun May 10, 2009 Reply New Discussion

(G)ambili

to change text color as i moveover on the rowChange Table Colors On Mouse Effects!My cell of the table contains 3 (text) links to diffrent files.As I move over on the cell,my background color of that particular cell is being changed. But I want the color of all the 3 text also to change along with the background change.I am successful in changing the cell background.But not able to change all the 3 text colors at the same time.Please help me out of this problem if u r willing.Emailid: ambilibmenon@yahoo.Co.In-question by ambili

Fri Feb 19, 2010 Reply New Discussion