imágenes que cambian
HiperText
09 de Enero del 2002
¿Cómo se pueden poner imágenes que cambian cuando se pone el puntero sobre ellas? ¿Siempre son links? - Muchas Gracias -
juanan
09 de Enero del 2002
Mira, lo de hacer q las imagenes cambien se puede hacer de varias formas, pero la que me parece mas sencilla es esta:
1. Creas 2 funciones en javascript:
-Funcion "cargar"(para cargar todas las imagenes al principio, para q una vez cargada la página no haya mas esperas).Cargas las imagenes en una matriz, la matriz la llamo MATRIZ
luego creas otra función para cambiar las imagenes, a esta función la llamaras desde la imagen con el evento onmouseover
Te escribo un ejemplo de todo el cófdigo de java script:
var Matriz=new Array()
function cargar(){
Matriz[0]=new Image()
Matriz[0].src="Imagen1.gif"
Matriz[1]=new Image()
Matriz[1].src="Imagen2.gif"
}
function cambiar(i,j){
document.images[i].src=Matriz[j].src
}
El código en HTML seria:
<body onload="cargar()">
<a href="Paginadeenlace.html" onmouseover="cambiar(0,1) onmouseout="cambiar(0,0)"><img src="Imagen1.html"></a>
con esto deberia hacetelo sin ningun problema, la verdad es q yo nunca lo he probado sin q la imagen fuera un enlace...pruebalo
1. Creas 2 funciones en javascript:
-Funcion "cargar"(para cargar todas las imagenes al principio, para q una vez cargada la página no haya mas esperas).Cargas las imagenes en una matriz, la matriz la llamo MATRIZ
luego creas otra función para cambiar las imagenes, a esta función la llamaras desde la imagen con el evento onmouseover
Te escribo un ejemplo de todo el cófdigo de java script:
var Matriz=new Array()
function cargar(){
Matriz[0]=new Image()
Matriz[0].src="Imagen1.gif"
Matriz[1]=new Image()
Matriz[1].src="Imagen2.gif"
}
function cambiar(i,j){
document.images[i].src=Matriz[j].src
}
El código en HTML seria:
<body onload="cargar()">
<a href="Paginadeenlace.html" onmouseover="cambiar(0,1) onmouseout="cambiar(0,0)"><img src="Imagen1.html"></a>
con esto deberia hacetelo sin ningun problema, la verdad es q yo nunca lo he probado sin q la imagen fuera un enlace...pruebalo
juanan
09 de Enero del 2002
Mira, lo de hacer q las imagenes cambien se puede hacer de varias formas, pero la que me parece mas sencilla es esta:
1. Creas 2 funciones en javascript:
-Funcion "cargar"(para cargar todas las imagenes al principio, para q una vez cargada la página no haya mas esperas).Cargas las imagenes en una matriz, la matriz la llamo MATRIZ
luego creas otra función para cambiar las imagenes, a esta función la llamaras desde la imagen con el evento onmouseover
Te escribo un ejemplo de todo el cófdigo de java script:
var Matriz=new Array()
function cargar(){
Matriz[0]=new Image()
Matriz[0].src="Imagen1.gif"
Matriz[1]=new Image()
Matriz[1].src="Imagen2.gif"
}
function cambiar(i,j){
document.images[i].src=Matriz[j].src
}
El código en HTML seria:
<body onload="cargar()">
<a href="Paginadeenlace.html" onmouseover="cambiar(0,1) onmouseout="cambiar(0,0)"><img src="Imagen1.html"></a>
con esto deberia hacetelo sin ningun problema, la verdad es q yo nunca lo he probado sin q la imagen fuera un enlace...pruebalo
1. Creas 2 funciones en javascript:
-Funcion "cargar"(para cargar todas las imagenes al principio, para q una vez cargada la página no haya mas esperas).Cargas las imagenes en una matriz, la matriz la llamo MATRIZ
luego creas otra función para cambiar las imagenes, a esta función la llamaras desde la imagen con el evento onmouseover
Te escribo un ejemplo de todo el cófdigo de java script:
var Matriz=new Array()
function cargar(){
Matriz[0]=new Image()
Matriz[0].src="Imagen1.gif"
Matriz[1]=new Image()
Matriz[1].src="Imagen2.gif"
}
function cambiar(i,j){
document.images[i].src=Matriz[j].src
}
El código en HTML seria:
<body onload="cargar()">
<a href="Paginadeenlace.html" onmouseover="cambiar(0,1) onmouseout="cambiar(0,0)"><img src="Imagen1.html"></a>
con esto deberia hacetelo sin ningun problema, la verdad es q yo nunca lo he probado sin q la imagen fuera un enlace...pruebalo
HiperText
09 de Enero del 2002
Muchas gracias por ayudarme, juanan.
Wolverine
09 de Enero del 2002
Hola
Para hacer eso, debes crear una funcion entre las etiquetas < head > y < /head >.
La funcion es la siguiente
<script language="javascript">
function cambia(imagen,ruta)
{
document.images[imagen].src=ruta
}
</script>
los parametros son:
imagen, es el nombre de la imagen
ruta, es la ruta de la imagen
luego para llamar a esa funcion, debes escribir
<img name="foto" src="primera_imagen" onmouseover="cambia('foto','ruta_de_imagen_que_aparece_al_poner_el_cursor_sobre_la_primera')" onmouseout="cambia('foto','ruta_de_la_primera_imagen')">
Asi, estaras haciendo lo siguiente, al poner el cursor sobre (onmouseover) la primera imagen, esta se cambiara por la segunda, luego si quitas el cursor de la imagen (onmouseout), veras que esta vuelve a la normalidad.
No es necesario que sea un enlace, ya que los parametros los pasas dependiendo de la posicion del mouse, e incluso puedes tener 3 imagenes distintas, solo escribeme para decirte como hacerlo.
Para hacer eso, debes crear una funcion entre las etiquetas < head > y < /head >.
La funcion es la siguiente
<script language="javascript">
function cambia(imagen,ruta)
{
document.images[imagen].src=ruta
}
</script>
los parametros son:
imagen, es el nombre de la imagen
ruta, es la ruta de la imagen
luego para llamar a esa funcion, debes escribir
<img name="foto" src="primera_imagen" onmouseover="cambia('foto','ruta_de_imagen_que_aparece_al_poner_el_cursor_sobre_la_primera')" onmouseout="cambia('foto','ruta_de_la_primera_imagen')">
Asi, estaras haciendo lo siguiente, al poner el cursor sobre (onmouseover) la primera imagen, esta se cambiara por la segunda, luego si quitas el cursor de la imagen (onmouseout), veras que esta vuelve a la normalidad.
No es necesario que sea un enlace, ya que los parametros los pasas dependiendo de la posicion del mouse, e incluso puedes tener 3 imagenes distintas, solo escribeme para decirte como hacerlo.
HiperText
09 de Enero del 2002
Tengo que añadir que son imágenes que cambian por otras distintas, no la misma.