| |||
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? |
| ||||
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 |
| ||||
podes hacerlo tranquilamente con Jacascript.....de esta forma: inserta esto dentro de los tags <head>.....</head> Cita: en el tag <table>......</table> lo siguiente:<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> Cita: en la celda donde no queres que haga este efecto, pone lo siguiente:<table onMouseover="changeto(event, 'lightgreen')" onMouseout="changeback(event, 'white')"> " " </table> Cita: <table onMouseover=.... onMouseout=...> <td id="ignore">Main Menu</td> <td>Eggs</td> <td>Ham</td> </table> |
| ||||
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!!! |
| ||||
Hola, en realidad no es muy complicado, prueba con esto:
Código:
Saludos! <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> |
| |||
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? |
| ||||
Para que te cambie de color puedes hacer esto:
Código:
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.<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> Suerte. |
| |||
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? |
| ||||
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> |
| |||
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 |