Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    multiple mouseover table cell bgcolor swaps on same page

    The first works fine. I can't figure out how to modify the code, however, to add others (hover2, hover3, etc.)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    	<style type="text/css">
    	td {
    		border: 1px solid black;
    	}
    	
    	.white {
    	    background-color: #FFFFFF;
    		color: #555;
    	 }
    	 
    	.gray {
    	    background-color: #D8D8D8;
    		color: #555;
    	 }
    	</style>
    	<script type="text/javascript">
    	<!--
    	window.onload=function() {
    	   cell=document.getElementsByTagName('td');
    	   document.getElementById('hover1').onmouseover=function() {
    	for(c=0;c<cell.length;c++) {
    	if(cell[c].className=='white') {
    	   cell[c].className='gray';
    	   }
    	  }
    	 }
    	   document.getElementById('hover1').onmouseout=function() {
    	for(c=0;c<cell.length;c++) {
    	if(cell[c].className=='gray') {
    	   cell[c].className='white';
    	    }
    	   }
    	  }
    	 }
    	//-->
    	</script>
    </head>
    
    <body>
    
    <table>
    	<tr>
    		<td id="hover1">mouseover one</td>
    		<td class="white">cell</td>
    		<td class="white">cell</td>
    	</tr>
    </table>
    
    <table>
    	<tr>
    		<td>mouseover two</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    </table>
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've got two answers to your question; the difficult js way and the simplified css way....

    Firstly (since this is the way you framed your question) you'd have to make id's for the cells that you want the onmouseover/out's for, and then go into the window.onload function and create matching functions for those cells (Note: I kept the changes to classNames the same, but you could make hover2 use different css classes):
    Code:
    <!-- I didn't include above <style> stuff... -->
    	<!--
    	window.onload=function() {
    	   cell=document.getElementsByTagName('td');
    	   document.getElementById('hover1').onmouseover=function() {
    	for(c=0;c<cell.length;c++) {
    	if(cell[c].className=='white') {
    	   cell[c].className='gray';
    	   }
    	  }
    	 }
    	   document.getElementById('hover1').onmouseout=function() {
    	for(c=0;c<cell.length;c++) {
    	if(cell[c].className=='gray') {
    	   cell[c].className='white';
    	    }
    	   }
    	  }
    	 }
    	   document.getElementById('hover2').onmouseover=function() {
    	for(c=0;c<cell.length;c++) {
    	if(cell[c].className=='white') {
    	   cell[c].className='gray';
    	   }
    	  }
    	 }
    	   document.getElementById('hover2').onmouseout=function() {
    	for(c=0;c<cell.length;c++) {
    	if(cell[c].className=='gray') {
    	   cell[c].className='white';
    	    }
    	   }
    	  }
    	 }
    
    	//-->
    	</script>
    </head>
    
    <body>
    
    <table>
    	<tr>
    		<td id="hover1">mouseover one</td>
    		<td class="white">cell</td>
    		<td class="white">cell</td>
    	</tr>
    </table>
    
    <table>
    	<tr>
    		<td id="hover2">mouseover two</td>
    		<td>cell</td>
    		<td>cell</td>
    	</tr>
    </table>
    
    </body>
    </html>
    As you can see, your code will increasingly get larger as you add more cells that you want some hover style added to. Thus my second answer.

    Usually when authors add onmouseover / onmouseout code, it is because they have one style in mind for the default object and another style when the user hovers the mouse over the object. CSS has a pseudo-class built into it that mimics the onmouseover style. Thus in your CSS (inside the <style> tags) you could have:
    Code:
    td#hover1 { /* Uses the old "white" class */
    	    background-color: #FFFFFF;
                color: #555;
    }
    
    td#hover1:hover { /* Uses the old "gray" class */
    	    background-color: #D8D8D8;
    		color: #555;
    }
    
    td#hover2 { 
    	    background-color: red;
                color: #555;
    }
    
    td#hover2:hover { 
    	    background-color: aqua;
    		color: #555;
    }
    While this adds to the CSS code, it helps to separate the style (eg CSS) from function (JS). Also you can then create a separate CSS page and merge that into your webpage to allow easy updating of your page's style:
    Just save the style info. in a separate *.css file (eg everything in between the <style> tags (excluding the tags themselves) into MyStyle.css) and then load the style page into your html by:
    Code:
    <html>
    <head>
    <style type="text/css"> @import "MyStyle.css" </style>
    </head>
    ...
    </html>
    Also if you do not want a separate / unique style for each cell (but would rather have several cells act the same way) you may want to use a class and css-class selectors instead:
    Code:
    <html><head>
    <style>
    td.hoverCell { /* Change your styles to suit your taste */
        background: white;
        color: black;
    }
    
    td.hoverCell:hover {
      background: aqua;
      color: yellow;
    }
    </style>
    </head><body>
    <table>
      <tr>
        <td class="hoverCell">This will have hover style</td>
        <td>This won't</td>
      </tr>
      <tr>
        <td class="hoverCell">This'll also have style</td>
        <td> No style here!</td>
      </tr>
    </table>
    </body></html>
    For more explanation between CSS ID's and Class's: CSS Tutorial Page

    A few caveats to this second answer:
    1) If you actually want three states (ie (1) default of when the cell is first loaded, (2) style when cell is hovered over, and (3) a distinct style after the cell was hovered over so that (3) is different from (1) ) then you'll have to go with my first answer. In this case, after a cell has been hovered over, it can only toggle between (2) and (3).
    2) IE doesn't like the :hover pseudo-class for elements other than <a>-links. Thus for IE, you'll need to use a JS trick: the :hover suckerfish. Here is the site that goes into how you use this trick: Suckerfish Page
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Great!...thanks for all the insight. I'll try it now.


  •  

    Posting Permissions

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