Hola, el problema que tengoes que quiero hacer una barra de navegacion con 3 estados (normal, mouseover, selected) con la peculiaridad de que tengo imagenes PNG con transparencia
el codigo que tengo hasta el momento me permite solo el roll over con transparencia, solo faltaria agregar el 3 estado
aqui esta la pagina businesscardspronto(dot)com/bcpronto_website/prueba2(dot)html
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.btn {
float: left;
height: 44px;
width: 109px;
left: 50px;
top: 5px;
}
.btn2 {
float: left;
height: 44px;
width: 109px;
left: 171px;
top: 5px;
}
body {
background-color: #003366;
background-image: url(images/bg-body.gif);
background-repeat: repeat-x;
}
#nav {
margin: auto;
height: auto;
width: 800px;
position: relative;
}
.buttons {
margin: auto;
height: auto;
width: 800px;
}
#nav #navbar {
height: 50px;
width: 250px;
position: absolute;
top: 120px;
left: 115px;
}
-->
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and 6.
{
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
var imgAttribs = img.attributes;
for (var j=0; j<imgAttribs.length; j++)
{
var imgAttrib = imgAttribs[j];
if (imgAttrib.nodeName == "align")
{
if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
break
}
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src='" + img.src + "', sizingMethod='scale');\""
strNewHTML += " onmouseover=\"PNGswap('" + img.id + "');\" onmouseout=\"PNGswap('" + img.id +"');\" onmousedown=\"PNGswap('" + img.id +"');\""
strNewHTML += "></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
function PNGswap(myID)
{
var strOver = "_on"
var strOff = "_off"
var oSpan = document.getElementById(myID)
var currentAlphaImg = oSpan.filters(0).src
if (currentAlphaImg.indexOf(strOver) != -1)
oSpan.filters(0).src = currentAlphaImg.replace(strOver,strOff)
else
oSpan.filters(0).src = currentAlphaImg.replace(strOff,strOver)
}
</script>
<![endif]-->
<script language="JavaScript" type="text/javascript">
<!--
function imgSwap(oImg)
{
var strOver = "_on" // image to be used with mouse over
var strOff = "_off" // normal image
var strImg = oImg.src
if (strImg.indexOf(strOver) != -1)
oImg.src = strImg.replace(strOver,strOff)
else
oImg.src = strImg.replace(strOff,strOver)
}
//-->
</script>
</head>
<body style="background-color: #0000FF">
<div class="btns" id="nav">
<div id="navbar">
<div class="btn"><a href="#"><img src="images/bttn01_off.png" name="btn" width="109" height="44" border="0" id="btn" onmouseover="imgSwap(this)" onmouseout="imgSwap(this)" /></a></div>
<div class="btn2"><a href="#"><img src="images/bttn01_off.png" name="btn2" width="109" height="44" border="0" id="btn2" onmouseover="imgSwap(this)" onmouseout="imgSwap(this)" /></a></div>
</div>
<img src="images/upperbanner.png" name="banner" width="780" height="178" id="banner" /></div>
<!--barra roja-->
<div class="buttons"><img src="images/barraestado.png" name="barra" width="790" height="80" id="barra" /></div>
</body>
</html>