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

[shiv 0]

Notice from szupie:

Source: http://forums.xisto.com/no_longer_exists/

 

stun ur visitors with changing table colors!

 

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

(works on IE only).

 

 

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:

 

onMouseover="this.bgColor='lightgrey'"

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

 

 

give different colors as u want!

 

njoy!

 

shiv

[evion 0]

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?

[vizskywalker 0]

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

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

this.style.backgroundColor = "foo";

where foo is the same as above.

~Viz

[Samya 0]

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

[CrazyPensil 0]

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

[pyost 0]

I used this on a small presentation of mine, really neat function. You can see it at http://forums.xisto.com/no_longer_exists/, the right vertical menu. Take a look at the source code and you'll see how it is used.

[shiv 0]

I used this on a small presentation of mine, really neat function. You can see it at http://forums.xisto.com/no_longer_exists/, the right vertical menu. Take a look at the source code and you'll see how it is used.

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

cheerz!

shiv

[Jack Cheng 0]

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

 

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....)

[iGuest 3]

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

[iGuest 3]

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 http://forums.xisto.com/no_longer_exists/.; 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

[TavoxPeru 0]

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 http://forums.xisto.com/no_longer_exists/. 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

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:

<script type="text/javascript">
function focusElement(formName, elemName) {
   var elem = document.forms[formName].elements[elemName];
   elem.focus( );
   elem.select( );
}
</script>

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

<input onfocus="offsetParent.style.backgroundColor='#555999'" onblur="offsetParent.style.backgroundColor='#ccccff'" type="text" name="3A-G" size="1" maxlength="1">

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,

[iGuest 3]

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