Hi
I have been trying to get a fairly simple couple of webpages finished, but have fallen at the final hurdle. I worked my way through the whole .png transparency problem in IE and have a version of that code fix pasted into the second page I am using and it works fine. However, when I try to paste it into the first page (where I already have a javascript function) it breaks the functionality of my existing page (but it does fix the transparency problem).
Here is a sample of the problematic page:
CODE
<html>
<head>
<script type="text/javascript">
var bookopen = 0
function clickbook(iField)
{
if (bookopen == 0)
{
document.image"[addressbook"].src="inside_address_book.png";
bookopen = 1
}
else
{
switch (iField)
{
case 1 : window.location="guadalupe/index.htm";
break;
case 2 : window.location="pablo.htm";
break;
case 3 : window.location="http://www.wedding.net"
break;
default : document.images["addressbook"].src="book_cover.png";
bookopen = 0;
}
}
}
</script>
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
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 link="990000" vlink="990000" alink="990000"bgcolor="FFF4D9">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" height="100%">
<tr>
<td align="center" height="100%"><img name="addressbook" src="address_book_cover.png" WIDTH=520 HEIGHT=325 border="0" usemap="#links"></td>
</tr>
</table>
<map name="links">
<area alt="The adventures of Botella Guadalupe" coords="270,1,520,120" href="javascript:clickbook(1)">
<area alt="Pablo & Muriel" coords="270,121,520,195" href="javascript:clickbook(2)">
<area alt="The wedding" coords="270,196,520,320" href="javascript:clickbook(3)">
<area alt="Close the book" coords ="20,285,80,305" href="javascript:clickbook()">
</map>
</body>
</html>
If I remove the .png transparency fix function correctPNG(), the image map works flawlessly, changing from a picture of the open cover of an address book to the inside of the address book whereupon, if you click one of the image map fields you are taken to another page; otherwise the image is changed to the closed cover of the address book:
CODE
<html>
<head>
<title> Marianne O'Sheeran</title>
<script type="text/javascript">
var bookopen = 0
function clickbook(iField)
{
if (bookopen == 0)
{
document.images["addressbook"].src="inside_address_book.png";
bookopen = 1
}
else
{
switch (iField)
{
case 1 : window.location="guadalupe/index.htm";
break;
case 2 : window.location="pablo.htm";
break;
case 3 : window.location="http://www.wedding.net"
break;
default : document.images["addressbook"].src="book_cover.png";
bookopen = 0;
}
}
}
</script>
</head>
<body link="990000" vlink="990000" alink="990000"bgcolor="FFF4D9">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" height="100%">
<tr>
<td align="center" height="100%"><img name="addressbook" src="marianne_address_book_cover.png" WIDTH=520 HEIGHT=325 border="0" usemap="#links"></td>
</tr>
</table>
<map name="links">
<area alt="The adventures of Botella Guadalupe" coords="270,1,520,120" href="javascript:clickbook(1)">
<area alt="Pablo & Muriel" coords="270,121,520,195" href="javascript:clickbook(2)">
<area alt="The wedding" coords="270,196,520,320" href="javascript:clickbook(3)">
<area alt="Close the book" coords ="20,285,80,305" href="javascript:clickbook()">
</map>
</body>
</html>
Can anyone tell me what is causing the above problem and how I can fix it?
Many thanks in advance
James
4 Apr, 2006 - 12:43 PM
|