Imagen de fondo con evento
Monica
06 de Junio del 2005
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
Jorge
06 de Junio del 2005
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.
Monica
06 de Junio del 2005
Muchas gracias!!!
Voy a intentarlo! ;-D
Voy a intentarlo! ;-D
Monica
06 de Junio del 2005
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.
Monica
06 de Junio del 2005
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!
Jorge
06 de Junio del 2005
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")
Monica
06 de Junio del 2005
Mmmm... Ok, probaré qué tal así.
Muchas gracias por la ayuda.
Saludos!
Muchas gracias por la ayuda.
Saludos!
Drocher
06 de Junio del 2005
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
Monica
06 de Junio del 2005
Gracias, pero creo que eso no me vale para lo que quiero hacer. Lo que quiero es cambiar una imagen que está de fondo en la celda de una tabla.
De todas formas, muchas gracias por la ayuda.
De todas formas, muchas gracias por la ayuda.