| Sección
"Java Scripts" |
|
Lección
38 |
Efecto
de menú de enlaces...
Como
verás es un efecto muy práctico, bello y
útil. Para
lograrlo, solo debes pegar este Script debajo de
donde dice <Head> en el HTML de tu página:
<script
language="JavaScript">
<!--
img_on = "s.on.gif";
img_off = "s.off.gif";
function imgover(imgname)
{
imgname.src = img_on;
}
function imgout(imgname)
{
imgname.src = img_off;
}
//-->
</script>
|
|
Lo
que pinté con rojo es el nombre de la imagen que
debes declarar y subir al servidor para que se
active cuando el ratón del visitante de tu sitio
pasa por sobre el hipervínculo.
Lo
que pinté con verde es el nombre de la imagen que
debes declarar y subir al servidor para que se
active todo el tiempo que el ratón del visitante
de tu sitio no pasa por sobre el hipervínculo.
Luego,
pegas esto debajo de
donde dice <Body> en el HTML de tu página:
<p>
<IMG NAME="img_01"
SRC="off.gif" WIDTH="10"
HEIGHT="10" BORDER="0">
<A HREF="http://www.tripod.com"
onMouseOver="imgover(img_01)"
onMouseOut="imgout(img_01)">
Tripod</a>
<br>
<IMG
NAME="img_02" SRC="off.gif"
WIDTH="10" HEIGHT="10"
BORDER="0">
<A HREF="http://www.lycos.com"
onMouseOver="imgover(img_02)"
onMouseOut="imgout(img_02)">
Lycos</a>
<br>
<IMG
NAME="img_03" SRC="off.gif"
WIDTH="10" HEIGHT="10"
BORDER="0">
<A HREF="http://www.forosdeweb.com"
onMouseOver="imgover(img_03)"
onMouseOut="imgout(img_03)">
Angelfire</a>
<br>
<IMG
NAME="img_04" SRC="off.gif"
WIDTH="10" HEIGHT="10"
BORDER="0">
<A HREF="http://webgasoleros.netfirms.com"
onMouseOver="imgover(img_04)"
onMouseOut="imgout(img_04)">
WhoWhere</a>
<br>
<IMG
NAME="img_05" SRC="off.gif"
WIDTH="10" HEIGHT="10"
BORDER="0">
<A HREF="http://www.yahoo.com"
onMouseOver="imgover(img_05)"
onMouseOut="imgout(img_05)">
GuestWorld</a>
<br>
|
Cada
uno de estos trozos corresponde a un enlace, debes
colocar tanta cantidad de código similar a este, como la cantidad de enlaces
que quieras activar.
Copiaré
nuevamente uno de los trozos para explicarlo, y a
partir de él, copias la cantidad que desees.
|
<IMG
NAME="img_01"
SRC="off.gif"
WIDTH="10"
HEIGHT="10"
BORDER="0">
<A HREF="http://www.guestworld.com"
onMouseOver="imgover(img_01)" onMouseOut="imgout(img_01)">
GuestWorld</a>
<br>
|
Lo que
pinté con rojo indica el valor de la imagen que
será activada cuando pase el ratón de tu
visitante por el hiperenlace, el
de la nuestra es img_01,
a la próxima, perteneciente al enlace siguiente
que agregues, pondrás img_02,
y así seguirás aumentando un número a cada
imagen de cada enlace adicional que agregues.
Lo que
pinté con verde corresponde al nombre de la
imagen que has declarado para que aparezca al lado
del enlace cuando está en estado activo. (o sea,
cuando el ratón pase por encima
del enlace).
Lo que
pinté con azul corresponde al ancho de la imagen
que has declarado para que aparezca al lado del
enlace cuando está en estado activo. (o sea,
cuando el ratón pase por encima
del enlace).
Lo que
pinté con gris corresponde al ancho de la imagen
que has declarado para que aparezca al lado del
enlace cuando está en estado activo. (o sea,
cuando el ratón pase por encima
del enlace).
Lo que
pinté con marrón pertenece a la dirección del
enlace que deseas que se active cuando es
seleccionado ese hipervínculo. (cuando hacen
click en él).
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 "Seleccinar 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 debajo de donde dice <Head>
en el HTML de tu página:
Esto
es lo que debes pegar debajo de 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.
|
