SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onmouseover/hover many/multiple tables cells background-images changes at same time

    I have now try everyting I can to find solution for this. There is just too much results when I google and try to find ready example...

    I know that much, that it's possible to do whit CSS, but it does not work in ie6. So what is the best solution to do it then? Whit CSS and Javascript?

    The idea is, that I have a menu and menus links are saved in MySql. I print those out whit PHP and loop like this;

    <table name="menu_table">
    <tr>
    <td width="10"></td>

    PHP loop starts

    <td width="3" background="menu_button_left.gif"></td>
    <td background="menu_button_bg.gif">
    MySql[row1]; Menu1</td>
    <td width="3" background="menu_button_right.gif"></td>
    <td width="5"></td>

    PHP loop ends

    </tr>
    </table>

    Simple, isn't it? Now the problem comes when I try to change background images 'menu_button_left.gif', 'menu_button_bg.gif' and 'menu_button_right.gif' when mouse pointer is over any of those cells.

    Any ideas?

    The menu is horizontal and there is many links saved in Mysql of course, like this;
    [row1]Menu1
    [row2]Menu2
    [row3]Loooooooooooooooooooonng menu-text

    My page have also a second menu, which works alike, so javascript should work whit both menus. And I hope there is a way to do it without touching tables <tr> -style, becouse I want the menu to be in one table only. And I hope there is a way to do it "old-fashioned" without any background-position or "Sliding doors" -technique etc.

    Any ideas left?


    -Ville

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.. no answers...
    Let's try to put it in this way;

    I try to change two tables cells background images when mouse pointer is over each of those.

    <table width="200" height="100">
    <tr>
    <td id="cell1" background="cell_bg_mouseout.gif"></td>
    <td id="cell2" background="cell_bg_mouseout.gif"></td>
    </tr>
    </table>

    Now question1; Is it possible to change BOTH of those 'cell_bg_mouseout.gif' -bg-images to example 'cell_bg_mouseover.gif' SAME TIME when mouse pointer is over EACH OF those cells?

    And question2; Is it possible to make a link of those tables cells with CSS?
    (When I click cell -> page changes to something else)

    I really hope now someone understand this...

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The following should do what you're after, and is very straight forward. Place it at the end of the body.

    Code javascript:
    document.getElementById('cell1').onmouseover = bgMouseover;
    document.getElementById('cell2').onmouseover = bgMouseover;
    document.getElementById('cell1').onmouseout = bgMouseout;
    document.getElementById('cell2').onmouseout = bgMouseout;
    document.getElementById('cell1').onclick= menuClick;
    document.getElementById('cell2').onclick= menuClick;
     
    function bgMouseover() {
        setBackground('cell1', 'cell_bg_mouseover.gif');
        setBackground('cell2', 'cell_bg_mouseover.gif');
    }
    function bgMouseout() {
        setBackground('cell1', 'cell_bg_mouseout.gif');
        setBackground('cell2', 'cell_bg_mouseout.gif');
    }
    function setBackground(id, image) {
        var el = document.getElementById('id');
        el.style.background = 'url("' + image + '")';
    }
     
    function menuClick() {
        var menuitem = this.id;
        var locations = {
            'home': '/',
            'about': 'about.php'
        };
        if (locations[menuitem]) {
            location.url = locations[menuitem];
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •