1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Cambiar imagen al pasar raton x encima (DreamweaveR)

Tema en 'Programación y Diseño Web' iniciado por krdnha, 18 Jun 2008.

  1. krdnha

    krdnha Nuevo usuario

    Bueno... estoy haciendo una web en dreamweaver en la cual en una tabla he puesto varias miniaturas de imagenes de 100x100 y me gustaria hacer un efectillo en plan que en modo normal esten todas como oscurecidas (apagadas) y que al pasar el raton por encima se pongan al 100% (encendidas) y luego mediante lightbox pos al pinxar se agrandan...

    Alguien sabe si eso se puede hacer? estoy aprendiendo a hacer paginas html, lenguaje java y css pero estoy muy pez. En flash se hacerlo... pero en dream nop :(
     
  2.  
  3. DragonX

    DragonX Guest

    bueno <b>krdnha</b> lo que quieres hacer es factible, y hasta te diria que fácil, pero por lo que he leido muy ducho en el tema HTML no estas, así que lo que te recomedaría es que fueras de a poco y por partes.

    Primero intenta hacer que tus imagenes cambien de color en el rollOver....¿cómo?

    En el Dreamweaver tenes una opción, en el botón de imágenes, que se llama "Imagen de sustitución" esto es lo que va a hacer que tus imagenes cambien al pasar el mouse por arriba.

    Primero colocas tus imagenes OFF y luego una por una las vas seleccionando y aplicandole "imagen de sustitución"

    Probalo y si sale, vemos lo del lightbox :adios:
     
  4. krdnha

    krdnha Nuevo usuario

    muchas thx! la verda esk tengo en mente aprender diseño web este verano... y leyendo y tal he visto q lo mas recomendable es HTML, JS y CSS.. asin lo q mas se usa...

    Voy probar eso... y lo del lightbox creo que se como se hace... :D
     
  5. DragonX

    DragonX Guest

    excelente! si no te llega a salir lo vemos aca. :adios:
     
  6. elQuique

    elQuique Usuario activo

    Si estas aprendiendo hazlo bien, no uses tablas y no uses javascript para cosas que se hacen con CSS/xHTML.
     
  7. alanx85

    alanx85 Nuevo usuario

    <!--quoteo(post=319222:date=Jun 18 2008, 10:19 AM:name=DragonX)--><div class='quotetop'>CITA(DragonX @ Jun 18 2008, 10:19 AM) [snapback]319222[/snapback]</div><div class='quotemain'><!--quotec-->
    bueno <b>krdnha</b> lo que quieres hacer es factible, y hasta te diria que fácil, pero por lo que he leido muy ducho en el tema HTML no estas, así que lo que te recomedaría es que fueras de a poco y por partes.

    Primero intenta hacer que tus imagenes cambien de color en el rollOver....¿cómo?

    En el Dreamweaver tenes una opción, en el botón de imágenes, que se llama "Imagen de sustitución" esto es lo que va a hacer que tus imagenes cambien al pasar el mouse por arriba.

    Primero colocas tus imagenes OFF y luego una por una las vas seleccionando y aplicandole "imagen de sustitución"

    Probalo y si sale, vemos lo del lightbox :adios:
    <!--QuoteEnd--></div><!--QuoteEEnd-->


    HOLAA MUCHISIMAS GRACIAS me sirvio tu ayuda estaba buscando y tenia dreamweaver pero nunca habia visto esa funcion GRACIAS! no suelo registrarme a los foros por una sola ayuda pero valio la pena y te lo agradesco saludos
     
  8. elQuique

    elQuique Usuario activo

    alanx85 bienvenido al foro
     
  9. Hunter-e

    Hunter-e Guest

    <!--quoteo(post=319272:date=Jun 18 2008, 12:40 PM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Jun 18 2008, 12:40 PM) [snapback]319272[/snapback]</div><div class='quotemain'><!--quotec-->
    Si estas aprendiendo hazlo bien, no uses tablas y no uses javascript para cosas que se hacen con CSS/xHTML.
    <!--QuoteEnd--></div><!--QuoteEEnd-->

    elQuique, ¿ como se haria con css y xhtml ?
     
  10. elQuique

    elQuique Usuario activo

    si te refieres al rollover:

    HTML
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><a href="http://www.forocreativo.net">Foro Creativo</a><!--c2--></div><!--ec2-->

    CSS
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    a {
    color: red;
    }

    a:hover {
    color:black;
    }
    <!--c2--></div><!--ec2-->

    Obviamente ahí solo cambie el color pero podría ser tamaño, imagen, etc.

    Ahí se aplica para todos los <a> pero si tienes diferentes grupos con diferentes efectos la agregas un class así:

    HTML
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><a href="http://www.forocreativo.net" class="boton">Foro Creativo</a><!--c2--></div><!--ec2-->

    CSS
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    a.boton {
    color: red;
    }

    a.boton:hover {
    color:black;
    }
    <!--c2--></div><!--ec2-->

    de forma que solo se aplique a unos y otros no.

    En otro caso si cada botón lleva una imagen diferente, puedes indicarle un nombre a cada uno y usas ID así:

    HTML
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><a href="http://www.forocreativo.net" id="foro">Foro Creativo</a><!--c2--></div><!--ec2-->

    CSS
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    a#foro {
    color: red;
    }

    a#foro:hover {
    color:black;
    }
    <!--c2--></div><!--ec2-->

    esta ultima forma para cuando cada objeto tiene su nombre ya que los ID no deben repetirse.

    Para imagen lo usas como fondo, el html queda igual en todos los casos y el CSS queda así:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    a {
    background-image: tuimagenoff.jpg no-repeat;
    width: 120;
    height: 25;
    text-align: -999999px;
    display: block;
    <!--c2--></div><!--ec2-->

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    a:hover {
    background-image: tuimagenon.jpg no-repeat;
    <!--c2--></div><!--ec2-->

    Para Google el texto sigue siendo "Foro Creativo" pero como esta identado -999999 no se ve, y como usas display block igual la zona queda sencible del tamaño indicado, y la imagen se ve porque esta de fondo de esa zona.

    Cuando pasas el mouse encima, el fondo es otra imagen.

    Básicamente es eso, luego hay técnicas para emular pre-cargas aplicables o no según el tipo de imagen (transparent o no), etc :)

    Usen FireFox, con el addon developers para ver las zonas de los html y css, ocultar y mostrar CSS y explorar sus códigos de manera de tener el control y aprender ;)
     
  11. Hunter-e

    Hunter-e Guest

    Bastante claro .. pero una dudita
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->a#foro{}<!--c2--></div><!--ec2-->
    ¿es lo mismo que?
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->#foro a{}<!--c2--></div><!--ec2-->
    Muchas Gracias por explicarlo tan detallado :)

    otra duda ...
    eh visto en algunas paginas que usan una sola imagen para sus iconos, background y su logo, por ejemplo en youtube
    <img src="http://s.ytimg.com/yt/img/master-vfl47921.gif" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />
    <img src="http://s.ytimg.com/yt/img/iyt_iconset-vfl41859.png" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />
    ¿es recomendable?
    ¿como se aplica?
    -------------------------------
    ¿el developer es este?
    <a href="https://addons.mozilla.org/es-ES/firefox/addon/60" target="_blank">https://addons.mozilla.org/es-ES/firefox/addon/60</a>
    -----------------------------------------------------------------

    saludos...
     
  12. elQuique

    elQuique Usuario activo

    Hunter-e en principio #foro a y a#foro es lo mismo, es una cuestión de como heredan las propiedades los objetos hijos a partir de los padres pero no quise complicar la explicación ;)

    Lo de usar un imagen completa es un tema de precarga, y explico....

    Si usas 2 imágenes la primera vez que el user visita el sitio, ya que las imágenes no están cacheadas demora un segundo en realizarse el efecto de mostrar la imagen del hover. Para esto una de las soluciones es usar una imagen que tenga los 2 comportamientos (o varios !!), de esa forma si bien se muestra solo una parte en realidad en cache queda toda la imagen, de forma que al pasar el mouse encima cambia rápidamente y sin retardo :)

    Se aplica mas o menos asi:

    - Imagen de 120 x 25, por tanto haces los dos botones juntos logrando una imagen de 240 x 25

    - Como el botón le indicas que es de width 120 se muestra solo una parte (la primera), como acá:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    a {
    background-image: tuimagenoff.jpg no-repeat;
    width: 120;
    height: 25;
    text-align: -999999px;
    display: block;
    }
    <!--c2--></div><!--ec2-->

    la diferencia con mi ejemplo esta en que cuando haces el hover muestras la misma imagen pero a partir de la posición 120 no del 0, o sea así:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    a:hover {
    background-image: tuimagenoff.jpg no-repeat 120px;
    }
    <!--c2--></div><!--ec2-->

    El addon, si es ese :), te sera de mucha ayuda para ver, y explorar tanto las paginas como el código por detrás y los objetos HTML, CSS y DOM
     
  13. Hunter-e

    Hunter-e Guest

    el developer me va a ser muy útil para comprender mejor..

    nuevamente gracias por las respuestas

    :)
     
  14. knochango

    knochango Nuevo usuario

    Felicidades me parece muy facil haciendolo con css, pero ¿hay alguna forma de lograrlo sin css? ¿no tengo acceso a la hoja de stylos como se puede escribir en HTML?¿es posible hacerlo?

    De antemano muchas gracias por responder.
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·