Hola, tengo un problema. Estoy haciendo una barra con 3 botones. necesito que al pasar el mouse por encima cambie de la imagen , y cuando se haga click quede otra imagen.
Cuando hago click en el botón 1 este queda con otra imagen y deshabilita la opción onmouseout, cuando hago click en el botón 2 no se vuelve a habilitar onmouseout para el boton1.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function C1(b,img)
{
document.getElementById(b).src=(img)
}
function C2(a1,a2,a3)
{
document.getElementById('b1').src=('Imagenes/1.Inicio'+(a1)+'.jpg')
document.getElementById('b2').src=('Imagenes/2.QuienesSomos'+(a2)+'.jpg')
document.getElementById('b3').src=('Imagenes/3.NuestrosServicios'+(a3)+'.jpg')
if (a1=='2'){document.getElementById('b1').onmouseout =null}
if (a2=='2'){document.getElementById('b2').onmouseout =null}
if (a3=='2'){document.getElementById('b3').onmouseout =null}
}
function C3()
{
document.getElementById('b1').src=('Imagenes/1.Inicio1.jpg')
document.getElementById('b2').src=('Imagenes/2.QuienesSomos1.jpg')
document.getElementById('b3').src=('Imagenes/3.NuestrosServicios1.jpg')
}
</script>
</head>
<body onload="C3()">
<table width="200" border="0">
<tr>
<td ><a href="#"><img id="b1" border="0" width="122" height="39" onmouseover="C1('b1','Imagenes/1.Inicio2.jpg')") onclick="C2('2','1','1');" onmouseout="C1('b1','Imagenes/1.Inicio1.jpg')" /></a></td>
<td><a href="#" ><img id="b2" border="0" width="262" height="40" onmouseover="C1('b2','Imagenes/2.QuienesSomos2.jpg')" onmouseout="C1('b2','Imagenes/2.QuienesSomos1.jpg')" onclick="C2('1','2','1')"/></a></td>
<td><a href="#" ><img id="b3" border="0" width="234" height="40" onmouseover="C1('b3','Imagenes/3.NuestrosServicios2.jpg')" onmouseout="C1('b3','Imagenes/3.NuestrosServicios1.jpg')" onclick="C2('1','1','2')"/></a></td>
</tr>
</table>
</body>
</html>