SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Rollover and Setting Background Color of Cell

    I have a table that looks like this:

    Code:
    <table id="rollover" class="rollover" width="400" border="0" cellpadding="4" align="center">
    	<tbody>
    	<tr>
    		<td colspan="4" width="408"><strong>Comparison</strong><br>
    			<div align="center">
    				<strong><img src="/D90/ZD90FARI0200_400.jpg" name="Image1" width="400" height="300" id="Image1"></strong></div>
    		</td>
    	</tr>
    	<tr id="inforow">
    		<td id="cell1" width="96" height="90" onmouseover="swapImage('Image1','','/D90/ZD90FARI0200_400.jpg',1);hilite(this)">
    			<div align="center">1st cell</div>
    		</td>
    		<td id="cell2" width="96" onmouseover="swapImage('Image1','','/D90/ZD90FARI0200_VNX_400.jpg',1);hilite(this)">
    			<div align="center">2nd Cell</div>
    		</td>
    		<td id="cell3" width="96" onmouseover="swapImage('Image1','','/D90/ZD90FARI0200_NX2_400.jpg',1);hilite(this)">
    			<div align="center">3rd Cell</div>
    		</td>
    		<td id="cell3" width="96" onmouseover="swapImage('Image1','','/D90/ZD90FARI0200_ACRb_400.jpg',1);hilite(this)">
    			<div align="center">4th cell</div>
    		</td>
    	</tr>
    	</tbody>
    </table>
    What I'm doing is when I mouse over any of the cells in the table with ID "inforow" the image changes in the row above that. What I'd also like to do is have the background of the cell being moused over to change until another mouse over event is fired. This is the javascript function I've created:

    Code:
    function hilite(id) {
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	if (!document.getElementById("inforow")) return false;
    	var row = document.getElementById("inforow");
    	var cells = row.getElementsByTagName("td");
    	for ( var i = 0; i < cells.length; i++) {
    		cells[i].onmouseover = function() {
    			cells[i].style.backgroundcolor = "#eee";
    		}
    	}
    	id.className += 'hilite';
    	id.style.backgroundcolor = "#e2e2e2";
    }
    In all honestly though, my js knowledge is lacking and I'm of course running into problems with the mouseovers and the change of color. (And I know that I should be separating the design from the code, but I would really like to understand this before I tackle another problem.)

    Would someone point out what I'm missing here, please?

    Thanks!

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should be backgroundColor instead of backgroundcolor.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And you've also got 2 td cells with the same id of 'cell3'.

    As far as the highlighting on mouseover goes, and the resetting of the previous one to default b/g colour when the next one is mouseovered, you can do this in a simpler kind of way. Rather than iterating through a nodelist to apply event handlers and styling, a simple global variable can do most of the work. With no changes at all to your html (each function call has a reference to 'this' as the arguement passed), and with the following default colour styling for the cells:

    Code:
    td { background-color: #e2e2e2; color: #000000; }
    try the following (tested and working):

    Code:
    var last;
    
    function hilite(current) {
      if (last) last.style.backgroundColor = "#e2e2e2"; // reset to default colour
      current.style.backgroundColor = "#eeeeee";        // set highlight colour
      last = current;				    // store it for next time
    }


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
  •