Imagen de fondo con evento
Hola a todos
驴Se puede hacer que una imagen de fondo de una celda en una tabla tenga asociado un evento.?
Quiero que cuando se ponga el rat贸n sobre esa celda se muestre otra foto.
Se hace igual que con una imagen normal? O por ser imagen de fondo es diferente?
Gracias
驴Se puede hacer que una imagen de fondo de una celda en una tabla tenga asociado un evento.?
Quiero que cuando se ponga el rat贸n sobre esa celda se muestre otra foto.
Se hace igual que con una imagen normal? O por ser imagen de fondo es diferente?
Gracias
La imagen en si no tiene eventos asociados. Pero si los tiene la celda que tiene esa imagen como fondo.
El decir el onMouseOver que tienes que tratar no es el de la imagen (que no puedes) sino el de la celda.
Lo que tienes es que cambiar los valores de la propiedad background de la celda en el gestor del evento onMouseOver de esta.
El decir el onMouseOver que tienes que tratar no es el de la imagen (que no puedes) sino el de la celda.
Lo que tienes es que cambiar los valores de la propiedad background de la celda en el gestor del evento onMouseOver de esta.
mmmm....
Estoy intentando cambiar el fondo como me comentas, pero no me funciona.
Lo que hago es:
<td width="100%" height="68" background="./imagenes/rosas.jpg" onMouseOver =
"cambiarImagen(this, 1)", onMouseOut = "cambiarImagen(this, 2)">
<p align="center"><b><font size="5">FLORES</font></b></td>
y he definido la funci贸n como
function cambiarImagen(obj, val){
if (val == 1){ obj.background="./imagenes/tulipanes.jpg"
}
else{
obj.background="./imagenes/rosas.jpg"
}
}
Pero as铆 no me funciona.... 驴Qu茅 hago mal? C贸mo se cambia el fondo de la celda?
Gracias por la ayuda.
Estoy intentando cambiar el fondo como me comentas, pero no me funciona.
Lo que hago es:
<td width="100%" height="68" background="./imagenes/rosas.jpg" onMouseOver =
"cambiarImagen(this, 1)", onMouseOut = "cambiarImagen(this, 2)">
<p align="center"><b><font size="5">FLORES</font></b></td>
y he definido la funci贸n como
function cambiarImagen(obj, val){
if (val == 1){ obj.background="./imagenes/tulipanes.jpg"
}
else{
obj.background="./imagenes/rosas.jpg"
}
}
Pero as铆 no me funciona.... 驴Qu茅 hago mal? C贸mo se cambia el fondo de la celda?
Gracias por la ayuda.
Est谩 bien. El problema es que lo estaba abriendo en mozilla Firefox y no vale. Solo me funciona para IExplorer.
驴Se puede hacer de alguna manera para que valga para cualquier navegador?
Gracias!
驴Se puede hacer de alguna manera para que valga para cualquier navegador?
Gracias!
Me suena que el atributo background ha caido en desgracia en las ultimas versiones de html.
Si quieres que el codigo funciones en todos los navegadores modernos me imagino que tendras que hacerlo a traves de estilos que es como recomienda el w3c.
Ya sabes, background-image: url("./imagenes/tulipanes.jpg")
Si quieres que el codigo funciones en todos los navegadores modernos me imagino que tendras que hacerlo a traves de estilos que es como recomienda el w3c.
Ya sabes, background-image: url("./imagenes/tulipanes.jpg")
Hola Monica, puedes tambi茅n probar con el siguiente c贸digo (muy 煤til por ejemplo para similar un bot贸n) que te permite alternar entre 2 imagenes:
<SCRIPT LANGUAGE="JavaScript">
/*Funci贸n que permite buscar la imagen ON de los iconos*/
function OnImage(name) {
if (document.images) {
fullname = eval(name + "2");
document[name].src = fullname.src;
}
}
/*Funci贸n que permite buscar la imagen OFF de los iconos*/
function OffImage(name) {
if (document.images) {
fullname = eval(name);
if (fullname.complete) {
document[name].src = fullname.src;
}
}
}
/*Despues en el HEAD haces la siguiente declaraci贸n en la que defines las imagenes:*/
if (document.images) {
ayuda = new Image();
ayuda.src = "../htdocs/imagenes/IcoAyuda.gif"; //Imagen1
ayuda2 = new Image();
ayuda2.src = "../htdocs/imagenes/IcoAyudaON.gif"; //Imagen 2
}
Y ya en el cuerpo de tu c贸digo pones por ejemplo:
<A href="#"
ONMOUSEOVER="OnImage('ayuda');"
ONCLICK=""
ONMOUSEOUT="OffImage('ayuda');">
<IMG name="ayuda" src="../htdocs/imagenes/IcoAyuda.gif" border="0" alt="Ayuda" >
</A>
Espero te pueda ser 煤til, si tienes cualquier duda ponte en contacto conmigo.
Un saludo
Denis
<SCRIPT LANGUAGE="JavaScript">
/*Funci贸n que permite buscar la imagen ON de los iconos*/
function OnImage(name) {
if (document.images) {
fullname = eval(name + "2");
document[name].src = fullname.src;
}
}
/*Funci贸n que permite buscar la imagen OFF de los iconos*/
function OffImage(name) {
if (document.images) {
fullname = eval(name);
if (fullname.complete) {
document[name].src = fullname.src;
}
}
}
/*Despues en el HEAD haces la siguiente declaraci贸n en la que defines las imagenes:*/
if (document.images) {
ayuda = new Image();
ayuda.src = "../htdocs/imagenes/IcoAyuda.gif"; //Imagen1
ayuda2 = new Image();
ayuda2.src = "../htdocs/imagenes/IcoAyudaON.gif"; //Imagen 2
}
Y ya en el cuerpo de tu c贸digo pones por ejemplo:
<A href="#"
ONMOUSEOVER="OnImage('ayuda');"
ONCLICK=""
ONMOUSEOUT="OffImage('ayuda');">
<IMG name="ayuda" src="../htdocs/imagenes/IcoAyuda.gif" border="0" alt="Ayuda" >
</A>
Espero te pueda ser 煤til, si tienes cualquier duda ponte en contacto conmigo.
Un saludo
Denis