Botonera

Drakerz · #1 (**permalink**) 10/07/2011, 21:23

Hola chicos les traigo una pregunta acerca de una botonera que hice, primero que nada quería aclararles que todavía no tengo mucha experiencia con javascript.

Por ahora la función de la botonera es realizar un onmouseover y un onmouseout cambiando los colores. Ahora lo que quiero realizar es que en ves que sea un color sea una imagen, estuve investigando pero lamentablemente no pude encontrar una posible solución. les dejo el código para ver si me pueden dar una mano

¡Desde ya muchas gracias!

Código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Probando Botonera</title>
<style>
#boton1, #boton2, #boton3, #boton4 {
	background-color:#3A3A3A;
	font-size:15px;
	color:#FAFAFA;
}
</style>



</head>

<body>
<table bgcolor="#00CCCC" name="tabla" align="center">
	<tr>
        <td id="boton1" onmouseover="javascript:this.style.backgroundColor='#FAFAFA';this.style.color='#000000'; " onmouseout="javascript:this.style.backgroundColor='#3A3A3A';this.style.color='#FAFAFA'; ">HOME</td>
          <td id="boton2" onmouseover="javascript:this.style.backgroundColor='#FAFAFA';this.style.color='#000000'; " onmouseout="javascript:this.style.backgroundColor='#3A3A3A';this.style.color='#FAFAFA'; ">PRODUCTOS</td>
          <td id="boton3" onmouseover="javascript:this.style.backgroundColor='#FAFAFA';this.style.color='#000000'; " onmouseout="javascript:this.style.backgroundColor='#3A3A3A';this.style.color='#FAFAFA'; ">SERVICIOS</td>
       <td id="boton4" onmouseover="javascript:this.style.backgroundColor='#FAFAFA';this.style.color='#000000'; " onmouseout="javascript:this.style.backgroundColor='#3A3A3A';this.style.color='#FAFAFA'; ">CONTACTO</td>
    </tr>
</table>
</body>
</html>

ceSharp · #2 (**permalink**) 11/07/2011, 03:48

hola Drakerz,
te paso un ejemplo, a ver si lo puedes adaptar a tu web:
----------------------
<script type="text/javascript">
function mostrarImagen(obj,accion)
{
//accion = 1 --> mostrar imagen || accion = 0 --> quitar imagen
if(accion==1)
{
document.getElementById('td_div').innerHTML="retir a el ratón";
obj.style.backgroundImage = 'url(imgs/tu_imagen.gif)';
}
else
{
document.getElementById('td_div').innerHTML="acerc a el ratón";
obj.style.backgroundImage = '';
}
}
</script>
--------------------------
(html)
<body>

<div>
<table width="300px" border="1">
<tr height="200px">
<td onmouseover="mostrarImagen(this,1);" onmouseout="mostrarImagen(this,0)">
<div id="td_div">
acerca el ratón</div>
</td>
</tr>
</table>
</div>

</body>
-----------------------
si tus imagenes cuelgan directamente donde están tus páginas no haría falta poner Imgs/, sino directamente el nombre de tu imagen, y si cuelgan de otra carpeta, pues el nombre de dicha carpeta.

saludos.