P.- Me gustaría saber cómo puedo hacer para que además de que mis botones cambien de imagen cuando paso por encima con el ratón (de imagen A a Imagen B), también cambie a una tercera imagen diferente cuando hago ‘clic’ con el ratón sobre el botón, y que permanezca así hasta que pinche con el ratón en otra opción diferente del menú, momento en el que el enlace anteriormente abierto debe volver a la imagen A.
R.- Con este código:
Código PHP:
<html>
<head>
<script>
//Script original de KarlanKas para forosdelweb.com
var imagen=new Array;
imagen[0]=new Image;
imagen[0].no=new Image();
imagen[0].pincha=new Image();
imagen[0].si=new Image();
imagen[1]=new Image;
imagen[1].no=new Image();
imagen[1].pincha=new Image();
imagen[1].si=new Image();
imagen[2]=new Image;
imagen[2].no=new Image();
imagen[2].pincha=new Image();
imagen[2].si=new Image();
imagenAnterior=new Image;
var numeroAnterior=0
//--------- PON AQUÍ LA RUTA DE LAS IMÁGENES (NO HAN DE SER ABSOLUTAS)---------------
imagen[0].no.src="no.gif";
imagen[0].pincha.src="hazclick.gif";
imagen[0].si.src="si.gif";
imagen[1].no.src="no1.gif";
imagen[1].pincha.src="hazclick1.gif";
imagen[1].si.src="si1.gif";
imagen[2].no.src="no2.gif";
imagen[2].pincha.src="hazclick2.gif";
imagen[2].si.src="si2.gif";
//------------------------------------------------------------------------------------
function cliqueo(esto,numero){
imagenAnterior.src=imagen[numeroAnterior].no.src;
imagenAnterior=esto;
numeroAnterior=numero
esto.src=(esto.src!=imagen[numero].si.src)?imagen[numero].si.src:imagen[numero].no.src;
}
</script>
</head>
<body>
<a onfocus="this.blur()" href=#>
<img
border=0
src="no.gif"
onclick="cliqueo(this,0)"
onmouseover="if (this.src==imagen[0].no.src){this.src=imagen[0].pincha.src}"
onmouseout="if (this.src==imagen[0].pincha.src){this.src=imagen[0].no.src}"
>
</a>
<a onfocus="this.blur()" href=#>
<img border=0
src="no1.gif"
onclick="cliqueo(this,1)"
onmouseover="if (this.src==imagen[1].no.src){this.src=imagen[1].pincha.src}"
onmouseout="if (this.src==imagen[1].pincha.src){this.src=imagen[1].no.src}"
>
</a>
<a onfocus="this.blur()" href=#>
<img border=0
src="no2.gif"
onclick="cliqueo(this,2)"
onmouseover="if (this.src==imagen[2].no.src){this.src=imagen[2].pincha.src}"
onmouseout="if (this.src==imagen[2].pincha.src){this.src=imagen[2].no.src}"
>
</a>
</body>
</html>