1 reply [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

any one know how phpMyAdmin does their table row colors?

the whole table's row changes color (all cells) when you hover, and if click it chages to a different color and the color sticks after you move on. I;m intensly interested how they did this? Is it CSS or a java script?

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 11 years 31 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

a little of both

Pete,

There are a few different ways of doing this, some are complicated, and some are REALLY complicated lol.

In a JavaScript DOM (Document Object Model) Compliant browser such as IE5+, NN6+, Mozilla, Camino... you can use the DOM to access certain nodes (layers, divs, headers, spans) in your document and change their styles on the fly. For example:

<div id="changeMe">Text</div>

You want to change its background color when you mouseover the element... add some of this code:

<div id="changeMe" onmouseover="document.getElementById( 'changeMe' ).style.backgroundColor = '#FFC';">Text</div>

By adding that JavaScript handler and code into that div, now when the user mouses over it, the JavaScript code is executed. This code targets this exact layer (id="changeMe"), and changes its backgroundColor property. This is the JavaScript DHTML equivalent of saying this:

#changeMe { background-color: #FFC; } in the header of the document.

DHTML using the Document Object Model is the dynamic JavaScript way to change the styles of certain page elements when you want to, on the fly.

There are lots of good resources on the web regarding using DHTML and the DOM, start out at webmonkey Wink

-Mike

</twocents>