SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    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">
    <HTML>
     <HEAD>
      <TITLE> Three table-cells background-images changes OnMouseOver </TITLE>
     
    <script type="text/javascript"><!--
     function cellClick(url) {
    	top.self.location.href=url;
    	if (window.event) {
    		window.event.cancelBubble = true;
    	}
    }
    //--></script>
     
     </HEAD>
     
     <BODY>
     
     <table width="300" height="50" cellpadding="0" cellspacing="0" border="0">
      <tr>
       <td id="cell1" width="100" background="menu_bg_l.gif" onclick="cellClick('http://www.Menu1.com');"></td>
       <td id="cell2" width="100" background="menu_bg_c.gif" onclick="cellClick('http://www.Menu1.com');">Menu1</td>
       <td id="cell3" width="100" background="menu_bg_r.gif" onclick="cellClick('http://www.Menu1.com');"></td>
      </tr>
     </table>
     
     
    <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() {
        this.style.cursor='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');
        el.style.background = 'url("' + image + '")';
        var el = document.getElementById('cell2');
        el.style.background = 'url("' + image + '")';
        var el = document.getElementById('cell3');
        el.style.background = 'url("' + image + '")';
    }
    //--></script>
     
     
     </BODY>
    </HTML>

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

    Here is a screencast demonstrating how to create the technique.
    http://css-tricks.com/videos/css-tricks-video-7.php
    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
  •