Changing background picture of a td in IE

**amitabh** · Mar 29, 2004 03:46

Hi

I am using the following code to change the background picture of a "td". It works fine in Mozilla, but refuses to work in IE6.

originally posted by randem

Code:

    <style type="text/css">
 
  TABLE.nav TD {
  background-image: url(/images/brand_normal.gif);
   }
  
   TABLE.nav TD:hover {
  background-image: url(/images/brand_over.gif);
   }
 
  </style>
   
  
   <table class="nav">
   ...
   <td>...</td>
   ...
   </table>

**amitabh** · Mar 30, 2004 01:27

Sorry for pushing this up, but I am still not able to find a script which will work in IE.

**adios** · Mar 30, 2004 09:53

IE only supports :hover for links. Possible workaround: http://www.xs4all.nl/~peterned/csshover.html

**amitabh** · Mar 31, 2004 10:08

I am already using Hover?

**adios** · Mar 31, 2004 10:44

Yes but it's TD:hover. Read the link...

**amitabh** · Apr 1, 2004 00:21

I was able to do it, although not sure if it's really a efficient way. What I did was this use the code posted above for Netscape/Mozilla browsers, and an alternate code for IE. The code that I used for IE is:

Code:

 <td onMouseOver="this.background='/images/product_over.gif'" onMouseOut="this.background='/images/product_normal.gif'">

If someone wants a full implementation, I will gladly post it here.

**adios** · Apr 1, 2004 11:58

amitabh...not sure why you posted here, since you ignored the answer. For anyone interested in a clever 'behavior' patch for IE-non-link-based hovers:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

body {
	behavior: url(csshover.htc);
	background: #000;
}
table.nav td {
	width: 658px;
	height: 443px;
	background: url(http&#58;//www.sitepoint.com/forums/images/buttons/sendpm.gif);
}
table.nav td:hover {
	cursor: crosshair;
	background: url(http&#58;//www.sitepoint.com/forums/images/buttons/buddy.gif);
}

</style>
</head>
<body>
<table class="nav">
   <tbody>
      <tr>
         <td></td>
      </tr>
   </tbody>
</table> 
</body>
</html>

[csshover.htc]

Code:


<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
 *	HOVER - V1.11.040203 - whatever:hover in IE
 *	---------------------------------------------
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	(c) 2004 - Peter Nederlof
 *
 *	Credits  - Arnoud Berendsen 
 *		for finding some really -sick- bugs
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	---------------------------------------------
 */

var currentSheet, doc = window.document;
function parseStylesheets() {
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		var l, rules, imports;
		if(sheet.imports) {
			imports = sheet.imports, l = imports.length;
			for(var i=0; i<l; i++) 
				parseStylesheet(sheet.imports[i]);
		}

		rules = (currentSheet = sheet).rules, l = rules.length;
		for(var j=0; j<l; j++) parseCSSRule(rules[j]);
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):hover/i).test(select)) return;
		
		var newSelect = select.replace(/(\.([a-z0-9_-]+):hover)|(:hover)/g, '.$2onHover');
		var hasClass = (/(\.([a-z0-9_-]+):hover)/g).exec(select);
		var className = (hasClass? hasClass[2]:'') + 'onHover';
		var affected = select.replace(/:hover.*$/g, '');
		var elements = getElementsBySelect(affected);
		
		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className);
	}

function HoverElement(node, className) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	node.attachEvent('onmouseover',
		function() { node.className += ' ' + className; });
	node.attachEvent('onmouseout',
		function() { node.className = 
			node.className.replace((new RegExp('\\s+'+className)),''); });
}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		var tagName = (/^[a-z0-9]+/i).exec(select.toUpperCase()) || '*';
		for(var i=0; i<elements.length; i++) {
			result = elements[i].getElementsByTagName(tagName);
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
					classname[1] + '\\b').exec(node.className)))) continue;
				nodes[nodes.length] = node;
			}
		}	return nodes;
	}
</script>

http://www.xs4all.nl/~peterned/csshover.html

**amitabh** · Apr 1, 2004 20:46

adios, I never ignored your answer, and I did read the link provided by you. Its just that I am starting Javascript, so the code that you have provided would be a little complex for me at this point of time.

What I did was this:

Code:

 <html>
 <head>
 <title>Mouseover Background Change</title>
 <style type="text/css">
 TABLE.navBrands TD {
    background-image: url(/images/brand_normal.gif);
 }
 
 TABLE.navBrands TD:hover {
    background-image: url(/images/brand_over.gif);
 }
 
 </style>
 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 </head>
 
 <body>
 <%
 	'following code is for displaying the mouseover code properly in all browsers
 	Dim strBrandBG, strClass
 	if Instr(1,Request.ServerVariables("HTTP_USER_AGENT"),"MSIE") then
 		'if it is IE, then set the background property and don't use class
 		strBrandBG = "background='/images/brand_normal.gif'"
 		strClass = ""
 	else
 		'if it is others, hopefully they will stick to the CSS instructions
 		'works in Mozilla and Firebird
 		strBrandBG=""
 		strClass = "class='navBrands'"
 	end if
 %>
 
 	<table cellpadding="0" cellspacing="0" border="0" <%=strClass%>>
 		<tr>
 			<td align="center" width='127' height='20' <%=strBrandBG%> onMouseOver="this.background='/images/brand_over.gif'" onMouseOut="this.background='/images/brand_normal.gif'">
 			</td>
 		</tr>
 	</table>
 
 </body>
 </html>

Thanks for the help anyway, adios.

Amitabh

**adios** · Apr 1, 2004 22:20

From WordNet 2.0:

ignore -

1. ignore, disregard, snub, cut -- (refuse to acknowledge; "She cut him dead at the meeting")
2. dismiss, disregard, brush aside, brush off, discount, push aside...

I understand your comments about that code - I had trouble following some of it as well - but, as I noted, there's no way to tell from your response that you even looked at it. It is a clever workaround - imo - but, whatever. Didn't mean to be rude.

OK, I probably did.

Great googleblog, in any event.

TD background is deprecated. Use:

Code:

onmouseout="this.style.background='....

Better yet, you can automate the process using this (scroll to Hold on a minute!).

**amitabh** · Apr 3, 2004 09:31

Sorry if I was not clear in my earlier post, and seemed like I had ignored your answers. Thanks for the correction.
Can you point me to a resource on the web which can list the various properties available through Javascript in IE?

**amitabh** · Apr 3, 2004 09:34

Code:

 onmouseout="this.style.background='....

This doesnot seem to be working in IE6

**adios** · Apr 3, 2004 10:33

...does not seem to be working in IE6

Looks OK. Would need to see more to diagnose anything.

http://msdn.microsoft.com/library/de...ence_entry.asp

**aminprince** · Jan 10, 2008 12:16

Hi Dear,

Please check this code, it is working perfectly in both browsers.. IE 7.0 & Mozilla Firefox.

<td width="129" align="center" onMouseOver="this.style.background='url(images/top_nav_over_bg.jpg)';" onMouseOut="this.style.background='url(images/top_nav_up_bg.jpg)';" ><a href="#" class="link_LBlue_white">About this site</a></td>

Thanks,
Muhammad Amin Ahmad.

User Tag List

Thread: Changing background picture of a td in IE

Thread Tools

Display

Changing background picture in IE

this code is working in both browsers (IE & Firefox)

Bookmarks

Bookmarks

Posting Permissions