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.
CODIGO
/* Codigo ofrecido por Tutores.org */
<head>
<style>
<!--
.mousefuera{
border-top:10pxsolid#ffffff;
border-bottom:10pxsolid#ffffff;
border-left:6pxsolid#ffffff;
border-right:10pxsolid#ffffff;
}
.mouseSobre{
border-top:6pxsolid#ffffff;
border-bottom:14pxsolid#ffffff;
border-left:10pxsolid#ffffff;
border-right:6pxsolid#ffffff;
}
.mousepulsado{
border-top:13pxsolid#ffffff;
border-bottom:7pxsolid#ffffff;
border-left:10pxsolid#ffffff;
border-right:6pxsolid#ffffff;
}
.MouseArriba{
border-top:10pxsolid#ffffff;
border-bottom:10pxsolid#ffffff;
border-left:10pxsolid#ffffff;
border-right:6pxsolid#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'">
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Imagen - Boton 3 estados interactivo" href="http://www.tutores.org/codigo/677/" target="_blank">Imagen - Boton 3 estados interactivo</a>
<!-- Final enlace Tutores.org -->