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.

el antes y despues

Tema en 'Programación y Diseño Web' iniciado por rocamora, 12 Nov 2004.

  1. rocamora

    rocamora Nuevo usuario

    Quisiera saber como se puede hacer el efecto de poner una imagen, pero cuando pongas el puntero del raton debajo, salga otra imagen...por ejmp....tengo dos imagenes, una es el original, y la otra es la retocada, pues lo que quiero hacer, es que cuando pongas el puntero debajo de la imagen original, salga, la imagen retocada,(el antes y despues), y cuando lo quites, vuelva la imagen original....lo he visto algunas veces por aqui, ...haber si alguien me dice como hacerlo....un saludo
     
  2.  
  3. photo-erik-shop

    photo-erik-shop Nuevo usuario

    Si no me equivoco lo que tratas de hacer es el efecto RollOver, eso lo puedes hacer con Photoshop en combinacion con ImageReady, mas o menos asi: ( Si me equivoco ruego a los Maestros corregirme)

    1 - Asumiendo que tienes la imagen original y la retocada en layers (capas) diferentes

    2- Escondes la capa con la imagen retocada, presionando sobre el ojito que esta a la par de cada capa.

    3- luego lo editas en ImageReady Presionando Shift+Ctrl+M ( ojo este es lo que ocupo en Photoshop CS ignoro si en la 7 es igual) o bien presionando el ultimo boton que te aparece en la barra de las herramientas. que aparece el logo de photoshop con una flechita apuntando a ImageReady.

    4- Ya en image Ready si el rollover sera de toda la imagen con la herramienta Slice Tool ( Presionando k como acceso directo) haces un corte de toda la imagen completa, si fuera solo una porcion de la imagen igual solo cortas o seccionas la parte de la imagen que quieres haciendo un Cuadro con la herramienta alrededor de ella.

    5- Activa la ventana de Web Content ( Desde el Menu Window >> Opcion Web Content , debe de estar chequedad) , te apareceran los slices o secciones en los que has dividido tu imagen, selecciona el slice que quieres para el efecto con click izquierdo da click derecho sobre el y del submenu selecciona Add RollOver State esto te creara un Estado Over que depende del slice seleccionado.

    6- Selecciona el estado Over del Slice dando click sobre el ahora ve a la ventanita de layers y activa la capa nuevamente y ya tienes tu efecto rollover...

    7- ahora solo guardalo como gif.. y podras ver tu efecto roll over ( o puedes ver el preview de como te va antes de grabarlo con Ctrl+Alt+P)


    Espero te sirva.. y cualquier duda pregunta y con gusto te ayudo

    slds..
     
  4. dennyboy

    dennyboy Guest

    Te muevo el tema y trato de contestarte...

    tienes tus dos imagenes, llamaremos ALFA la original y BETA la retocada, tu código debe versa mas o menos asi...

    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image01','','tufolder/BETA.gif',1)"><img src="tufolder/ALFA.gif" name="Image01" width="X" height="Y" border="0" align="top"></a></div></td>

    En donde href=Nombre de página si haras click y te llevará a algún lado, si no simplemente quítala y borra la etiqueta </a> al final.

    Imagen01 es sólo para enlistar las imagenes, puedes ponerle el numero que quieras.

    Saludos
     
  5. rocamora

    rocamora Nuevo usuario

    Ok. photo-erik...eso era lo que queria, y me ha salido a la primera...lo unico es que para visualizarla, se lanza el navegador, y me conecta con una direccion..file/localhost/c:/documentos and setting...y todo lo demas....osea que a lo mejor a la hora de guardarla no lo he hecho bien, o es que el asunto funciona asi ?...mi idea era guardar el archivo, como una especie de gif animado, pero lo he intentado guardarlo optimizado como..de varias maneras, pero no me sale el efecto, o bien sale una calidad muy mala, o me aparece en una carpeta, con las dos imagenes por separado...pero bueno, lo que queria era esto...asi que gracias erik, a ti tambien dennyboy, pero tu explicacion no la he entendido es por mi culpa seguramente.....un saludo
     
  6. Sarima

    Sarima Usuario activo

    Si utilizas dreamweaver como editor web, necesitas las dos imágenes por separado, vas a insertar> imagen de sustitución y le das la ubicación de la original y la de efecto on mouse (la de sustitución) luego abajo en propiedades le puedes agregar un enlace externo si quieres.
     
  7. rocamora

    rocamora Nuevo usuario

    este trabajo, no es para publicarlo en ninguna pagina web, es para guardarlo en mis imagenes, y verlo cuando me parezca...no se si esto sera posible...un saludo
     
  8. kahlito

    kahlito Nuevo usuario

    Es como te explican photo-erik-shop o dennyboy o incluso puedes hacerlo como te dice Sarima.

    El problema es que revises bien la ruta de la carpeta que te genera los archivos html y tambien el de images. Los html tienen que estar fuera.
     


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


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·