Comunidad de diseño web y desarrollo en internet online

Cambio de color de celda cuando el mouse pase por encima

Citar            
MensajeEscrito el 01 May 2006 08:21 am
hola como estan todos?
alguien me puede ayudar con el codigo para que una celda de una tabla (<td>) cambie de color cuando el mouse pase por encima?, pero que no quede para todas las tablas sino para una especifica.

gracias

Por chechopoker

91 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 May 2006 02:43 pm
css

Código :

.celda{
   background-color:#cccccc;
}
.celda:hover{
   background-color:#666666;
}


en xhtml pones esto:

Código :

    <td class="celda">&nbsp;</td>


saludos

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino   Team Cristalab

Claber de baja indefinida

firefox
Citar            
MensajeEscrito el 01 May 2006 06:46 pm
Esto solo funcionara en navegadores actuales (no IE6). Si quieres que funcione con IE6- deberas usar Javascript y algo de DOM.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 02 May 2006 03:40 pm
a mi me sirvio esto, lo pones en la celda respectiva

Código :

<td bgcolor="#99cc66" onmouseover='this.style.background="#228800"' onmouseout='this.style.background="#99cc66"' > <p><a  href="html/contactenos.php">Contactenos</a></p></td>

intente hacerlo con css pero, como dice Neo_jp no resulta

Por Max

Claber

267 de clabLevel



Genero:Masculino  

Lima - Peru

firefox
Citar            
MensajeEscrito el 03 May 2006 03:51 am
el código de Max, de aquí arriba sí funciona, pero
1) es código de más
2) no aprovecha las ventajas de css (separar estilo de presentación)

como dice neo, con js y un poco de dom conseguirás lograr el efecto, además no es tan difícil

suerte

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 04 May 2006 07:06 am
Hola a ver prueba con esto.. lo llegue a probar en IE y FF y funciona bien.

Código :

<table id="myTable" width="400" border="0" cellspacing="4" cellpadding="4">
  <tr>
    <td>fdh</td>
    <td>dfhdfh</td>
    <td>fhd</td>
  </tr>
</table>

/* Poner antes de cerrar la etiqueta body */ 
<script type="text/javascript">
// idTabla debe ser reemplazado por el Id que hayas asignado a la tabla...
var tabla = document.getElementById("idTabla");
var tds = tabla.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++){
   tds[i].onmouseover = function(){
      // Se puede poner un color RGB, tambien una imagen pero debe reemplazarse por background = "urldeimagen.jpg".
      this.bgColor = "yellow"; 
   }
   tds[i].onmouseout = function(){
      this.bgColor = ""; 
   }
}
</script>


Salu2

Por eporroa

664 de clabLevel



Genero:Masculino  

Lima - Peru

firefox
Citar            
MensajeEscrito el 04 May 2006 04:18 pm
este el javascript

function normal(obj)
{
obj.style.background='#F4F4F4';
obj.style.cursor='arrow';
}
function cambio(obj)
{
obj.style.backgroundImage='url(images/bg_noticias.gif)';
obj.style.cursor='hand';
}

y en tu td pones algo como esto

<td height="30" onmouseover="cambio(this)" onmouseout="normal(this)">


y listo pero en este caso yo remplazo backgroun por una imagen y al sacar el mouse regresa a su colo normal.

espero te siva de algo...

Por AlejoPD

13 de clabLevel



 

firefox

 

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