Foros del Web » Programando para Internet » Javascript »

duda con dreamweaver mx

Estas en el tema de duda con dreamweaver mx en el foro de Javascript en Foros del Web. Estoy trabajando con dreamweaver y me gustaria hacer el siguiente efecto pero ahor amismo no recuerdo como se hace, tengo una tabla con 20 celdas ...
  #1 (permalink)  
Antiguo 04/07/2006, 10:37
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
duda con dreamweaver mx

Estoy trabajando con dreamweaver y me gustaria hacer el siguiente efecto pero ahor amismo no recuerdo como se hace, tengo una tabla con 20 celdas y en cada celda una palabra, me gustaria que al pasar el raton por dicha celda se iluminara o cambiara de color, o hacer el efecto de undimiento, esto se puede hacer?
  #2 (permalink)  
Antiguo 04/07/2006, 14:13
Avatar de alexmo  
Fecha de Ingreso: mayo-2005
Ubicación: México
Mensajes: 120
Antigüedad: 19 años
Puntos: 0
Para realizar este tipo de efectos se debe hacer uso adecuado de las hojas de estilo CSS 2.0, seguramente encontrarás algo en el foro de CSS aqui mismo.

http://www.forosdelweb.com/f53/

Ten en cuenta que este efecto no es una función de Dreamweaver sino de las hohas de estilo CSS 2.0
__________________
Alexmoz Soluciones Web
Diseño Web | Colombia
¡La calidad es un compromiso!
  #3 (permalink)  
Antiguo 05/07/2006, 09:05
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
gracias ahora mirare de preguntar por el foro, pero es qeu no se como acerlo, y me gustaria poder dar ese efecto de hundimiento en la celda
  #4 (permalink)  
Antiguo 05/07/2006, 09:12
Avatar de vash-stampede-  
Fecha de Ingreso: abril-2006
Ubicación: En el estómago de una Rana
Mensajes: 441
Antigüedad: 18 años
Puntos: 3
No lo puedes hacer con una imagen de sustitución??????
__________________
¡¡¡ Hoy el son de la batalla llegará hasta mi lucharemos hasta vencer o morir, hoy avanzaremos entre toda oscuridad llevando en nuestra sangre el himno de Rohan !!!!!
  #5 (permalink)  
Antiguo 05/07/2006, 09:44
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años
Puntos: 177
podes hacerlo tranquilamente con Jacascript.....de esta forma:

inserta esto dentro de los tags <head>.....</head>
Cita:
<script type="text/javascript">


var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&sou rce.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)| |source.contains(event.toElement)||source.id=="ign ore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget !=source)
source.style.backgroundColor=originalcolor
}

</script>
en el tag <table>......</table> lo siguiente:
Cita:
<table onMouseover="changeto(event, 'lightgreen')" onMouseout="changeback(event, 'white')">
"
"
</table>
en la celda donde no queres que haga este efecto, pone lo siguiente:
Cita:
<table onMouseover=.... onMouseout=...>
<td id="ignore">Main Menu</td>
<td>Eggs</td>
<td>Ham</td>
</table>
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #6 (permalink)  
Antiguo 05/07/2006, 10:03
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
he copiado todo al pie de la letra y no he visto ningun cambio:( sabes porque puede ser
  #7 (permalink)  
Antiguo 05/07/2006, 10:07
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años
Puntos: 177
mmm......ni idea, yo lo utilizo tal cual y me anda de pelos!!!!!........

entra a dynamicdrive y busca el script high light cell y miralo ahi!!!

__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #8 (permalink)  
Antiguo 05/07/2006, 10:21
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
sui te pasase el codigo por mail le podrias hechar un vistazo?
  #9 (permalink)  
Antiguo 05/07/2006, 10:22
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Hola a todos.

Mejor muevo el mensaje al foro de JavaScript, allí estará más cómodo

Movido desde Editores Web.

Saludos,
  #10 (permalink)  
Antiguo 05/07/2006, 10:34
Avatar de pinchoso  
Fecha de Ingreso: octubre-2005
Ubicación: Barcelona
Mensajes: 177
Antigüedad: 18 años, 6 meses
Puntos: 0
Hola, en realidad no es muy complicado, prueba con esto:

Código:
 
<table width="100%" border="0">
  <tr>
    <td style="border:none" onMouseOver="this.style.border='groove'" onMouseOut="this.style.border='none'">celda1</td>
    <td>celda2</td>
    <td>celda3</td>
  </tr>
</table>
Saludos!
__________________

  #11 (permalink)  
Antiguo 05/07/2006, 10:42
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
muchas gracias, no hace exactamente lo que quiero ya que no me mantiene el tamaño de las celdas, ya que las hace mas grandes cuando pasas el raton por encima, pero me servira, y este fallito hay forma de poderlo corregir? hay forma de hacerle que cambie de color?
  #12 (permalink)  
Antiguo 05/07/2006, 10:44
Avatar de pinchoso  
Fecha de Ingreso: octubre-2005
Ubicación: Barcelona
Mensajes: 177
Antigüedad: 18 años, 6 meses
Puntos: 0
Para que te cambie de color puedes hacer esto:

Código:
 
<table width="100%" border="0">
  <tr>
    <td style="background:#FFFFFF" onMouseOver="this.style.background='#FF0000'" onMouseOut="this.style.background='#FFFFFF'">celda1</td>
    <td>celda2</td>
    <td>celda3</td>
  </tr>
</table>
Del mismo modo, lo puedes combinar con distintos estilos para que puedas conseguir el efecto que te parezca más apropiado. Investiga un poco sobre los estilos y veras que puedes hacer muchas cositas.

Suerte.
__________________

  #13 (permalink)  
Antiguo 05/07/2006, 10:51
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
si es lo que hago poquito a poquito indagando mas en el mundo de la creacion de webs jejeje, soy mu novato aunque ya llevo tiempo peleando con esta web, y lo otro que te comente que cambiaba de tamaño la celda, ahi se puede hacer algo?
  #14 (permalink)  
Antiguo 05/07/2006, 10:57
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
se pueden combinar los dos estilos el del bordwe y el fondo?
  #15 (permalink)  
Antiguo 05/07/2006, 10:58
Avatar de pinchoso  
Fecha de Ingreso: octubre-2005
Ubicación: Barcelona
Mensajes: 177
Antigüedad: 18 años, 6 meses
Puntos: 0
En principio si solo cambias el color de fondo de la celda no te ha de cambiar el tamaño de la misma. Te lo esta cambiando cuando aparece i desaparece el estilo "border" ya que al ponerte encima de la celda añade pixels por cada lado, con lo cual la celda "crece".

Con este ejemplo que te paso no hay cambio de tamaño:
Código:
 
 <td style="border:2px solid #FFFFFF;background:#FFFFFF" onMouseOver="this.style.border='2px groove';this.style.background='#F69000'" onMouseOut="this.style.border='2px solid #FFFFFF';this.style.background='#FFFFFF'">celda1</td>
__________________

  #16 (permalink)  
Antiguo 05/07/2006, 11:14
 
Fecha de Ingreso: mayo-2006
Mensajes: 147
Antigüedad: 18 años
Puntos: 0
no no trankilo, ya lo solucione, el problema era el tamañio de mi fuente como estaba ajustada al borde al añadirle el borde la hacia mas grande
muchas gracias funciona a la perfección
  #17 (permalink)  
Antiguo 05/07/2006, 11:27
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años
Puntos: 177
mandamelo RICKY si queres y lo veo!

__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #18 (permalink)  
Antiguo 06/07/2006, 09:44
 
Fecha de Ingreso: enero-2006
Mensajes: 156
Antigüedad: 18 años, 3 meses
Puntos: 0
Tienen algun ejemplo de esto para trabajarlo mejor si tienen por favor evienmelo al correo a [email protected].

Intente hacerlo con el codigo que presentan pero me envia error...

Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:55.