Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

PNG's, IE, transparency and JS

Status
Not open for further replies.
CliffLandin

CliffLandin

Programmer
Nov 14, 2004
81
US
I am trying to use a .png as a navigation bar. I am using 'usemap' to create the links and am using JS to lose the grey/blue background created by IE when using transparent PNGs. Here in lies the crux of the problem. The IE/png fix somehow is killing the usemap. It all works fine in any other browser and the PNG fix works great. But now you can't navigate anywhere.

Here is an example of the code:
Code: 
<head>
<title></title>

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
</head>
<body><div class='mainBody' align='left'><img src="/imgs/nav.png" width="250" height="500" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<area shape="rect" coords="20,29,190,68" alt="home" href="[URL unfurl="true"]http://www.mlctunes.com/"[/URL] />
<area shape="rect" coords="20,95,190,135" alt="gallery" href="[URL unfurl="true"]http://www.mlctunes.com/gallery/"[/URL] />
<area shape="rect" coords="20,150,190,187" alt="music" href="[URL unfurl="true"]http://www.mlctunes.com/music/"[/URL] />
<area shape="rect" coords="20,212,190,251" alt="lyrics" href="[URL unfurl="true"]http://www.mlctunes.com/lyrics"[/URL] />
<area shape="rect" coords="20,269,190,308" alt="about" href="[URL unfurl="true"]http://www.mlctunes.com/about"[/URL] />
<area shape="rect" coords="20,329,190,368" alt="contact" href="[URL unfurl="true"]http://www.mlctunes.com/contact"[/URL] />
<area shape="rect" coords="0,426,249,465" alt="MLCtunes" href="[URL unfurl="true"]http://www.mlctunes.com/"[/URL] />
</map>
</div>

Thanks in advance for any help that you can give me.

When in doubt, go flat out!

 
Sort by date Sort by votes
The script replaces your image with a span. As a span can't have a usemap attribute, the usemap is ignored.

A solution would be: if the image has a usemap attribute, parse the map for the coordinates and attach an onclick event to the [tt]<span>[/tt] which passes the clicked coordinates to a lookup function which follows the link as appropriate.

Oh, the reason it works in other browsers is that's hidden by a conditional comment. Only IE 5.5 and above parse the script. But other browsers usually handle Alpha transparency on PNGs without needing supporting script.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
You can fix it by removing half of that bloat and adding a single 1x1 pixel transparent GIF (which I've called "trans.gif"):

Code: 
function correctPNG() {
	for(var i=0; i<document.images.length; i++) {
		var img = document.images[i];
		img.style.cssText = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.src + '\', sizingMethod=\'scale\');';
		img.src = 'trans.gif';
	}
}

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
BillyRayPreachersSon said:
You can fix it by removing half of that bloat and adding a single 1x1 pixel transparent GIF
Click to expand...
If I understand your code correctly, it simply replaces the image with a completely transparent gif.

When the OP refers to 'Transparent PNG', I don't believe the PNG is completely transparent - I think it's a regular image with sections of (Alpha) transparency.


Here's a very good writeup of the issue and solution. Take a look in IE - it clearly demonstrates the issue that IE has with transparency on PNGs.

Whilst IE doesn't handle transparency on PNG images, the AlphaImageLoader filter does, which is replacing the image with a filtered span works.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
If I understand your code correctly, it simply replaces the image with a completely transparent gif.
Click to expand...

That is what part of it does... but the bit before that loads the PNG specified as part of the filter, with all alpha transparency intact. The trans.gif is only needed to stop the "X" placeholder from showing in IE when no image src is specified.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Oh, I see!

You have a 1 pixel gif as the image (so it's clickable as an image map) and you load the original image as a filter...

It's all so clear now - very nice!

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
Okay, the theory is clear to me, but the implimentation is not. I have placed the shortened code in the <head> of my document, replacing trans.gif with /imgs/trans.gif. Oh, I did create a 1x1 transparent gif and placed it in the /imgs folder. So all seems as it should, however, in IE the navigation area is still that lovely blue/grey. Here is the link to the page;
Thanks

When in doubt, go flat out!

 
Upvote 0 Downvote
I am obviously not very well versed in javascript, php is more my thing. I understand the logic, it is the syntax I have issue with. That said, I have put the script in like this

Code: 
<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() {
    for(var i=0; i<document.images.length; i++) {
        var img = document.images[i];
        img.style.cssText = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.src + '\', sizingMethod=\'scale\');';
        img.src = '/imgs/trans.gif';
    }
}
</script>
<![endif]--

I don't know about calling functions in jscript. In php I would just call it by putting correctPNG(); somewhere in between the If statement.

When in doubt, go flat out!

 
Upvote 0 Downvote
Ok, I have tried and tried and can't seem to get it to work. Once again, this has reinforced my hate of MS and IE. I know that I am an idiot, but I don't know JS and can't seem to make it work. This is really frustrating and I don't have much hair left to pull out.

When in doubt, go flat out!

 
Upvote 0 Downvote
All you need to do is replace just the correctPNG function you had with the one I gave you. Nothing more, nothing less.

Do not cut out any of the surrounding code.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Okay, I'm pretty sure that I have it exactly as you showed it. Once again, I must be doing something wrong, because with the code as you have it, it show the nav panel with the background, then it disappears. I'm sure it has something to do with the order in which these things are being rendered. Does it matter that the png is in an include that comes after the javascript?

When in doubt, go flat out!

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
921
xwb
xwb
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
1K
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
739
rogerte
rogerte
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
443
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top