Comunidad de diseño web y desarrollo en internet online

Ayuda con botonera y comportamientos.

Citar            
MensajeEscrito el 25 Ene 2008 04:44 pm
Hola, soy Rodolfo, de La Plata, Bs As, y estoy empezando con diseño web, no la tengo muy clara, pero quiero desarrollarme ya que quedé felizmente atrapado en este mundo...

Mi consulta, les cuento:
En una página que estoy haciendo, he hecho un menú de 8 botones, les he asignado el vínculo con una zona interactiva para que al clickear te direccione a su sección en un html distinto y particular para cada uno... hasta ahí bién... ahora lo que quiero hacer es que en cada botón, al pasar por encima con el cursor ( sin hacer click ) me muestre más abajo en una celda, una imagen del producto al que se refiere la sección... no sé como hacerlo.

Con comportamientos, relaciocionado a una capa en la celda donde aparecerá la imagen, con sustitucion de imagen quizás ????

Bueno, espero alguien pueda darme una mano y desde ya les agradezco !!!

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

firefox
Citar            
MensajeEscrito el 25 Ene 2008 08:07 pm
Hola rodolfo, entiendo a la perfección tu consulta, pero no me atrevo a contestarte concretamente ya que no se en que editor estas trabajando, pero te adelanto que lo que quieres lo puedes lograr con el estado "Hover" en tu enlace y la propiedad "visiblity" en un DIV que contendra la imagen que quieres mostrar.

si trabajas en dreamweaver te puedo decir exactamente como hacerlo, o si es otro el editor con el que trabajas, te pongo un codigo para que lo evalues.

Saludos...

Por webmaster_SDT

4 de clabLevel



Genero:Masculino  

México

firefox
Citar            
MensajeEscrito el 25 Ene 2008 08:25 pm
Hola Webmaster_SDT.

Uso Dreamweaver, y la verdad me vendría bién la explicación de cómo lograrlo, muchas gracias !!! y espero la data.

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

firefox
Citar            
MensajeEscrito el 25 Ene 2008 09:21 pm
ok rodolfo, pues ahi va.

he hecho una pequeña demostracion en dreamweaver para hacer esto un poco mas ilustrativo.

1.- lo que hize es lo siguiente, una tablar con dos filas y ocho columnas, en la primer fila los enlaces y en la segunda las imagenes (a falta de imagenes solo he puesto texto, pero solo es ilustrativo, esto lo puedes cambiar por imagenes), las imagenes deben estar dentro de un div, se ve mas o menos asi:



2.- lo primero que debemos hacer es esconder todas las imagenes, eso es poniendo el valor "hidden" en el atributo "visibility" del div, te debe quedar algo asi:

[img=http://img519.imageshack.us/img519/8413/img2tv7.th.jpg]

tu página se deberia ver solo con los enlaces, asi:
[img=http://img519.imageshack.us/img519/4241/img3qk0.th.jpg]

Por webmaster_SDT

4 de clabLevel



Genero:Masculino  

México

firefox
Citar            
MensajeEscrito el 25 Ene 2008 09:53 pm
disculpa, antes presione el boton equivocado, ahora continuo:

3.-Ahora veremos como colocar en el enlace, la propiedad que haze visible la imagen correspondiente, lo primero debes tener activada la ventana "Comportamientos", si no la tienes debes ir a el menú Ventana y seleccionar "comportamientos" entonces seleccionas el texto del enlace y en la ventana comportamientos haces click en el evento "onMouseOver" y en la parte superior de dicha ventana das click en el simbolo de más [+].
[img=http://img123.imageshack.us/img123/3978/img4sl9.th.jpg]

Se abrira un menú y escoges "Cambiar Propiedad" entonces se abrira una ventana que quedara de la siguiente manera.
[img=http://img123.imageshack.us/img123/1859/img5iu4.th.jpg]

4.- Lo anterios hara que al pasar el mouse por el enlace se muestre la imagen, ahora necesitamos hacer que la imagen desaparezca al retirar el mouse, y es similar al anterior paso, solo que ahora usaremos el evento "onMouseOut", haz el procedimiento anterior y solo cambia en la ventana de cambiar propiedad, lo siguiente:

[img=http://img519.imageshack.us/img519/5760/img6cy0.th.jpg]

con esto ya deberia quedar solucionado tu problema, al pasar el mouse por el enlace, aparece la imagen y al quitarlo desaparece, llevo algo de prisa, asi que disculpa si no fui tan claro, cualquier duda, pregunta de nuevo.

Saludos...

Por webmaster_SDT

4 de clabLevel



Genero:Masculino  

México

firefox
Citar            
MensajeEscrito el 26 Ene 2008 11:15 pm
Gracias, muchas gracias... verdaderamente ilustrativo y didáctico, un abrazo ché !!!

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

firefox
Citar            
MensajeEscrito el 27 Ene 2008 07:12 am
Que bien que te ha servido.

Saludos...

Por webmaster_SDT

4 de clabLevel



Genero:Masculino  

México

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.