Results 1 to 7 of 7

Thread: Change Table BG image upon mouseover of text/image

  1. #1
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Change Table BG image upon mouseover of text/image

    I have a table with 6 cells, I'd like the table background image to change whenever you rollover a cell or an object (like a blank.gif).

    So, basically, there would be 6 different bg images for the table. When an object (or cell) is mousedover the background of the table would change.

    There has to be an easy way to do this, but I haven't found one. Can anyone point me in the right direction?
    Last edited by lrickyutah; 11-16-2010 at 10:33 PM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Here you go:
    Code:
    <script type="text/javascript">
    var hover = function(table, class, image){ //table element, td's with class of `class` get the action, background image
    	for(var i = 0; i < table.getElementsByClassName('h').length; i++){
    		table.getElementsByClassName('h')[i].onmouseover = function(){
    			this.style.backgroundImage = "url('"+image+"')";
    		};
    		table.getElementsByClassName('h')[i].onmouseout = function(){
    			this.style.backgroundImage = "";
    		}
    	}
    };
    
    </script>
    <table id="table">
    	<tr>
    		<td class="h">Blah</td>
    		<td class="h">Blah</td>
    		<td>Blah</td>
    		<td>Blah</td>
    	</tr>
    	<tr>
    		<td>Blah</td>
    		<td class="h">Blah</td>
    		<td>Blah</td>
    		<td class="h">Blah</td>
    	</tr>
    </table>
    <script type="text/javascript">
    hover(document.getElementById('table'), 'h', 'image.gif');
    </script>
    Jeremy | jfein.net

  3. #3
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply!

    It's not quite what I'm looking for. I need the entire table's bg image to change not just the cell.

    So if I hover over the first cell (or an object in it) the entire table has background image 1.
    When I hover over the second cell (or an object in it) the entire table has background image 2.

    and so on.

    does that make sense?

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Code:
    <table id="table">
    	<tr>
    		<td>Blah</td>
    		<td>Blah</td>
    		<td>Blah</td>
    		<td>Blah</td>
    	</tr>
    	<tr>
    		<td>Blah</td>
    		<td>Blah</td>
    		<td>Blah</td>
    		<td>Blah</td>
    	</tr>
    </table>
    <script type="text/javascript">
    document.getElementById('table').onmouseover = function(){
      this.style.background = "url('http://www.tizag.com/pics/tizagSugar.jpg')";
    };
    document.getElementById('table').onmouseout = function(){
      this.style.background = "";
    };
    </script>
    Jeremy | jfein.net

  5. #5
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Nile,

    You've probably forgotten more than I'll ever know, thank you.

    That's closer, I'm looking for a script that will change the table background to one of six different things depending on what cell I'm hovering over.

    So when I hover over cell 1, the whole table has background 1.
    When I hover over cell 2, the whole table has background 2.
    When I hover over cell 3, the whole table has background 3.
    You get the idea.

    Sorry that I haven't explained it very clearly.

  6. #6
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I think I have it, the code's not pretty but it works. I just layered two tables and then modified a piece of image rollover js.

  7. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
    1. Go to your first post
    2. Edit your first post
    3. Click "Go Advanced"
    4. In the dropdown next to the title, select "RESOLVED"
    Jeremy | jfein.net

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
  •