[JS] Cell nummer van tabel waarover de muis ging

[REDFISH]

Ik ben bezig met een website en ik wil nu als een muis over een cell (TD) komt van een tabel, dat andere cellen van die tabel van kleur veranderen. Op dit moment doet ik het zo:

HTML:

<script language="JavaScript"><!--
    function onColor(table)
    {
        var cells = table.getElementsByTagName("td");    
        cells[0].style.backgroundColor = '#E9AF01';
        cells[17].style.backgroundColor = '#E9AF01';
        cells[85].style.backgroundColor = '#E9AF01';
    }

    function offColor(table)
    {
        var cells = table.getElementsByTagName("td");
        cells[0].style.backgroundColor = '#CC6600';
        cells[17].style.backgroundColor = '#CC6600';
        cells[85].style.backgroundColor = '#CC6600';
    }
// -->
</script>

En in de HTML zelf 

<TD onMouseOver="onColor(menu)"> </td>

Zoals je ziet worden eerst alle cellen (met code TD) in een array cells gezet en dus een nummertje gegeven. Dit nummertje is later aanspreekbaar in de JS code.

Het idee is nu echter dat ik niet voor elke cel waarover de muis kan gaan, een nieuwe combinatie van 3 andere cellen die van kleur moeten veranderen ga opschrijven. Maar dus wel dat bijvoorbeeld de muis over cel 10 gaat, waarna cel 10*2 en cel 10*3 (om maar wat te noemen) veranderen. Ik heb al zitten pielen met This, maar ik kom er gewoon niet uit. Volgens mij is het iets heel simpels. Ik moet dus het nummer van de cel hebben waarover de muis is gegaan zodat er mee te rekenen is.

[ Voor 10% gewijzigd door REDFISH op 22-09-2005 14:05 ]

[Verwijderd]

REDFISH schreef op donderdag 22 september 2005 @ 14:03:
Ik ben bezig met een website en ik wil nu als een muis over een cell (TD) komt van een tabel, dat andere cellen van die tabel van kleur veranderen. Op dit moment doet ik het zo:

HTML:

<script language="JavaScript"><!--
    function onColor(table)
    {
        var cells = table.getElementsByTagName("td");    
        cells[0].style.backgroundColor = '#E9AF01';
        cells[17].style.backgroundColor = '#E9AF01';
        cells[85].style.backgroundColor = '#E9AF01';
    }

    function offColor(table)
    {
        var cells = table.getElementsByTagName("td");
        cells[0].style.backgroundColor = '#CC6600';
        cells[17].style.backgroundColor = '#CC6600';
        cells[85].style.backgroundColor = '#CC6600';
    }
// -->
</script>

En in de HTML zelf 

<TD onMouseOver="onColor(menu)"> </td>

Zoals je ziet worden eerst alle cellen (met code TD) in een array cells gezet en dus een nummertje gegeven. Dit nummertje is later aanspreekbaar in de JS code.

Het idee is nu echter dat ik niet voor elke cel waarover de muis kan gaan, een nieuwe combinatie van 3 andere cellen die van kleur moeten veranderen ga opschrijven. Maar dus wel dat bijvoorbeeld de muis over cel 10 gaat, waarna cel 10*2 en cel 10*3 (om maar wat te noemen) veranderen. Ik heb al zitten pielen met This, maar ik kom er gewoon niet uit. Volgens mij is het iets heel simpels. Ik moet dus het nummer van de cel hebben waarover de muis is gegaan zodat er mee te rekenen is.

Je wilt een rij van kleur laten veranderen? Zo ja, dan zou ik elke tabelrij een id meegeven en een klasse. Wanneer je over een rij scrolt verander je de klasse van de betreffende tabelrij.

[ Voor 6% gewijzigd door Verwijderd op 22-09-2005 14:25 ]

[crisp]

Kijk eens naar de cellIndex en rowIndex properties

En ik denk eerder dat hij een kolom van kleur wilt laten veranderen in plaats van een rij; meer zoiets dus:

1	2	3
4	5	6
7	8	9

[ Voor 93% gewijzigd door crisp op 22-09-2005 14:49 ]

[REDFISH]

Ja inderdaad, een kolom, alleen dan moeten slechts 3 van de zoveel veranderen en de rest niet. Ik zal es kijken of ik iets aan die code heb. Was handiger geweest als je die als code erbij had gedaan

HTML:

<script type="text/javascript">

var table = document.getElementById('myTable'), td = table.getElementsByTagName('td'), i = td.length;
while (i--)
{
    td[i].onmouseover = columnOn;
    td[i].onmouseout = columnOff;
}

function columnOn()
{
    var cellIndex = this.cellIndex;
    var table = this.parentNode, tr, i;
    do
    {
        if (table.tagName.toLowerCase() == 'table')
        {
            tr = table.rows, i = tr.length;
            {
                while (i--)
                    tr[i].cells[cellIndex].style.backgroundColor = 'red';
            }

            break;
        }
    }
    while ((table = table.parentNode));
}

function columnOff()
{
    var cellIndex = this.cellIndex;
    var table = this.parentNode, tr, i;
    do
    {
        if (table.tagName.toLowerCase() == 'table')
        {
            tr = table.rows, i = tr.length;
            {
                while (i--)
                    tr[i].cells[cellIndex].style.backgroundColor = '';
            }

            break;
        }
    }
    while ((table = table.parentNode));
}

</script>

Ik geloof niet dat dat laatste mogelijk is via deze code, daarvoor zul je toch iets van een selectie moeten toepassen. Voor een voorbeeld kijk effe op http://84.245.25.245/AN en ga dan over inleiding

Ik bedenk me net ook dat ik het ook anders kan doen. Als ik gewoon een tabel maak met meerdere kolommen en dan in die kolom telkens weer een tabel maak met meerdere kolommen, dan kan ik onmouseover van tweede tabel gewoon de eerste tabel van kleur veranderen, en afhankelijk of de tweede tabel achtergrond een kleur heeft zal dan de eerste tabel kleur erdoorheen schijnen. Maar dan heb ik niks geleerd, dus ik zal nog wel even wat moeten klooien.

[ Voor 100% gewijzigd door REDFISH op 22-09-2005 16:28 ]

[Verwijderd]

REDFISH schreef op donderdag 22 september 2005 @ 16:22:
Ja inderdaad, een kolom, alleen dan moeten slechts 3 van de zoveel veranderen en de rest niet. Ik zal es kijken of ik iets aan die code heb. Was handiger geweest als je die als code erbij had gedaan

HTML:

<script type="text/javascript">

var table = document.getElementById('myTable'), td = table.getElementsByTagName('td'), i = td.length;
while (i--)
{
    td[i].onmouseover = columnOn;
    td[i].onmouseout = columnOff;
}

function columnOn()
{
    var cellIndex = this.cellIndex;
    var table = this.parentNode, tr, i;
    do
    {
        if (table.tagName.toLowerCase() == 'table')
        {
            tr = table.rows, i = tr.length;
            {
                while (i--)
                    tr[i].cells[cellIndex].style.backgroundColor = 'red';
            }

            break;
        }
    }
    while ((table = table.parentNode));
}

function columnOff()
{
    var cellIndex = this.cellIndex;
    var table = this.parentNode, tr, i;
    do
    {
        if (table.tagName.toLowerCase() == 'table')
        {
            tr = table.rows, i = tr.length;
            {
                while (i--)
                    tr[i].cells[cellIndex].style.backgroundColor = '';
            }

            break;
        }
    }
    while ((table = table.parentNode));
}

</script>

Ik geloof niet dat dat laatste mogelijk is via deze code, daarvoor zul je toch iets van een selectie moeten toepassen. Voor een voorbeeld kijk effe op http://84.245.25.245/AN en ga dan over inleiding

Ik bedenk me net ook dat ik het ook anders kan doen. Als ik gewoon een tabel maak met meerdere kolommen en dan in die kolom telkens weer een tabel maak met meerdere kolommen, dan kan ik onmouseover van tweede tabel gewoon de eerste tabel van kleur veranderen, en afhankelijk of de tweede tabel achtergrond een kleur heeft zal dan de eerste tabel kleur erdoorheen schijnen. Maar dan heb ik niks geleerd, dus ik zal nog wel even wat moeten klooien.

Kun je wat screens posten? Dan is het duidelijker wat je bedoelt.

[REDFISH]

Als je de moeite zou nemen om mijn post te lezen, zag je de link met het voorbeeld al staan

[crisp]

tsja, persoonlijk zou ik daar in de eerste plaats al geen tabel voor gebruiken

[REDFISH]

Wat dan crisp?

Het idee is, je gaat over row 4 van een tabel heen, en row 1, 2 en 5 veranderen van kleur. Ik kan de functie wel aanpassen zodat ik telkens opgeef welke nummers van kleur veranderen.

[crisp]

Ik zou het zo doen:

HTML:

<style type="text/css">

ul#menu {
    width: 900px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#menu li {
    float: left;
    background-color:#c60;
    width: 99px;
    height: 99px;
    text-align: center;
    font: 50px/60px times, serif;
    border-right: 1px solid #000;
}
ul#menu li.last {
    border-right: none;
}
ul#menu a {
    display: block;
    background-color: #fff;
    font: 16px/20px verdana, sans-serif;
    color: blue;
    text-decoration: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 10px;
}

</style>
<ul id="menu">
    <li>A
        <a href="#">inleiding</a>
    </li>
    <li>R
        <a href="#">nieuws</a>
    </li>
    <li>T
        <a href="#">museum</a>
    </li>
    <li>E
        <a href="#">veilingen</a>
    </li>
    <li>N
        <a href="#">collectie</a>
    </li>
    <li>U
        <a href="#">personeel</a>
    </li>
    <li>O
        <a href="#">vacatures</a>
    </li>
    <li>V
        <a href="#">links</a>
    </li>
    <li class="last">O
        <a href="#">contact</a>
    </li>
</ul>
<script type="text/javascript">

var links = document.getElementById('menu').getElementsByTagName('a'), i = links.length;
while (i--)
{
    links[i].onmouseover = hover_on;
    links[i].onmouseout = hover_off;
}

function hover_on()
{
    this.parentNode.style.backgroundColor = '#e9af01';
}

function hover_off()
{
    this.parentNode.style.backgroundColor = '';
}

</script>

[disjfa]

Bah al dat javascript

code:

<style>
  li{
    list-style:none;
    float:left;
    text-align:center;
  }
  a{
    color:#000;
    background:#CC6600;
    display:block;
    width:60px;
    height:60px;
    border-right:1px solid #333;
  }
  a:hover{
    background:pink;
  }
  span{
    display:block;
  }
  span.top{
    font-size:25px;
  }
  span.a{
    border-top:1px solid #333;
    border-bottom:1px solid #333;
    background:#FFF;
    margin-bottom:5px;
  }
</style>
<ul>
  <li>
    <a href="#">
      <span class="top">A</span>
      <span class="a">tmp</span>
    </a>
  </li>  <li>
    <a href="#">
      <span class="top">A</span>
      <span class="a">tmp</span>
    </a>
  </li>  <li>
    <a href="#">
      <span class="top">A</span>
      <span class="a">tmp</span>
    </a>
  </li>
</ul>

[crisp]

disjfa: dat is niet helemaal hetzelfde

[REDFISH]

Haha, ruig hoe jullie dat doen met CSS, moet ik ook maar eens leren, wist niet dat het al zo uitgebreid was. Zover bedankt! Ik kan wel verder.