Imágenes
¡Hola! Soy Débora, y aunque estoy aprendiendo mucho sobre diseño web, el html lo tengo más o menos dominado, así como las css, pero en cuanto a javascript, lenguaje que estoy aprendiendo ahora no lo entiendo muy bien, y aun hay cosas básicas que no consigo entender y me gustaría me ayudase usted a hacerlo. Mi problema es que quiero aprender el código más sencillo y corto para que en cuando sitúe el cursor encima de una imagen, salga otra, ¿es el efecto onmouseover en imágenes verdad?, y ya se que es muy básico pero no consigo entenderlo y no quiero sencillamente copiar el código de otra página para hacer la mía, porque quiero aprender y así no se hace, ¿no crees? Bueno, perdona por enrollarme tanto con la pregunta con lo fácil que es, sorry por eso. También agradecería que me sugiriera algún tutorial para aprender javascript, que sea en español, y fácil de entender, pero que a la vez sea completo. Muchísimas gracias por leer mi pregunta, si la lee, y a ver si puede ayudarme por favor.
1 respuesta
Respuesta de bruckner
1
Antes que nada, no me llames de usted... no tengo tantos años. Por supuesto que puedo ayudarte, o al menos intentarlo. Ahí va.
El onMouseover es lo que se llama un manejador de eventos. Los manejadores de eventos son enlaces entre el código HTML y programas en Javascript, para que éstos se ejecuten cuando ocurran "cosas" sobre los elementos de HTML que tengan los manejadores definidos. En particular, onMouseover es el manejador que detecta cuándo el puntero del ratón entra en el elemento HTML que lo lleva.
Para poder hacer una imagen "rollover" (así se llama lo que quieres) necesitas definir este manejador en un enlace que contenga a la imagen que quieres que cambie. No lo definas sobre la misma imagen, porque Netscape 4.x no lo admitirá (conforme vayas aprendiendo te darás cuenta de que lo realmente difícil de esto son las incompatibilidades entre navegadores):
<a href="" onMouseover="cambiaImagen('imagen1','luz_encendida.gif')">
<img name="imagen1" src="luz_apagada.gif" border=0></a>
Lo que va dentro de onMouseover es una llamada a una función de Javascript, que hay que escribir dentro de un tag SCRIPT, preferentemente en la cabecera del HTML (dentro de HEAD). La función puede ser así (hay más formas de hacerlo):
function cambiaImagen(nombreImagen,urlImagen) {
if (document.images) {
document.images[nombreImagen].src=urlImagen;
}
}
Ya está. Te explico el código paso a paso:
-La primera línea declara la función cambiaImagen, con dos parámetros, el nombre de la imagen que vas a cambiar (lo que salga dentro de NAME en el tag IMG correspondiente) y el URL (dirección) del fichero de imagen nuevo (puede ser relativo o absoluto, no importa).
-La segunda línea es una sentencia condicional: se ejecuta lo que sigue entre llaves { } si lo que hay entre paréntesis es cierto. En este caso, entre los paréntesis hay una referencia al objeto que contiene la lista de las imágenes de la página actual. Si este objeto existe (lo que es de esperar, a menos que la página se vea con un Internet Explorer 3...), se hace lo que sigue en las llaves.
-La tercera línea busca, dentro del documento (document), la lista de imágenes (images). De ahí, saca la que tiene por NAME el valor de nombreImagen, y a esa imagen le saca su fuente (SRC), y le asigna (con el '=') el valor de urlImagen. Míralo despacio... hasta que lo entiendas. En Javascript, hay objetos que tienen propiedades, que a su vez pueden ser objetos con propiedades... y se accede a ellos con la sintaxis "objeto.propiedad". Una lista tiene elementos, que se sacan así: "lista[elemento]". Por lo general, se accede a los elementos por su número de orden en la lista (empezando desde 0), pero en la lista images podemos usar el nombre.
En la siguiente respuesta lo pondremos todo junto...
El onMouseover es lo que se llama un manejador de eventos. Los manejadores de eventos son enlaces entre el código HTML y programas en Javascript, para que éstos se ejecuten cuando ocurran "cosas" sobre los elementos de HTML que tengan los manejadores definidos. En particular, onMouseover es el manejador que detecta cuándo el puntero del ratón entra en el elemento HTML que lo lleva.
Para poder hacer una imagen "rollover" (así se llama lo que quieres) necesitas definir este manejador en un enlace que contenga a la imagen que quieres que cambie. No lo definas sobre la misma imagen, porque Netscape 4.x no lo admitirá (conforme vayas aprendiendo te darás cuenta de que lo realmente difícil de esto son las incompatibilidades entre navegadores):
<a href="" onMouseover="cambiaImagen('imagen1','luz_encendida.gif')">
<img name="imagen1" src="luz_apagada.gif" border=0></a>
Lo que va dentro de onMouseover es una llamada a una función de Javascript, que hay que escribir dentro de un tag SCRIPT, preferentemente en la cabecera del HTML (dentro de HEAD). La función puede ser así (hay más formas de hacerlo):
function cambiaImagen(nombreImagen,urlImagen) {
if (document.images) {
document.images[nombreImagen].src=urlImagen;
}
}
Ya está. Te explico el código paso a paso:
-La primera línea declara la función cambiaImagen, con dos parámetros, el nombre de la imagen que vas a cambiar (lo que salga dentro de NAME en el tag IMG correspondiente) y el URL (dirección) del fichero de imagen nuevo (puede ser relativo o absoluto, no importa).
-La segunda línea es una sentencia condicional: se ejecuta lo que sigue entre llaves { } si lo que hay entre paréntesis es cierto. En este caso, entre los paréntesis hay una referencia al objeto que contiene la lista de las imágenes de la página actual. Si este objeto existe (lo que es de esperar, a menos que la página se vea con un Internet Explorer 3...), se hace lo que sigue en las llaves.
-La tercera línea busca, dentro del documento (document), la lista de imágenes (images). De ahí, saca la que tiene por NAME el valor de nombreImagen, y a esa imagen le saca su fuente (SRC), y le asigna (con el '=') el valor de urlImagen. Míralo despacio... hasta que lo entiendas. En Javascript, hay objetos que tienen propiedades, que a su vez pueden ser objetos con propiedades... y se accede a ellos con la sintaxis "objeto.propiedad". Una lista tiene elementos, que se sacan así: "lista[elemento]". Por lo general, se accede a los elementos por su número de orden en la lista (empezando desde 0), pero en la lista images podemos usar el nombre.
En la siguiente respuesta lo pondremos todo junto...
Ahora, lo pones todo junto y ya tienes lo que querías:
<html>
<head>
<title>Prueba de rollover</title>
<script language="Javascript"><!-- Oculta a los navegadores antiguos
img1=new Image();
img1.src='luz_encendida.gif';
function cambiaImagen(nombreImagen,urlImagen) {
if (document.images) {
document.images[nombreImagen].src=urlImagen;
}
}
// --></script>
</head>
<body>
<a href="" onMouseover="cambiaImagen('imagen1','luz_encendida.gif')"
onMouseout="cambiaImagen('imagen1','luz_apagada.gif')">
<img name="imagen1" src="luz_apagada.gif" border=0></a>
</body>
</html>
He puesto dos cosas más:
-Las dos primeras líneas del script definen una imagen y la cargan en memoria (sin mostrarla). Cargando la imagen que vas a mostrar cuando pases con el puntero del ratón por encima de tu imagen "especial", te evitas que el navegador la pida al servidor en ese momento. Ya estará ahí, y el cambio será casi inmediato.
-Le he puesto un manejador de eventos más al enlace: onMouseout. Detecta cuándo sale el puntero del ratón del elemento que lo lleva. Es lógico... así suelen funcionar los rollovers.
No hay tutoriales "sencillos, completos y en español", pero de momento puedes echar un vistazo a http://rinconprog.metropoli2000.net. En la sección Cursos, hay un tutorial de Javascript que, sin ser completo, te servirá para iniciarte. Después de eso lo mejor que puedes hacer es acudir a los manuales de Javascript de Netscape (en http://developer.netscape.com/docs/manuals/index.html?content=javascript.html), que son lo mejor que hay en la red (aunque en inglés). Y aun así... Pero con eso tienes para unos meses, no te preocupes.
Espero haberte sido útil. No dudes en preguntarme cualquier duda que te surja, por favor. Y que te vaya bien...
Bruckner
<html>
<head>
<title>Prueba de rollover</title>
<script language="Javascript"><!-- Oculta a los navegadores antiguos
img1=new Image();
img1.src='luz_encendida.gif';
function cambiaImagen(nombreImagen,urlImagen) {
if (document.images) {
document.images[nombreImagen].src=urlImagen;
}
}
// --></script>
</head>
<body>
<a href="" onMouseover="cambiaImagen('imagen1','luz_encendida.gif')"
onMouseout="cambiaImagen('imagen1','luz_apagada.gif')">
<img name="imagen1" src="luz_apagada.gif" border=0></a>
</body>
</html>
He puesto dos cosas más:
-Las dos primeras líneas del script definen una imagen y la cargan en memoria (sin mostrarla). Cargando la imagen que vas a mostrar cuando pases con el puntero del ratón por encima de tu imagen "especial", te evitas que el navegador la pida al servidor en ese momento. Ya estará ahí, y el cambio será casi inmediato.
-Le he puesto un manejador de eventos más al enlace: onMouseout. Detecta cuándo sale el puntero del ratón del elemento que lo lleva. Es lógico... así suelen funcionar los rollovers.
No hay tutoriales "sencillos, completos y en español", pero de momento puedes echar un vistazo a http://rinconprog.metropoli2000.net. En la sección Cursos, hay un tutorial de Javascript que, sin ser completo, te servirá para iniciarte. Después de eso lo mejor que puedes hacer es acudir a los manuales de Javascript de Netscape (en http://developer.netscape.com/docs/manuals/index.html?content=javascript.html), que son lo mejor que hay en la red (aunque en inglés). Y aun así... Pero con eso tienes para unos meses, no te preocupes.
Espero haberte sido útil. No dudes en preguntarme cualquier duda que te surja, por favor. Y que te vaya bien...
Bruckner
PRimero, gracias por contestar! Y por la molestia de haberme explicado todo lo que te pedí, me ha servido de mucho.. aunque ahora ya se bastantes cosillas más sobre el rollover, he tenido algún problemilla a la hora ponerlo en práctica, he puesto el código tal y como tú me dijiste, y me da un error no sé porqué, ¿puede ser porque a la imagen que quiero que cambie (en nuestro caso 'luz_apagada') no le haya dado un nombre? O quizá me equivoqué al escribir el código, aunque lo he repasado una y otra vez sin parar.. mmm. ¿Si te parece te escribo lo que puse y tu me dices en qué fallo ok? Te lo agradecería:
(La imagen que sale en la página es "imgA.gif" y la imagen que quiero que salga al poner el cursor encima es "imgB.gif")
Puse este código:
<html>
<head>
<title></title>
<script language="Javascript">
img1=new Image();
img1.src='imgB.gif';
function cambiaImagen('imagen1','imgB.gif') {
if (document.images) {
document.images[imagen1].src='imgA.gif';
}
}
// --></script>
</head>
<body>
<a href="" onMouseover="cambiaImagen('imagen1','imgB.gif')"
onMouseout="cambiaImagen('imagen1','imgA.gif')">
<img name="imagen1" src="imgA.gif" border=0></a>
</body>
</html>
No sé lo que falla, pues he sustituido los nombres correctamente (creo...). Creerás que soy tonta o algo así pero es que ya me ha pasado varias veces no saber qué es lo que falla (o al revés, que me salga todo bien sin saber lo que estoy haciendo ni escribiendo) y ahora al fin deseo saberlo y saber arreglarlo, por eso pregunto cosas básicas como esta, porque así todo queda más claro y voy superándome en conocimientos. Bueno, nada más.. Espero me respondas este mensaje... y no sé si te gustará saberlo o no, pero que sepas que te vas a cansar de mi.. porque me está gustando cada día más el javascript y además me has caído bien así que... je je :) Gracias y hasta pronto!
(La imagen que sale en la página es "imgA.gif" y la imagen que quiero que salga al poner el cursor encima es "imgB.gif")
Puse este código:
<html>
<head>
<title></title>
<script language="Javascript">
img1=new Image();
img1.src='imgB.gif';
function cambiaImagen('imagen1','imgB.gif') {
if (document.images) {
document.images[imagen1].src='imgA.gif';
}
}
// --></script>
</head>
<body>
<a href="" onMouseover="cambiaImagen('imagen1','imgB.gif')"
onMouseout="cambiaImagen('imagen1','imgA.gif')">
<img name="imagen1" src="imgA.gif" border=0></a>
</body>
</html>
No sé lo que falla, pues he sustituido los nombres correctamente (creo...). Creerás que soy tonta o algo así pero es que ya me ha pasado varias veces no saber qué es lo que falla (o al revés, que me salga todo bien sin saber lo que estoy haciendo ni escribiendo) y ahora al fin deseo saberlo y saber arreglarlo, por eso pregunto cosas básicas como esta, porque así todo queda más claro y voy superándome en conocimientos. Bueno, nada más.. Espero me respondas este mensaje... y no sé si te gustará saberlo o no, pero que sepas que te vas a cansar de mi.. porque me está gustando cada día más el javascript y además me has caído bien así que... je je :) Gracias y hasta pronto!
No te expliqué qué es una función... Verás. Una función, en cualquier lenguaje de programación, es un trozo de código que se ejecuta con unos argumentos (la "entrada") y que, opcionalmente, devuelve algo (la "salida"). Imagínate una máquina de hacer pasteles. Entra harina, leche, azúcar y huevos, entre otras cosas, y salen pasteles.
Una función es igual. Le das un nombre, unos argumentos de entrada, y luego un programa para que se ejecute sobre esos argumentos, que puede devolver algo en la salida. La función que te dí no devuelve nada, por cierto, pero eso es normal.
Tu fallo está en los argumentos de entrada. No hay que sustituirlos más que cuando *usas* la función, porque son como los nombres de los tubos por los que entran el azúcar, la leche... Si yo pongo:
function hacerPasteles(cantidad_leche, cantidad_azucar, cantidad_huevos,
cantidad_harina) {
// código para hacer pasteles
}
Luego, podré "hacer pasteles" con esa función en otro lugar de la página:
HacerPasteles(100, 10, 100, 100); // y eso devuelve un pastel concreto.
La definición de la función da el nombre de los "tubos" por donde entrarán los "ingredientes" de verdad, más adelante. En el ejemplo del rollover, al definir esa función no hay que sustituir nada. Es después, cuando la llamas en el onMouseover, cuando hay que poner los "ingredientes".
Esta es una de las maravillas de la programación moderna, que escribes un código que puede servirte una y otra vez. Puedes hacer tantos rollovers como quieras, definiendo una vez la función y, después, ejecutándola con diferentes imágenes en distintos onMouseovers...
Espero que esto te haya aclarado las cosas un poco. No dudes en seguir preguntándome si tienes problemas.
Una función es igual. Le das un nombre, unos argumentos de entrada, y luego un programa para que se ejecute sobre esos argumentos, que puede devolver algo en la salida. La función que te dí no devuelve nada, por cierto, pero eso es normal.
Tu fallo está en los argumentos de entrada. No hay que sustituirlos más que cuando *usas* la función, porque son como los nombres de los tubos por los que entran el azúcar, la leche... Si yo pongo:
function hacerPasteles(cantidad_leche, cantidad_azucar, cantidad_huevos,
cantidad_harina) {
// código para hacer pasteles
}
Luego, podré "hacer pasteles" con esa función en otro lugar de la página:
HacerPasteles(100, 10, 100, 100); // y eso devuelve un pastel concreto.
La definición de la función da el nombre de los "tubos" por donde entrarán los "ingredientes" de verdad, más adelante. En el ejemplo del rollover, al definir esa función no hay que sustituir nada. Es después, cuando la llamas en el onMouseover, cuando hay que poner los "ingredientes".
Esta es una de las maravillas de la programación moderna, que escribes un código que puede servirte una y otra vez. Puedes hacer tantos rollovers como quieras, definiendo una vez la función y, después, ejecutándola con diferentes imágenes en distintos onMouseovers...
Espero que esto te haya aclarado las cosas un poco. No dudes en seguir preguntándome si tienes problemas.
¡Hola otra vez! Tu respuesta me aclaró un montón lo que no entendía, la verdad jamás hubiera imaginado que aquel código no debía cambiarlo, ahora entiendo como funciona la función, y la verdad es que el definir la función de esa manera es muy cómodo, pues te ahorras bastante tiempo en no escribirlo todo otra vez cada vez que quieras utilizar la misma función en la misma página. Muchas gracias por responder! Y cuando tenga otra duda acudiré a ti... ¿ok? Byeeeeee
Débora
Débora
Sólo una cosa: finaliza la pregunta cuando puedas. Eso ayuda a la gente que tiene que preguntar algo a seleccionar una persona a la que dirigirse.
Te lo repito: no dudes en preguntarme de nuevo cuando lo necesites. Mientras pueda dedicarle tiempo a esto, estaré encantado de hacerlo.
Te lo repito: no dudes en preguntarme de nuevo cuando lo necesites. Mientras pueda dedicarle tiempo a esto, estaré encantado de hacerlo.
