table croshair hover help

Status
Niet open voor verdere reacties.
G

golles

Gebruiker
Lid geworden
27 mrt 2008
Berichten
8
hee,

Ik heb een tabel en daar wil ik dmv javascript een crosshair hover op hebben (Online voorbeeld)

Nu heb ik de volgende code GEVONDEN alleen ik wil er nog wat in aanpassen maar weet niet precies hoe ik dit kan doen.

Ik wil dat de hover alleen werkt op een tabel met een bepaalde class of id...

wie-o-wie kan mij helpen?

HTML: 
<html>
<head>
<style type="text/css">

.hoverRow {
	background-color: #FFFF00;
}
.hoverColumn {
	background-color: #FFFF00;
}
.hoverCell {
	background-color: #FFFF00;
}

</style>
<script type="text/javascript">

    function hoverOver()
    {
        this.parentNode.className = "hoverRow";

        var rowElements = this.parentNode.parentNode.childNodes;
        // Check in which column the this cell object is at the moment.
        var column = 0;
        var o = this;
        while (o = o.previousSibling) column++;
        for (var row = 0; row < rowElements.length; row++)
        {
            if (rowElements[row].nodeType != 1) continue;
            rowElements[row].childNodes[column].className = "hoverColumn";
        }

        this.className = "hoverCell";
    }

    function hoverOut()
    {
        this.parentNode.className = "";

        var rowElements = this.parentNode.parentNode.childNodes;
        // Check in which column the this cell object is at the moment.
        var column = 0;
        var o = this;
        while (o = o.previousSibling) column++;
        for (var row = 0; row < rowElements.length; row++)
        {
            if (rowElements[row].nodeType != 1) continue;
            rowElements[row].childNodes[column].className = "";
        }
    }

    function init()
    {
        var rowElements = document.getElementsByTagName("tr");
        for (var row = 0; row < rowElements.length; row++)
        {
            columnElements = rowElements[row].childNodes;
            for (var column = 0; column < columnElements.length; column++)
            {
                columnElements[column].onmouseover = hoverOver;
                columnElements[column].onmouseout = hoverOut;
            }
        }
    }

window.onload=init;
</script>
</head>
<body>

        <table border="1" cellspacing="0">
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
				<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
				<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
				<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
				<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
				<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
        </table>

<br /><br /><br /><br /><br /><br />

        <table border="1" cellspacing="0" class="anders">
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
        </table>

</body>
</html>
 
Dit zijn je "classes", allemaal met dezelfde achtergrondskleur:
PHP: 
.hoverRow {
	background-color: #FFFF00;
}
.hoverColumn {
	background-color: #FFFF00;
}
.hoverCell {
	background-color: #FFFF00;
}

Groetjes,

Jeroen.
 
zoals de bedoeling was, het probleem is al opgelost op een ander forum
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan