Tekst in tabel veranderen on hover?

[Verwijderd]

Hallo,

Hoe kan ik een bepaalde tekst in een tabel laten veranderen, als je met een muis over een link gaat?
Ik zou dit met layers kunnen doen (hide/show) maar ik wil dit met een tabel voor elkaar krijgen. Waarschijnlijk moet dit met een javascript?

Bvd!

[Rowanov]

Ja, dit moet met javascript. Heel simple, je hangt een mouseover event aan je link. In die mouseover roep je een stukje javascript aan, wat met behulp van de DOM de juiste tabel-cel opzoekt, om daar dan vervolgens mee te doen wat je wilt. Het lijkt me wel slim als je eerst zelf iets gaat proberen en met deze gegeven termen op google gaat kijken en vervolgens zien hoe ver je komt

Hint: www.w3schools.com voor goede inleidende tutorials van javascript icm. DOM methoden.

[ Voor 11% gewijzigd door Rowanov op 30-05-2006 22:24 ]

[XWB]

Iets als:

JavaScript:

function emptyElement(element)
{
    while (element.hasChildNodes()) 
    {
        element.removeChild(element.firstChild);
    }
}

function change(id)
{
    var tr = document.getElementById(id);
    var tekst = document.createTextNode('Verander tekst');
    
    emptyElement(tr);
    
    tr.appendChild(tekst);
}

HTML:

<table>
    <tr>
        <td>test</td>
        <td id="blaat">test1</td>
    </tr>
</table>
<a href="" onmouseover="change('blaat');">Verander tekst</a>

?

[Verwijderd]

Top Hacku, thanks!

Ik ga het ff uitproberen.

[lullebakman]

Iets simpeler, maar mss minder professioneel:

JavaScript:

function changetext(elem, text)
{
    var element = document.getElementById(elem)
    element.innerHTML = text
}

Sommige mensen vinden .innerHTML vies, ik heb er geen problemen mee.

HTML:

<table>
<tr>
    <td id="cell">Tekst1!</td>
</tr>
</table>

<a href="#" onmouseover="changetext('cell','Tekst2!')">Verander tekst</a>

[Verwijderd]

Lullebakman schreef op woensdag 31 mei 2006 @ 15:46:
Iets simpeler, maar mss minder professioneel:

JavaScript:

function changetext(elem, text)
{
    var element = document.getElementById(elem)
    element.innerHTML = text
}

Sommige mensen vinden .innerHTML vies, ik heb er geen problemen mee.

HTML:

<table>
<tr>
    <td id="cell">Tekst1!</td>
</tr>
</table>

<a href="#" onmouseover="changetext('cell','Tekst2!')">Verander tekst</a>

Bedankt. Kan ik trouwens ook breaks in de tekst gebruiken?

[ Voor 14% gewijzigd door Verwijderd op 31-05-2006 16:03 ]

[Reveller]

Verwijderd schreef op woensdag 31 mei 2006 @ 16:02:
[...]
Bedankt. Kan ik trouwens ook breaks in de tekst gebruiken?

Ik zou zeggen, doe eens gek en probeer het eens?!

code:

<a href="#" onmouseover="changetext('cell', 'Tekst 2<br>Weet je<br>...')">Verander tekst</a>

[ Voor 53% gewijzigd door Reveller op 31-05-2006 16:41 ]

[XWB]

Uiteraard:

JavaScript:

function change(id)
{
    var tr = document.getElementById(id);
    var tekst = document.createTextNode('Verander tekst');
    var nogeentekst = document.createTextNode('Blaat');
    var br = document.createElement('br');
    
    emptyElement(tr);
    
    tr.appendChild(tekst);
    tr.appendChild(br);
    tr.appendChild(nogeentekst);
}

[Verwijderd]

Reveller schreef op woensdag 31 mei 2006 @ 16:39:
[...]

Ik zou zeggen, doe eens gek en probeer het eens?!

code:

<a href="#" onmouseover="changetext('cell', 'Tekst 2<br>Weet je<br>...')">Verander tekst</a>

Kon het nog niet uitproberen, dus vroeg het even. Ga nu aan de slag. Bedankt allemaal

[Verwijderd]

Kan toch ook gewoon met puur CSS? Je zou voor IE dan nog een klein Javascriptje moeten maken, maar dat is zo gedaan.

Cascading Stylesheet:

td span.hover, td:hover span {
    display: none;
    }

td:hover span.hover {
    display: block;
    }

HTML:

<td>
<span>Bla die bla bla.. 1</span>
<span class="hover">Bla die bla bla.. 2</span>
</td>

[Verwijderd]

Verwijderd schreef op woensdag 31 mei 2006 @ 18:18:
Kan toch ook gewoon met puur CSS? Je zou voor IE dan nog een klein Javascriptje moeten maken, maar dat is zo gedaan.

Cascading Stylesheet:

td span.hover, td:hover span {
    display: none;
    }

td:hover span.hover {
    display: block;
    }

HTML:

<td>
<span>Bla die bla bla.. 1</span>
<span class="hover">Bla die bla bla.. 2</span>
</td>

Ja, maar het probleem is dan dat ik maar 2 teksten kan tonen. De javascript hierboven werkt goed, met meerdere teksten.

[Verwijderd]

Wat bedoel je precies? Onmouseover is toch ook maar één actie (=twee teksten)?