Salut à tous.
J'ai le même soucis à la différence prêt que j'arrive à superposé l'image transparente au dessus de mon .PNG mais j'ai le symbole image introuvable en haut à gauche qui apparait.
Les maps fonctionne très bien, mais il y a juste ce petit hic.
Voici le code javascript :
// JavaScript Document
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
var strGif = "transparentpixel.gif"
var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"
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
if (img.useMap)
{
strAddMap = "<img style=\"position:absolute; margin-left:970px; display:; left:-" + img.width + "px;"
+ "height:" + img.height + "px;width:" + img.width +"\" "
+ "src=\"" + strGif + "\" usemap=\"" + img.useMap
+ "\" border=\"" + img.border + "\">"
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:" + strFilter
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
if (img.useMap) strNewHTML += strAddMap
img.outerHTML = strNewHTML
i = i-1
}
}
for(i=0; i < document.forms.length; i++) findImgInputs(document.forms(i))
}
function findImgInputs(oParent)
{
var oChildren = oParent.children
if (oChildren)
{
for (var i=0; i < oChildren.length; i++ )
{
var oChild = oChildren(i)
if ((oChild.type == 'image') && (oChild.src))
{
var origSrc = oChild.src
oChild.src = strGif
oChild.style.filter = strFilter + "(src='" + origSrc + "')"
}
findImgInputs(oChild)
}
}
}
Code MAP :
<!--[if lt IE 7.]><script defer type="text/javascript" src="js/pngfix.js"></script><![endif]--><link href="styles.css" rel="stylesheet" type="text/css" /><img src="images/haut.png" width="970" height="191" border="0" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="279,155,439,185" href="?page=presentation" /><area shape="rect" coords="446,155,606,186" href="?page=chambres" /><area shape="rect" coords="614,153,776,185" href="?page=contact" /><area shape="rect" coords="782,155,942,185" href="default.asp" />
Qui aurait une solution ?
Merci d'avance...
Kcin