SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    India
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing background picture in IE

    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>
    Last edited by amitabh; Mar 29, 2004 at 12:44.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    India
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for pushing this up, but I am still not able to find a script which will work in IE.

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE only supports :hover for links. Possible workaround: http://www.xs4all.nl/~peterned/csshover.html
    ::: certified wild guess :::

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    India
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am already using Hover?

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes but it's TD:hover. Read the link...
    ::: certified wild guess :::

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    India
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ::: certified wild guess :::

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    India
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!).
    ::: certified wild guess :::

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    India
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    India
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     onmouseout="this.style.background='....
    This doesnot seem to be working in IE6

  12. #12
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...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
    ::: certified wild guess :::

  13. #13
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.


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
  •