SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Hobart, Australia
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmouseout problem in IE

    I have a page with the following code:
    HTML Code:
    <?php
    include ('functions.inc.php');
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="http://intranet/styles/cbc/css/screen.css" />
    <script type="text/javascript" src="http://intranet/styles/cbc/javascript/functions.js"></script>
    <script type="text/javascript" src="http://intranet/styles/cbc/javascript/prototype.js"></script>
    <script type="text/javascript" src="./javascript/script.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Information Services / IT Service Status</title>
    </head>
    <body>
    <h1>Information Services / IT Service Status</h1>
    <p>For your convenience, this page will be kept as up to date as possible. Below is a listing of the various services available on the Council network and an indication of their current status. If you have any questions regarding a particular service, you can contact the Helpdesk via <a href="mailto:Help Desk?subject=Service Status">email</a> or by phone on the extension 784.</p>
    <table class="data">
    <thead>
    <tr>
    <th style="width: 300px;">Service</th>
    <th style="width: 110px;">Status</th>
    <th>Notes</th>
    </tr>
    </thead>
    <tbody>
    <?php
    $query = 'SELECT * FROM service;';
    $listServices = mysql_query ($query, $status_connection);
    
    while ($service = mysql_fetch_array ($listServices)) {
    	echo "<tr id=\"row" . $service['id'] . "\" onmouseover=\"this.style.background='#eeeeee';this.style.cursor='pointer'\" onmouseout=\"this.style.background='';\" onclick=\"javascript:showRow('" . $service['id'] . "');\">\r\n";
    	echo ('<td>' . $service['title'] . '</td>' . "\r\n");
    	switch ($service['status']) {
    		case 0:
    			echo ('<td><img alt="Offline" src="images/status_red.gif" />&nbsp; Offline</td>' . "\r\n");
    			break;
    		case 1:
    			echo ('<td><img alt="Repairing" src="images/status_orange.gif" />&nbsp; Repairing</td>' . "\r\n");
    			break;
    		case 2:
    			echo ('<td><img alt="Investigating" src="images/status_orange.gif" />&nbsp; Investigating</td>' . "\r\n");
    			break;
    		case 3:
    			echo ('<td><img alt="Offline" src="images/status_green.gif" />&nbsp; Operational</td>' . "\r\n");
    			break;
    	}
    	echo ('<td>' . $service['notes'] . '</td>' . "\r\n");
    	echo ('</tr>' . "\r\n");
    }
    ?>
    </tbody>
    </table>
    </body>
    </html>
    A JavaScript function runs at page load to zebra colour the table rows:
    Code:
    function initTables()
    {
    	var tables = document.getElementsByTagName("table");
    	
    	for (var i = 0; i < tables.length; i++)
    	{
    		if(tables[i].className.match("data"))
    		{
    			//var tbody = tables[i].getElementsByTagName("tbody")[0];
    			var trs = tables[i].getElementsByTagName("tr");
    			
    			for (var j = 1; j < trs.length; j += 2)
    			{
    				if (trs[j].className == "")
    				{
    					trs[j].className = "alt";
    				}
    				else if(!trs[j].className.match("alt"))
    				{
    					trs[j].className += " alt";
    				}
    			}
    		}
    	}
    	
    	return true;
    };
    On the following line I attempt to do a simple mouse over effect:
    Code:
    echo "<tr id=\"row" . $service['id'] . "\"
    onmouseover=\"this.style.background='#eeeeee';this.style.cursor='pointer'\"
    onmouseout=\"this.style.background='';\"
    onclick=\"javascript:showRow('" . $service['id'] . "');\">\r\n";
    In FF and Opera this changes the background colour of the row back to what it was before the mouse over but in IE it resets it to blank (or white).

    Now I can see why this problem is happening, IE appears to be doing what it is told, however FF and Opera behave differently and I just was wondering why IE is the only one that does it differently? I want to to revert back to the colour it was previously, so it doesn't remove the zebra row colouring. How do I overcome this in IE?

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexClifford View Post
    Code:
    onmouseover=\"this.style.background='#eeeeee';this.style.cursor='pointer'\"
    onmouseout=\"this.style.background='';\"
    Try using backgroundColor instead.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Hobart, Australia
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much Logic Ali that worked a charm. Do you know why IE behaves differently when I just use style.background? It doesn't really matter, it's just I've never come across this problem before when doing mouse overs.

    Thanks again.


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
  •