Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 4 de 4

Tema: enlace con imagen cambiante para menu

Vista Híbrida

Mensaje Anterior Mensaje Anterior   Próximo Mensaje Próximo Mensaje
  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    09 jun, 11
    Mensajes
    9
    Poder de Reputación
    0

    enlace con imagen cambiante para menu

    Hola a todos! Antes que nada quiero agradecer a Jorgens por tomarse el tiempo para que otros podamos aprender y de una manera tan divertida y amena. Se nota que soy nueva en esto? jeje En fin... mi pregunta:
    Estoy haciendo ya mi primera página (yei!) y en el menu horizontal quisiera hacer que al poner el ratón encima y al hacer click cambiara de color. Primero les comento que cada enlace lo hice con una imagen. Digamos que en vez de poner una lista con los titulos hice puros divs con una imagen en cada uno para que se pareciera al menu que tiene CCTW con pestañas. Esto ya lo logré Después cree la misma imagen de la pestaña pero con otro color y lo que pensaba hacer era rutearla para que cuando se pusiera el ratón encima cambiara a esta otra pero no consigo lograrlo. He buscado en todos lados en esta página y en otras (aunque Jorgens se enoje ) pero las explicaciones que vienen no me han quedado para nada claras. Ojalá alguien me pudiera ayudar. Si necesitan que ponga el codigo diganme por favor. Gracias de antemano y saludos!

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de ricky
    Fecha de Ingreso
    17 jul, 10
    Ubicación
    Pais: Colombia!!!
    Mensajes
    391
    Poder de Reputación
    17
    #menu a {background-image:url(imagen1);
    }
    #menu a:hover {background-image:url(imagen2);
    }

  3. #3
    Recien Llegado! Merodeador
    Fecha de Ingreso
    09 jun, 11
    Mensajes
    9
    Poder de Reputación
    0
    Gracias ricky pero trate asi y no me funcionó. La manera en la que conseguí que funcionara fue la siguiente y espero le sirva a alguien:

    1.- Hice la misma imagen con elcambio de color como queria que se viera (la primera es el nombre del boton y la segunda es el nombre + la palabra rojo -porque asi queria que se viera-). Ambas del mismo tamaño.
    2.- En la plantilla puse el siguiente codigo en el head:
    <SCRIPT>
    function cambiar1 () {document.images["menu1"].src = "../objetos/menuiniciorojo.png";}
    function volver1 () {menu1.src = "../objetos/menuiniciorojo.png";}
    function cambiar2 () {document.images["menu2"].src = "../objetos/menuproductosrojo.png";}
    function volver2 () {menu2.src = "../objetos/menuproductos.png";}
    function cambiar3 () {document.images["menu3"].src = "../objetos/menuprestamorojo.png";}
    function volver3 () {menu3.src = "../objetos/menuprestamo.png";}
    function cambiar4 () {document.images["menu4"].src = "../objetos/menupreguntasrojo.png";}
    function volver4 () {menu4.src = "../objetos/menupreguntas.png"
    function cambiar5 () {document.images["menu5"].src = "../objetos/menucontactorojo.png";}
    function volver5 () {menu5.src = "../objetos/menucontacto.png";}
    </SCRIPT>

    3.- dentro de body puse lo siguiente:
    <div id="menuinicio"><a href="../inicio/inicio.html" onMouseOver="cambiar1();" onMouseOut="volver1();"><img src="../objetos/menuiniciorojo.png" width="160" height="39" alt="Inicio" name="menu1"></a></div>
    <div id="menuproductos"><a href="../productos/productos.html" onMouseOver="cambiar2();" onMouseOut="volver2();"><img src="../objetos/menuproductos.png" width="160" height="39" alt="Nuestros Productos" name="menu2"></a></div>
    <div id="menuprestamo"><a href="../prestamo/prestamo.html" onMouseOver="cambiar3();" onMouseOut="volver3();"><img src="../objetos/menuprestamo.png" width="160" height="39" alt="Quiero un Préstamo" name="menu3"></a></div>
    <div id="menupreguntas"><a href="../preguntas/preguntas.html" onMouseOver="cambiar4();" onMouseOut="volver4();"><img src="../objetos/menupreguntas.png" width="160" height="39" alt="Preguntas Frecuentes" name="menu4"></a></div>
    <div id="menucontacto"><a href="../contacto/contacto.html" onMouseOver="cambiar5();" onMouseOut="volver5();"><img src="../objetos/menucontacto.png" width="160" height="39" alt="Contáctanos" name="menu5"></a></div>

    4.- en la hoja de estilos puse esto:
    #menuinicio {float:left; width:160px;}
    #menuproductos {float:left; width:160px;}
    #menuprestamo {float:left; width:160px;}
    #menupreguntas {float:left; width:160px;}
    #menucontacto {float:left; width:160px;}

    y la capa que engloba a todos los botones está con un width de 800px (la suma de todos los width).

    Un poco lioso pero funcionó je

    Saludos desde Mexico!

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de ricky
    Fecha de Ingreso
    17 jul, 10
    Ubicación
    Pais: Colombia!!!
    Mensajes
    391
    Poder de Reputación
    17
    Puede que te haya funcionado pero la forma correcta es como te dije, poniendo la segunda imagen en la accion hover, seguro te falto poner display u otro codigo, en fin, saludos.

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •