cambiar el fondo de una celda
Hola,
El efecto que quiero conseguir con javascript es que el fondo de una celda cambie al pasar el raton por encima, tipo como si fuera un boton, que luego al hacer click quedara asi, pero todavia no he llegado a eso, de momento solo quiero el efecto cuando el raton pase por encima. Esto es lo que tengo, espero que me podais ayudar, gracias!!
<script language="javascript" type="text/javascript">
function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its id
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject
Normal1 = new Image();
Normal1.src = '../pictures/menubars.jpg'; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = '../pictures/menubars2.jpg'; /* erste Highlight-Grafik */
function change(objId, mouseevent) {
var menubars = getStyleObject(objId);
if (mouseevent=='on'){
alert('on');
menubars.background-image = Normal1.src;
}
if (mouseevent=='out'){
alert('out');
menubars.background-image = Highlight1.src;
}
}
</script>
y luego en el cuerpo...
<tr onMouseOver="change('mb21', 'on');" onMouseOver="change('mb21', 'out');" class='menubars' id='mb21'>
<td>
<p align="center">
<b>News</b>
</p>
</td>
</tr>
<tr onMouseOver="change('mb22', 'on');" onMouseOver="change('mb22', 'out');" class='menubars' id='mb22'>
<td>
<p align="center">
<b>Media</b>
</p>
</td>
</tr>
<tr onMouseOver="change('mb23' ,'on');" onMouseOver="change('mb23', 'out');" class='menubars' id='mb23'>
<td>
<p align="center">
<b>Links</b>
</p>
</td>
</tr>
<tr onMouseOver="change('mb24' ,'on');" onMouseOver="change('mb24', 'out');" class='menubars' id='mb24'>
<td>
<p align="center">
<b>About us</b>
</p>
</td>
</tr>
El efecto que quiero conseguir con javascript es que el fondo de una celda cambie al pasar el raton por encima, tipo como si fuera un boton, que luego al hacer click quedara asi, pero todavia no he llegado a eso, de momento solo quiero el efecto cuando el raton pase por encima. Esto es lo que tengo, espero que me podais ayudar, gracias!!
<script language="javascript" type="text/javascript">
function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its id
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject
Normal1 = new Image();
Normal1.src = '../pictures/menubars.jpg'; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = '../pictures/menubars2.jpg'; /* erste Highlight-Grafik */
function change(objId, mouseevent) {
var menubars = getStyleObject(objId);
if (mouseevent=='on'){
alert('on');
menubars.background-image = Normal1.src;
}
if (mouseevent=='out'){
alert('out');
menubars.background-image = Highlight1.src;
}
}
</script>
y luego en el cuerpo...
<tr onMouseOver="change('mb21', 'on');" onMouseOver="change('mb21', 'out');" class='menubars' id='mb21'>
<td>
<p align="center">
<b>News</b>
</p>
</td>
</tr>
<tr onMouseOver="change('mb22', 'on');" onMouseOver="change('mb22', 'out');" class='menubars' id='mb22'>
<td>
<p align="center">
<b>Media</b>
</p>
</td>
</tr>
<tr onMouseOver="change('mb23' ,'on');" onMouseOver="change('mb23', 'out');" class='menubars' id='mb23'>
<td>
<p align="center">
<b>Links</b>
</p>
</td>
</tr>
<tr onMouseOver="change('mb24' ,'on');" onMouseOver="change('mb24', 'out');" class='menubars' id='mb24'>
<td>
<p align="center">
<b>About us</b>
</p>
</td>
</tr>
Bueno, ya no os molesteis, despues de horas comiendome la cabeza e investigando y ya lo he solucionado, pero gracias a quien lo haya leido simplemente. Hasta otra!