| Sección
"Java Scripts" |
|
Lección
59 |
Flechas
siguen al cursor
Este
Script hace que flechas sigan al cursor, para
activarlo, pegas este código en cualquier
sector de tu sitio, pero siempre debajo de donde
dice <Head> en el HTML de tu página:
<style
type="text/css">
BODY {overflow: scroll; overflow-x:
hidden;}
</style> |
|
Y
esto
otro pegas debajo de <Body>
en el HTML de tu página:
<script language="JavaScript1.2">
<!--
var trailLength = 12 // Largo de la estela (8 por defecto)
var path = "cursor.gif" // Ubicación de la imágen
// No modificar
var isIE = false,isNav = false,range = "all.",style = ".style",i,d = 0
var topPix = ".pixelTop",leftPix = ".pixelLeft",images,storage
if (document.layers) { // identificador del browser
isNav = true,range = "layers.",style = "",topPix = ".top",leftPix = ".left"
} else if (document.all) {
isIE = true
}
function initTrail() { // preparar el script
images = new Array()
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image()
images[i].src = path
}
storage = new Array() // preparar coordinadas
for (i = 0; i < images.length*3; i++) {
storage[i] = 0
}
for (i = 0; i < images.length; i++) {
(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>')
}
trail()
}
function trail() { // Función de la estela
for (i = 0; i < images.length; i++) {
eval("document." + range + "obj" + i + style + topPix + "=" + storage[d])
eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1])
d = d+2
}
for (i = storage.length; i >= 2; i--) {
storage[i] = storage[i-2]
}
d = 0
var timer = setTimeout("trail()",10)
}
function processEvent(e) {
if (isIE) { // para IE
storage[0] = window.event.y+document.body.scrollTop+10
storage[1] = window.event.x+document.body.scrollLeft+10
} else { // para Netscape Navigator
storage[0] = e.pageY+12
storage[1] = e.pageX+12
}
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE)
}
if (isIE || isNav) { // iniciar script
initTrail()
document.onmousemove = processEvent // comenzar captura
}
//-->
</script> |
Lo
que pinté con rojo corresponde al nombre de la
imagen que sigue al cursor, la cual debes guardar
en tu disco duro, en la misma carpeta que
guardarás tu pagina con el efecto.
Si
deseas esa misma imagen, la tomas con el botón
derecho del ratón de aquí:
Y
aquí lo tienes al mismo archivo, listo para
cortar y pegar en tu página:
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 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:
|
