How to make cells in my table mouseover effect

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
adsegzy
Forum Contributor
Posts: 184
Joined: Tue Jul 28, 2009 9:26 am

How to make cells in my table mouseover effect

Post by adsegzy »

Hello friends, please i need the cells in my table to respond to mouseover. how do i do this.

regards
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: How to make cells in my table mouseover effect

Post by s.dot »

Easy with CSS:

Code: Select all

td:hover { background-color: #fff; }
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: How to make cells in my table mouseover effect

Post by McInfo »

This example demonstrates how to apply event attributes to multiple elements.

table.php

Code: Select all

<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="./behavior.js"></script>
    </head>
    <body>
        <table id="colorful">
            <tbody>
                <?php for ($row = 0; $row < 10; $row++) : ?>
                    <tr>
                        <?php for ($col = 0; $col < 10; $col++) : ?>
                            <td><?php
                                // Displays the column and row number in the cell
                                printf('%02u:%02u', $row, $col);
                            ?></td>
                        <?php endfor; ?>
                    </tr>
                <?php endfor; ?>
            </tbody>
        </table>
    </body>
</html>
behavior.js

Code: Select all

/* JavaScript */
// This will happen after the document elements have been created
window.onload = function () {
    // Gets all of the elements to be modified (all cells in the table)
    var tds = document.getElementById('colorful').getElementsByTagName('td');
    // Tracks how many cells have been moused over
    var counter = 0;
    // Loops through the elements
    for (var i = 0; i < tds.length; i++) {
        // Applies an onmouseover event attribute
        tds[ i ].onmouseover = function () {
            // "this" refers to tds[ i ]
            this.style.color = 'white';
            this.style.backgroundColor = 'gray';
            // Changes the cell content and increments the counter
            this.innerHTML = counter++;
        }
        // Applies an onmouseout event attribute
        tds[ i ].onmouseout = function () {
            this.style.color = 'blue';
            this.style.backgroundColor = 'silver';
        }
    }
}
To assign an event to a single element, you can simply apply the attribute inline.

Code: Select all

<td onclick="alert('Hello, I am Cell 123.'); alert('You look familiar...');">123</td>
Edit: This post was recovered from search engine cache.
Post Reply