Este ejemplo muestra una imagen, la cual imita el efecto de un botón de tres estados, modificandose al pasar el mouse por encima, al pulsar y al retirar el mouse con la ayuda de javascript
No son necesarias muchas modificaciones en este codigo, lo unico seria: Modificar los colores qu en este caso hemos puesto #ffffff, por los colores que desees. Es importante que las etiquetas style esten dentro del Head y el resto entre body A las imagenes podemos agregarle enlaces como mostramos en uno de los ejemplos.
<head>
<style>
<!--
.mousefuera {
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
border-left: 6px solid #ffffff;
border-right: 10px solid #ffffff;
}
.mouseSobre {
border-top: 6px solid #ffffff;
border-bottom: 14px solid #ffffff;
border-left: 10px solid #ffffff;
border-right: 6px solid #ffffff;
}
.mousepulsado {
border-top: 13px solid #ffffff;
border-bottom: 7px solid #ffffff;
border-left: 10px solid #ffffff;
border-right: 6px solid #ffffff;
}
.MouseArriba {
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
border-left: 10px solid #ffffff;
border-right: 6px solid #ffffff;
}
//-->
</style>
</head>
<!-- modificar # por tu enlace-->
<a href="#"><img src = "/images/mundo.gif"
title = "Imagen(boton)con Enlace"
width = "90"
height = "90"
border = "0"
class = "mousefuera"
onmouseover = "this.className='mouseSobre'"
onmousedown = "this.className='mousepulsado'"
onmouseup = "this.className='MouseArriba'"
onmouseout = "this.className='mousefuera'"></a>
<!-- Segunda imagen-->
<img src = "/images/mundo2.gif"
title = "Imagen ( boton ) sin enlace"
width = "90"
height = "90"
border = "0"
class = "mousefuera"
onmouseover = "this.className='mouseSobre'"
onmousedown = "this.className='mousepulsado'"
onmouseup = "this.className='MouseArriba'"
onmouseout = "this.className='mousefuera'">