| Sección
"Java Scripts" |
|
Lección
20 |
Efecto
Título que se abre en una imagen de fondo
móvil
Este efecto es muy interesante y fácil de
instalar, queda como se muestra en la escena de
abajo:
|
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 escribo en la casilla de
abajo, tal cual como está en cualquier sitio, pero siempre debajo de la palabra <Body>,
que encontrarás en la parte superior de tu página.
Para más detalles acerca de la localización
del sitio exacto donde quieres tu efecto, click
aquí
<div align="center"><center><table border="0" cellpadding="0" cellspacing="0" style="font-size:
36pt; color:
#FFFF00; font-weight: bold; background-image:
url('s.fondoladrillos.jpg')"
height="100"
background="s.fondoladrillos.jpg"><tr><td><SCRIPT LANGUAGE="JavaScript"><!-- Original: Charles Foster (wcms_sf@msn.com) -->
<!-- Web Site: http://kylo.ml.org/flash -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var speed = 100;
var cycledelay = 2000;
var maxsize = 28;
var x = 0;
var y = 0;
var themessage, size;
var esize = "</font>";
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var themessage2 = new initArray(
"Este efecto es muy interesante !",
"Puedes aplicarlo a tu sitio !",
"Puedes escribir lo que desees ",
"No te demores y utilizalo!!"
);
if(navigator.appName == "Netscape")
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="wds"></span><br>');
function upwords(){
themessage = themessage2[y];
if (x < maxsize) {
x++;
setTimeout("upwords()",speed);
}
else setTimeout("downwords()",cycledelay);
if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>";
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
}
}
function downwords(){
if (x > 1) {
x--;
setTimeout("downwords()",speed);
}
else {
setTimeout("upwords()",cycledelay);
y++;
if (y > themessage2.length - 1) y = 0;
}
if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>";
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
}
}
setTimeout("upwords()",speed);
// End -->
</script>
</td></tr></table></center></div>
|
|
Lo que pinté con azul corresponde al color de la letra y lo cambias como desees
basándote en la tabla de colores que tienes en este enlace: Visitar
Tabla de colores Lo que pinté con rojo
corresponde a la imagen que se
cargará como fondo de las leyendas. Tu puedes poner una imagen de tu
gusto. Lo
que pinté con verde corresponde a la altura de la ventana donde aparece
la imagen con las leyendas, tú pon la altura que quieras. Con
gris pinté el tamaño de la letra de las leyendas que aparecen en la
ventana, tú pon el tamaño que quieras.
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 <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.
|
