Member Avatar for protos1

Hi

I'm building a site which uses ajax and DHTML heavily to build a frontend. Th frontend has a lot of transparent PNGs for which I use the filter hack to display them in IE6. The issue arises when I'm building a new component in javascript which has transparent PNGs in it. If I build a new div and then position it using javascript the transparent pngs don't display at all !!
Has anyone else come across this ?

Cheers
Colm

  • 2 Contributors
  • 4 Replies
  • 133 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by protos1
Member Avatar for katarey

Please post your code here so that will help to know is somthing wrong in it or not, I have used
transparent PNG and PNG Hack for IE 6 or less
and thats work fine, I don't know but without seen code I can't say whats going wrong...

Member Avatar for protos1

Below is an example of my problem.

The page initially displays a header button and a div containing a price button which is built using two transparent pngs. The trasparent PNGs use the filter hack and it works fine on the initial page load.

Now if you mouseover the header icon the openDiv() function is called which basically uses javascript to construct another button with the same transparent pngs, and it replaces the first button with the second one. The problem is that the transparent pngs which the button is made of don't appear at all in IE6 !! It works fine in IE7 and firefox. Maybe the filter only gets applied when the page is initially loaded, I don't know. I was hoping someone here might know ?

Any ideas ?

Cheers
Colm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<link rel="stylesheet"  href="test_image.css" type="text/css" charset="utf-8"/>
	<script type="text/javascript">
		function openDiv()
		{
			var str = document.getElementById("button_template").innerHTML;
			var totStr = "";
			for (var k=0; k<1 ;k++ )
			{
				totStr += "<div style='display:block;padding-bottom:10px;color:green'>Colm &nbsp;&nbsp;&nbsp;"+str+"</div>";
			}
			document.getElementById('displayArea').innerHTML = totStr;
		}
	</script>
</head>
<body>
<table id="mainMenu">
	<tr>
		<td class="header_icons">
			<span>
				<img  onmouseover="openDiv()" height="57px" width="55px" src="games_active.png"/>
			</span>
		</td>
</tr>
</table>
<div id="displayArea" class="testStyle">
	<div style='display:block;padding-bottom:10px;color:green'>TESTTEST &nbsp;&nbsp;&nbsp;<div class="priceButton"><img src="infopoint.png" alt="play bar1" style="behavior: url(pngbehavior.htc);" class="priceButtonImage" width="20px" height="13px"></img><div class="priceButtonBg"><span class="mediaPrice">$100.00</span></div><img class="priceButtonRight" src="button_play_right.png" style="behavior: url(pngbehavior.htc);" width="6px" height="13px" alt="play bar"></img></div>
</div>

<div id="button_template" style="display:none">
	<div class="priceButton">
		<img id="testOpacity" src="infopoint.png" alt="play bar1" style="behavior: url(pngbehavior.htc);" class="priceButtonImage" width="20px" height="13px"></img><div class="priceButtonBg"><span class="mediaPrice">$10000.00</span></div><img class="priceButtonRight" src="button_play_right.png" style="behavior: url(pngbehavior.htc);" width="6px" height="13px" alt="play bar"></img>
	</div>
</div>
</body>
</html>
Member Avatar for protos1

Hi Rahul,

Thanks for looking at this. I tried your code and it turns out the the htc script I was using for the transparency hack didn't work properly. I subsituted the one you use above and it worked fine.

Thanks for your help !

Cheers
Colm

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.