comportamientos imagenes de menu
Hola!!q tal?!Vereis... estoy haciendo un menú horizontal. Cada opcion del menú no es texto sino una imagen.
...<td> <a href="#" onClick="ShowHide ('Layer1','','show')"><img src="C:imagenesatcliente.jpg" name="A"></a></td> ....
El caso es que quiero que cuando el ratón este por encima o fuera de una opción se muestre diferente en cada caso. Con texto lo se hacer pero con imágenes no. Que tipo de comportamientos puedo poner?y como?
¿TendrÃa que crearme varias copias(ligeramente diferentes) de una misma imagen para simular un comportamiento??si es asÃ, como se hace??
Espero haberme explicado bien, muchas gracias!un saludo,
Tricky
...<td> <a href="#" onClick="ShowHide ('Layer1','','show')"><img src="C:imagenesatcliente.jpg" name="A"></a></td> ....
El caso es que quiero que cuando el ratón este por encima o fuera de una opción se muestre diferente en cada caso. Con texto lo se hacer pero con imágenes no. Que tipo de comportamientos puedo poner?y como?
¿TendrÃa que crearme varias copias(ligeramente diferentes) de una misma imagen para simular un comportamiento??si es asÃ, como se hace??
Espero haberme explicado bien, muchas gracias!un saludo,
Tricky
Buenas tardes, en mi caso, para simular iconos que se pulsan al situar el cursor encima uso lo siguiente:
Funciones, en un .js por ejemplo:
/*Función que permite buscar la imagen ON de los iconos*/
function OnImage(name) {
if (document.images) {
fullname = eval(name + \"2\");
document[name].src = fullname.src;
}
}
/*Función que permite buscar la imagen OFF de los iconos*/
function OffImage(name) {
if (document.images) {
fullname = eval(name);
if (fullname.complete)
{
document[name].src = fullname.src;
}
}
}
Despues dentro de mi página en el HEAD
<SCRIPT LANGUAGE=\"JavaScript\">
if (document.images)
{
ayuda = new Image();
ayuda.src = \"../htdocs/imagenes/IcoAyuda.gif\";
ayuda2 = new Image();
ayuda2.src = \"../htdocs/imagenes/IcoAyudaON.gif\";
salir = new Image();
salir.src = \"../htdocs/imagenes/IcoSalir.gif\";
salir2 = new Image();
salir2.src = \"../htdocs/imagenes/IcoSalirON.gif\";
consulta = new Image();
consulta.src = \"../htdocs/imagenes/IcoConsulta.gif\";
consulta2 = new Image();
consulta2.src = \"../htdocs/imagenes/IcoConsultaON.gif\";
}
</SCRIPT>
Y por fin en el body, para cada una de las imagenes:
<A href=\"#\"
ONMOUSEOVER=\"OnImage(\\'ayuda\\');\"
ONCLICK=\"javascript:openWindow...\"
ONMOUSEOUT=\"OffImage(\\'ayuda\\');\">
<IMG name=\"ayuda\" src=\"../htdocs/imagenes/IcoAyuda.gif\" border=\"0\" alt=\"Ayuda\" >
</A>
Seguro que existe una manera más limpiar de hacerlo, pero me funciona perfectamente. Espero te sea útil
Un saludo
Funciones, en un .js por ejemplo:
/*Función que permite buscar la imagen ON de los iconos*/
function OnImage(name) {
if (document.images) {
fullname = eval(name + \"2\");
document[name].src = fullname.src;
}
}
/*Función que permite buscar la imagen OFF de los iconos*/
function OffImage(name) {
if (document.images) {
fullname = eval(name);
if (fullname.complete)
{
document[name].src = fullname.src;
}
}
}
Despues dentro de mi página en el HEAD
<SCRIPT LANGUAGE=\"JavaScript\">
if (document.images)
{
ayuda = new Image();
ayuda.src = \"../htdocs/imagenes/IcoAyuda.gif\";
ayuda2 = new Image();
ayuda2.src = \"../htdocs/imagenes/IcoAyudaON.gif\";
salir = new Image();
salir.src = \"../htdocs/imagenes/IcoSalir.gif\";
salir2 = new Image();
salir2.src = \"../htdocs/imagenes/IcoSalirON.gif\";
consulta = new Image();
consulta.src = \"../htdocs/imagenes/IcoConsulta.gif\";
consulta2 = new Image();
consulta2.src = \"../htdocs/imagenes/IcoConsultaON.gif\";
}
</SCRIPT>
Y por fin en el body, para cada una de las imagenes:
<A href=\"#\"
ONMOUSEOVER=\"OnImage(\\'ayuda\\');\"
ONCLICK=\"javascript:openWindow...\"
ONMOUSEOUT=\"OffImage(\\'ayuda\\');\">
<IMG name=\"ayuda\" src=\"../htdocs/imagenes/IcoAyuda.gif\" border=\"0\" alt=\"Ayuda\" >
</A>
Seguro que existe una manera más limpiar de hacerlo, pero me funciona perfectamente. Espero te sea útil
Un saludo