| Sección
"Java Scripts" |
|
Lección
25 |
Intercambiar
imágenes al pasar el ratón por sobre ellas y
que enlacen con otras páginas.
Para lograr este efecto, pones la página en HTML,
(Si usas el
programa Front Page accionando la opción que se encuentra al pie de la página, sobre la
izquierda), y copias el código que te escribo en la casilla de
abajo, tal cual como está debajo de la palabra <Head>,
que encontrarás en la parte superior de tu página.
<script language="JavaScript">
var n3 = false;
image1 = new Image ();
image1.src = "s.base1.gif";
image1on = new Image();
image1on.src = "s.base3.gif"
|
image2 = new Image ();
image2.src = "s.base2.gif";
image2on = new Image();
image2on.src = "s.base4.gif"
function on3(name)
{
document[name].src = eval(name + "on.src");
}
function off3(name)
{
document[name].src = eval(name + ".src");
}
n3 = true;
function on(name)
{
if (n3)
on3(name);
}
function off(name)
{
if (n3)
off3(name);
}
</script>
|
|
Como
podrás apreciar, he encerrado dentro de una tabla
gris oscuro una parte del script, es para explicar
su contenido detalladamente.
Este trozo
es el que da las órdenes para el intercambio de
las imágenes, por lo tanto, la imagen que
declares en "image1.src =
"s.base1.gif"
será la que aparecerá en la página todo el
tiempo que no pasen el ratón por sobre esa
imagen.
Sin
embargo, cuando pasen el ratón por sobre la
imagen, se activará la segunda imagen que
declaras en image1on.src =
"s.base3.gif"
Además, debemos saber que lo que
he encerrado en la tabla gris, son los comandos
para afectar una imagen, pero si deseas que en la
página haya otra imagen, todo lo que haces es
copiar ese mismo trozo de HTML, pero en vez de
ponerle a los encabezados "image1",
le pondrás "image2", y si deseas una
tercer imagen, le pones como nombre a los
encabezados "image3".
Y este otro
trozo, debes pegarlo debajo de donde dice <Body>
en el HTML de tu página:
<a href="index.htm" onmouseover="on('image1');"
onmouseout="off('image1')">
<img src="s.base1.gif" border="0" name="image1" width="85"
height="78"></a>
<br><br>
<a href="u.curso1.htm" onmouseover="on('image2');"
onmouseout="off('image2')">
<img src="s.base4.gif" border="0" name="image2"
width="70" height="70"></a> |
Como verás, hay un trozo script
correspondiente a image1, y otro
correspondiente a image2.
Explicaremos como
funciona uno de ellos, y el otro lo deducirás
facilmente (o la cantidad que desees colocar, pues
yo declaré dos, pero tú, como dijimos arriba,
puedes aumentar la cantidad a gusto).
"index.htm":
es el nombre de la página a la que envía la
imagen 1 si hacen click en ella. Tu le puedes
poner una página tuya para que envíe allí a
quien haga click.
height="78"
es la altura declarada para la imagen
width="85"
es el ancho declarado para la imagen
Aquí copio nuevamente el código con
opción para seleccionarlo, cortar y pegar en tu
sitio.
Para
ello haces click en cualquier palabra que se halla
dentro de la caja, Te diriges a "Edición"
en el menú superior de la barra de herramientas, e
indicas "Seleccionar todo", luego tomas lo
seleccionado dirigiéndote nuevamente a "Edición",
pero esta vez indicas "Cortar", y
posteriormente te posicionas en tu página, donde
quieres colocar este código, entonces te diriges a
Edición, y le indicas "Pegar".
Si
deseas hacer las cosas más rápido, puedes verificar
en "Edición" (está escrito al lado de las
palabras que indican cada orden) que pulsando
"Control" + una letra determinada, puedes
"seleccionar todo", "cortar" o
"pegar" en forma instantánea y con eso
evitas tener que ingresar constantemente al menú de
"Edición".
Esto
es lo que debes pegar donde dice <Head>
en el HTML de tu página:
Esto
es lo que debes pegar donde dice <Body>
en el HTML de tu página:
Si
de todos modos, no funciona este efecto, corta
el código HTML que debes colocar en tu página,
pero antes de hacerlo, pégalo en tu Block de
notas, y luego si córtalo de allí y pégalo en
tu sitio. Ahora si no creo que haya ningún
inconveniente que te impida disfrutar de este
bonito efecto.
Buena
suerte.
|
