imágenes de sustitución en dreamweaver

[SuperPinwi]

hola amigos,

me planteaba cómo se realiza este efecto:
tengo una tabla de 2 filas y 5 columnas. En la fila de abajo he incluido imágenes de sustitución, tal que al pasar el ratón por encima de ellas, cambie la imagen que se encuentra en ese lugar. Bien, lo que quería conseguir, era que también cambiara la imagen que se encuentra en la misma columna pero en la fila superior.

alguna sugerencia?

gracias y feliz fin de semana!!!

[pabloasis]

Mira hasta donde se, creo que con DW no se puede hacer, es un poco probre la opcion que ofrece dw, por ahi deberias usar otro programa como flash o swish.
saludos

[SuperPinwi]

mmmm vaya por diox jejeje pensaba q no sería muy difícil modificarlo mediante HTML la verdad
gracias de todos modos!

[JavierB]

Hola SuperPinwi

Si te animas a meterle mano al código, muevo tu mensaje al foro de JavaScript y, si tengo tiempo y no se me adelanta alguien , te preparo un ejemplo.

Saludos,

[yournightmare86]

Yo para eso uso el Fireworks... pero en Dreamweaver lo puedes hacer mediante comportamientos y líneas de tiempo. Te explico un ejemplo.
1.-Creas una nueva capa, le pones el fondo negro y escribes lo que quieras en blanco.
2.-Luego vas a Ventana->Líneas de tiempo y te aparecerá un panel como el de flash. Vas a la derecha de donde pone Líneas de tiempo y pinchas en el menú de opciones(con la capa seleccionada) y seleccionas Añadir objeto.
3.-Pinchas en el último fotograma clave y lo arrastras hasta ponerlo en el fotograma 2, de forma que solo te quede el primer y ultimo fotograma clave.
4.- Seleccionas el primer fotograma clave, vas al panel "Propiedades" y donde pone "Vis" elige "Visible". Luego seleccionas el segundo fotograma clave, vuelves a Propiedades y en "Vis" eliges "Hidden" para que permanezca oculto.
Espero que hasta aquí me hayas seguido...
Ahora creas una nueva capa con una imagen por ejemplo dentro. Seleccionas la imagen y vas a Ventana->Comportamientos, pinchas sobre el "+" y eliges Linea de tiempo->Ir a un fotograma en la linea de tiempo. Entonces seleccionas el número del fotograma al que le pusiste visible y das a aceptar. Tendrás debajo el evento creado y deberás elegir "onMouseover". Para que cuando quites el ratón se vaya... debes volver a seleccionar la imagen, ir de nuevo a comportamientos y elegir esta vez el otro fotograma, que le diste "Hidden" solo que esta vez deberás poner "onMouseout".
Espero que te sirva de algo... quizás algo complejo así contado de golpe... si tienes alguna planteala. Saludos.

[carbalga]

Saludos SuperPinwi:

Mira cuando utilizas imagenes por sustitucion (ROLLOVERS INCONEXOS) como lo deseas hacer puedes hacer lo siguiente:

1. Ponle nombre a todas las imagenes ("ids"), esto te permite identificar las imagenes cuando utilizas el comportamiento (behavior) SWAP IMAGES en Dreamweaver.

2. Cuando estas modificando y seleccionando las imagenes de sustitucion puedes escoger mas de una imagen para sustituir a la hora de realizar el rollover.

3. Por eso es importante nombrar las imagenes para que cuando lo hagas identifiques cual imagen va a cambiar.

BUENA SUERTE

[juaniquillo]

es muy facil hacer rollovers en DW. ya existe un comando especial para eso en DW8. Solo escoge la funcion 'Rollover Image':


y ahi especificas:
1- El id o nombre
2- La primera imagen
3- La segunda imagen
4- Si quieres que las imagenes hagan preload (recomendado)
5- El texto Alt
6- El enlace del boton


Cuando le das a OK DW crea el codigo javascript necesario.

[SuperPinwi]

Iniciado por carbalga

Saludos SuperPinwi:

Mira cuando utilizas imagenes por sustitucion (ROLLOVERS INCONEXOS) como lo deseas hacer puedes hacer lo siguiente:

1. Ponle nombre a todas las imagenes ("ids"), esto te permite identificar las imagenes cuando utilizas el comportamiento (behavior) SWAP IMAGES en Dreamweaver.

2. Cuando estas modificando y seleccionando las imagenes de sustitucion puedes escoger mas de una imagen para sustituir a la hora de realizar el rollover.

3. Por eso es importante nombrar las imagenes para que cuando lo hagas identifiques cual imagen va a cambiar.

BUENA SUERTE

esto me podría ser de mucha utilidad jeje pero cómo puedo escoger más de una imagen para sustituir??

Muchas Gracias amigo!!

[SuperPinwi]

Iniciado por yournightmare86

Yo para eso uso el Fireworks... pero en Dreamweaver lo puedes hacer mediante comportamientos y líneas de tiempo. Te explico un ejemplo.
1.-Creas una nueva capa, le pones el fondo negro y escribes lo que quieras en blanco.
2.-Luego vas a Ventana->Líneas de tiempo y te aparecerá un panel como el de flash. Vas a la derecha de donde pone Líneas de tiempo y pinchas en el menú de opciones(con la capa seleccionada) y seleccionas Añadir objeto.
3.-Pinchas en el último fotograma clave y lo arrastras hasta ponerlo en el fotograma 2, de forma que solo te quede el primer y ultimo fotograma clave.
4.- Seleccionas el primer fotograma clave, vas al panel "Propiedades" y donde pone "Vis" elige "Visible". Luego seleccionas el segundo fotograma clave, vuelves a Propiedades y en "Vis" eliges "Hidden" para que permanezca oculto.
Espero que hasta aquí me hayas seguido...
Ahora creas una nueva capa con una imagen por ejemplo dentro. Seleccionas la imagen y vas a Ventana->Comportamientos, pinchas sobre el "+" y eliges Linea de tiempo->Ir a un fotograma en la linea de tiempo. Entonces seleccionas el número del fotograma al que le pusiste visible y das a aceptar. Tendrás debajo el evento creado y deberás elegir "onMouseover". Para que cuando quites el ratón se vaya... debes volver a seleccionar la imagen, ir de nuevo a comportamientos y elegir esta vez el otro fotograma, que le diste "Hidden" solo que esta vez deberás poner "onMouseout".
Espero que te sirva de algo... quizás algo complejo así contado de golpe... si tienes alguna planteala. Saludos.

por lo q veo esta es una forma para conseguir imágenes de sustitución, pero no para que al pasar el ratón por una imagen cambien varias a la vez, q es la duda q yo planteaba.

Muchas gracias de todos modos por las molestias, es interesante ver cómo se realiza sin la ayuda de la opción de menú!!!

[juaniquillo]

Necesitas que cambien varias a la vez? Eso me parece algo confuso, pero bueno. Me no hay ningun comando como tal en DW, pero aqui encontre un script para cambiar dos imagenes con un rollover. Es bastante sencillo pero me imagino que se puede alterar:
http://www.pageresource.com/jscript/jhover2.htm

[SuperPinwi]

Iniciado por juaniquillo

Necesitas que cambien varias a la vez? Eso me parece algo confuso, pero bueno. Me no hay ningun comando como tal en DW, pero aqui encontre un script para cambiar dos imagenes con un rollover. Es bastante sencillo pero me imagino que se puede alterar:
http://www.pageresource.com/jscript/jhover2.htm

sí jeje eso es lo que quiero hacer... es q lo he visto en alguna página web y me gustaba el efecto jeje

muchas gracias por el script compañero, a ver si lo descifro porque nunca he visto javascript!!

se agradece mucho la ayuda

[juaniquillo]

pues que bueno que te sirve. Cualquier problema pasate por el foro de Javascript y ellos te podran mejor que nosotros...
saludos.

[metacortex]

Eso que pides se puede hacer con CSS sin problemas. Mira este tuto:

http://www.csslab.cl/?p=19

Es hasta mejor porque te carga las imágenes bastante rápido y se elimina la dependencia al javascript para tal fin.

Saludos.

[juaniquillo]

Eso no es lo que el busca metacortex. Con CSS solo se puede hacer un rollover por imagen, no sepueden crear multiples rollovers con un OnMouseOver. Ademas, en este ejemplo se trabaja sobre la misma imagen. No funciona si son images separadas