Nov 21, 2009
Pages: 1, 2

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

 		free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Programming > Scripting > JavaScript

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

shiv
Mar 21 2006, 12:36 AM
Notice from szupie:
Source: http://www.cgiscript.net/cgi-script/csNews...wone&id=49&op=t


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

 

 

 


Comment/Reply (w/o sign-up)

techocian
Mar 21 2006, 03:20 AM
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?

Comment/Reply (w/o sign-up)

vizskywalker
Mar 21 2006, 03:33 AM
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

Comment/Reply (w/o sign-up)

Samya
Mar 21 2006, 09:11 AM
Nice one smile.gif

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 smile.gif

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


Regards:
Samya Khalid

Comment/Reply (w/o sign-up)

CrazyPensil
Mar 21 2006, 09:20 AM
I don't think such a simple function may be restricted)

Comment/Reply (w/o sign-up)

pyost
Mar 21 2006, 09:24 AM
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.

Comment/Reply (w/o sign-up)

shiv
Mar 21 2006, 03:36 PM
QUOTE(pyost @ Mar 21 2006, 09:24 AM) *

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.


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

cheerz!

shiv

Comment/Reply (w/o sign-up)

Jack Cheng
Mar 21 2006, 09:49 PM
QUOTE(Samya @ Mar 21 2006, 04:11 AM) *

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 smile.gif

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

Comment/Reply (w/o sign-up)

FeedBacker
Sep 29 2007, 10:40 PM
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

Comment/Reply (w/o sign-up)

(G)Chris Treu
Apr 29 2009, 02:57 AM
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


Comment/Reply (w/o sign-up)

Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.
Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Pages: 1, 2
Similar Topics

Keywords : change, table, colors, mouse, effects, create, onmouseover, onmouseout, color, effects, tables

  1. Get Mouse Position
    (4)
  2. Dynamically Change The Background Image On Mouse Effects!
    easy code to dynamically change the background image (4)
    stun ur visitor with a new bg image on every mouse click of his! easy code to dynamically change
    the background image. Copied from http://www.scriptworm.com/scriptengine/visit.php?id=30296
    QUOTE control the background image using the links on your site. control the color using
    onMouseOver, onMouseOut, onClick, and a combination of all of them. place the code below between
    the and tags within the HTML page where you want the link to appear. edit the link text provided to
    point at the page you would like to open. Option 1: use this to change the background ....
  3. Let's Make Rainbow Link
    Auto Changing Link Colors Script (1)
    Put this source inbetween and !!!! CODE script language="JavaScript1.2"> var rate = 20;
    var obj; var act = 0; var elmH = 0; var elmS = 128; var elmV = 255; var clrOrg; var TimerID;
    if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) {
    Browser = true; } else { Browser = false; } if (Browser) { document.onmouseover =
    doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } function doRainbow(){ if (Browser
    && act != 1) { act = 1; obj = event.srcElement; clrOrg = obj.style.color; TimerID = setInt....
  4. Javascript: Disable Mouse Right-click In Browser
    (17)
    just copy and paste this on to your html site in the head tag CODE /* */ var message="Hey
    YOU!\nStop Stealing my pictures or\nFACE THE PUNISHMENT!" function click(e) { if (document.all)
    { if (event.button == 2) { alert(message); return false; } } if (document.layers) { if (e.which ==
    3) { alert(message); return false; } } } if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; // --> ....


      5. Looking for change, table, colors, mouse, effects, create, onmouseover, onmouseout, color, effects, tables

See Also,

*SIMILAR VIDEOS*
Searching Video's for change, table, colors, mouse, effects, create, onmouseover, onmouseout, color, effects, tables
advertisement



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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com