Onmouseover tables

I’m not very good with HTML code, but I would like to have same onmouseover table function as http://www.pokerstars.ee/en/ has (THE BIGGEST ONLINE POKER TOURNAMENTS, TEAM POKERSTARS PRO and so on). But I don’t figure out where to find code/tutorial for this one. Can anybody help? Digitalpoint user recommended http://www.dynamicdrive.com/ but I din’t find anything there. Maybe dint know what to search.

Is this incredibly bad attempt at advertising a gambling site or am I wrong here?

I think Poker Stars doesn’t need this kind of advertising, they have plentty of clients/users already for not doing some forum spam. But I need some solution how to show 500+ word text for my visitors in small area. But don’t want to use iframe solutions (because of SEO).

I’m not a moderator here, but is this in any way related to php? Your question is also unclear, what’s a mouseover table? A table that pops out when someone hovers an element or what?

You can click the orange flag to report suspicious post to the moderators and they can act on the post accordingly.

To answer the op’s question, you can attach an onmouseover even handler to an element and then use js to change display styles or whatever on another element (table or whatever). If you post some code we can try to help you get the effect you want.

At first I thought it was spam but he posted the text that actually toggles.

I see what you are asking, view the source code and look for, toggleDivs1() toggleDivs2() etc… This is all JavaScript to call some functions. There is also a body onload event you may want.

The JavaScript functions are,


function clearToggle() {
    document.getElementById('copy1').style.display = 'block';
    document.getElementById('copy2').style.display = 'none';
    document.getElementById('copy3').style.display = 'none';
    document.getElementById('copy4').style.display = 'none';
    document.getElementById('copy5').style.display = 'none';
    document.getElementById('copy6').style.display = 'none';
    document.getElementById('copy7').style.display = 'none';
    document.getElementById('box-1').className = "box-top";
    document.getElementById('box-6').className = "box-bottom";
    document.getElementById('box-2').className = "box-middle";
    document.getElementById('box-3').className = "box-middle";
    document.getElementById('box-4').className = "box-middle";
    document.getElementById('box-5').className = "box-middle";
}
var vip_img = document.getElementById('copy1');
var blocktxt_1 = document.getElementById('copy2');
var blocktxt_2 = document.getElementById('copy3');
var blocktxt_3 = document.getElementById('copy4');
var blocktxt_4 = document.getElementById('copy5');
var blocktxt_5 = document.getElementById('copy6');
var blocktxt_6 = document.getElementById('copy7');
function toggleDivs1() {
    if ((vip_img.style.display == 'block') || (blocktxt_2.style.display == 'block') || (blocktxt_3.style.display == 'block') || (blocktxt_4.style.display == 'block') || (blocktxt_5.style.display == 'block') || (blocktxt_6.style.display == 'block')) {
        vip_img.style.display = 'none';
        blocktxt_1.style.display = 'block';
        blocktxt_2.style.display = 'none';
        blocktxt_3.style.display = 'none';
        blocktxt_4.style.display = 'none';
        blocktxt_5.style.display = 'none';
        blocktxt_6.style.display = 'none';
        document.getElementById('box-1').className = "box-top-on";
        document.getElementById('box-6').className = "box-bottom";
        document.getElementById('box-2').className = "box-middle";
        document.getElementById('box-3').className = "box-middle";
        document.getElementById('box-4').className = "box-middle";
        document.getElementById('box-5').className = "box-middle";
    }
}
function toggleDivs2() {
    if ((vip_img.style.display == 'block') || (blocktxt_1.style.display == 'block') || (blocktxt_3.style.display == 'block') || (blocktxt_4.style.display == 'block') || (blocktxt_5.style.display == 'block') || (blocktxt_6.style.display == 'block')) {
        vip_img.style.display = 'none';
        blocktxt_1.style.display = 'none';
        blocktxt_2.style.display = 'block';
        blocktxt_3.style.display = 'none';
        blocktxt_4.style.display = 'none';
        blocktxt_5.style.display = 'none';
        blocktxt_6.style.display = 'none';
        document.getElementById('box-1').className = "box-top";
        document.getElementById('box-6').className = "box-bottom";
        document.getElementById('box-2').className = "box-middle-on";
        document.getElementById('box-3').className = "box-middle";
        document.getElementById('box-4').className = "box-middle";
        document.getElementById('box-5').className = "box-middle";
    }
}
function toggleDivs3() {
    if ((vip_img.style.display == 'block') || (blocktxt_1.style.display == 'block') || (blocktxt_2.style.display == 'block') || (blocktxt_4.style.display == 'block') || (blocktxt_5.style.display == 'block') || (blocktxt_6.style.display == 'block')) {
        vip_img.style.display = 'none';
        blocktxt_1.style.display = 'none';
        blocktxt_2.style.display = 'none';
        blocktxt_3.style.display = 'block';
        blocktxt_4.style.display = 'none';
        blocktxt_5.style.display = 'none';
        blocktxt_6.style.display = 'none';
        document.getElementById('box-1').className = "box-top";
        document.getElementById('box-6').className = "box-bottom";
        document.getElementById('box-2').className = "box-middle";
        document.getElementById('box-3').className = "box-middle-on";
        document.getElementById('box-4').className = "box-middle";
        document.getElementById('box-5').className = "box-middle";
    }
}
function toggleDivs4() {
    if ((vip_img.style.display == 'block') || (blocktxt_1.style.display == 'block') || (blocktxt_2.style.display == 'block') || (blocktxt_3.style.display == 'block') || (blocktxt_5.style.display == 'block') || (blocktxt_6.style.display == 'block')) {
        vip_img.style.display = 'none';
        blocktxt_1.style.display = 'none';
        blocktxt_2.style.display = 'none';
        blocktxt_3.style.display = 'none';
        blocktxt_4.style.display = 'block';
        blocktxt_5.style.display = 'none';
        blocktxt_6.style.display = 'none';
        document.getElementById('box-1').className = "box-top";
        document.getElementById('box-6').className = "box-bottom";
        document.getElementById('box-2').className = "box-middle";
        document.getElementById('box-3').className = "box-middle";
        document.getElementById('box-4').className = "box-middle-on";
        document.getElementById('box-5').className = "box-middle";
    }
}
function toggleDivs5() {
    if ((vip_img.style.display == 'block') || (blocktxt_1.style.display == 'block') || (blocktxt_2.style.display == 'block') || (blocktxt_3.style.display == 'block') || (blocktxt_4.style.display == 'block') || (blocktxt_6.style.display == 'block')) {
        vip_img.style.display = 'none';
        blocktxt_1.style.display = 'none';
        blocktxt_2.style.display = 'none';
        blocktxt_3.style.display = 'none';
        blocktxt_4.style.display = 'none';
        blocktxt_5.style.display = 'block';
        blocktxt_6.style.display = 'none';
        document.getElementById('box-1').className = "box-top";
        document.getElementById('box-6').className = "box-bottom";
        document.getElementById('box-2').className = "box-middle";
        document.getElementById('box-3').className = "box-middle";
        document.getElementById('box-4').className = "box-middle";
        document.getElementById('box-5').className = "box-middle-on";
    }
}
function toggleDivs6() {
    if ((vip_img.style.display == 'block') || (blocktxt_1.style.display == 'block') || (blocktxt_2.style.display == 'block') || (blocktxt_3.style.display == 'block') || (blocktxt_4.style.display == 'block') || (blocktxt_5.style.display == 'block')) {
        vip_img.style.display = 'none';
        blocktxt_1.style.display = 'none';
        blocktxt_2.style.display = 'none';
        blocktxt_3.style.display = 'none';
        blocktxt_4.style.display = 'none';
        blocktxt_5.style.display = 'none';
        blocktxt_6.style.display = 'block';
        document.getElementById('box-1').className = "box-top";
        document.getElementById('box-6').className = "box-bottom-on";
        document.getElementById('box-2').className = "box-middle";
        document.getElementById('box-3').className = "box-middle";
        document.getElementById('box-4').className = "box-middle";
        document.getElementById('box-5').className = "box-middle";
    }
}