Zona HTML Zona Java Zona PHP Zona ASP Zona Bases de datos
Inicio > Foros > Javascript > comportamientos imagenes de menu
-Foros de debate

Javascript
Lista de foros | Lista de mensajes de este foro

Privacidad: Recuerde que la información escrita en los foros de programación es 100% pública y que su ip será registrada asociada a su mensaje. Si encuentra un mensaje fuera de lugar, por favor, notifiquelo para su revisión y eliminación.

comportamientos imagenes de menu
Enviado por Tricky22 el día 21 de febrero de 2006

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:\imagenes\atcliente.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

 
Re: comportamientos imagenes de menu
Enviado por Drocher el día 23 de febrero de 2006

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

 


Tienda
Patrocinados
 

Copyright © 1999-2006 Programación en castellano. Todos los derechos reservados.
Formulario de Contacto - Datos legales - Publicidad

Hospedaje web y servidores dedicados linux por Ferca Network