SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    0 Post(s)
    0 Thread(s)

    Is there a better way to do this "Table-cells background changer" ?

    This script simply changes three background images same time when mouse pointer is over any of those cells. The idea is to make a menu whit menu-buttons and every menu-button haves three different background images.

    I would also like to know is this possible whit CSS...?

    Here is example where is only one menu-button in it and cells also works as a link;

    Code JavaScript:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <TITLE> Three table-cells background-images changes OnMouseOver </TITLE>
    <script type="text/javascript"><!--
     function cellClick(url) {
    	if (window.event) {
    		window.event.cancelBubble = true;
     <table width="300" height="50" cellpadding="0" cellspacing="0" border="0">
       <td id="cell1" width="100" background="menu_bg_l.gif" onclick="cellClick('');"></td>
       <td id="cell2" width="100" background="menu_bg_c.gif" onclick="cellClick('');">Menu1</td>
       <td id="cell3" width="100" background="menu_bg_r.gif" onclick="cellClick('');"></td>
    <script type="text/javascript"><!--
    document.getElementById('cell1').onmouseover = bgMouseover;
    document.getElementById('cell2').onmouseover = bgMouseover;
    document.getElementById('cell3').onmouseover = bgMouseover;
    document.getElementById('cell1').onmouseout = bgMouseout;
    document.getElementById('cell2').onmouseout = bgMouseout;
    document.getElementById('cell3').onmouseout = bgMouseout;
    function bgMouseover() {'hand';
        setBackground('cell1', 'menu_bg_l_hover.gif');
        setBackground('cell2', 'menu_bg_c_hover.gif');
        setBackground('cell3', 'menu_bg_r_hover.gif');
    function bgMouseout() {
        setBackground('cell1', 'menu_bg_l.gif');
        setBackground('cell2', 'menu_bg_c.gif');
        setBackground('cell3', 'menu_bg_r.gif');
    function setBackground(id, image) {
        var el = document.getElementById('cell1'); = 'url("' + image + '")';
        var el = document.getElementById('cell2'); = 'url("' + image + '")';
        var el = document.getElementById('cell3'); = 'url("' + image + '")';

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    104 Post(s)
    4 Thread(s)
    Yes it can easily be done only with CSS.

    Here is a screencast demonstrating how to create the technique.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Posting Permissions

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