Me ha interesado cómo obtuvieron
fijar un logo inamovible en esta
página:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<style type="text/css">
#logo {
Z-INDEX: 1; LEFT: 0px; MARGIN: 0px; COLOR: white; POSITION: absolute; TOP: 0px
}
[id]#logo {
POSITION: fixed
}
</style>
<body>
<P id=logo><A title=Home href="http://coding.derkeiler.com/"><IMG title=Home
height=308 alt=derkeiler.com src="logo.png" width=77 border=0></A></P>
</body>
</html>
PRIMERO.-
El código trabaja muy bien en IE7 pero:
1.- En IE6 no funciona
¿Por qué?
2.- En IE7 si de la cabecera le quito: "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
y solamente le dejo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
Tampoco funciona
¿Por qué?
SEGUNDO.-
El Script de abajo que encontre de tantos ejemplos en la Red:
Código PHP:
if (document.all) {
yourLogo = "Mouse Orbital - ";
logoFont = "Arial";
logoColor = "FFFFFF";
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 60;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5)
Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 1.7;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
Si coloco en la Cabececera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
Este interesante efecto funciona siguiendo al Mouse pero.... cuando se hace Scroll de la Página con la rueda Central del Mouse: El EFECTO del Script NO SIGUE al Mouse
¿Por qué?
Sin embargo si QUITO toda la cabecera, o sea
borro todo el:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
¡Funciona perfectamente!! ¿Por qué?. El efecto sigue al mouse, y con el scroll tampoco se hace problemas.
Entonces resumiendo:
Nuevamente
¿Cómo entender esto de las Cabeceras? ¿Cómo darse cuenta para los ejemplos que menciono: ¿Cuando utilizar uno de otro?
En la
primera pregunta estoy suponiendo que el IE6 no tiene esa capacidad para mantener fijo el logo?
Pero
¿por qué al borrar como mencioné UNA PARTE de la cabecera tampoco funciona en IE7?
En la
segunda pregunta mas extraño aún, si quito toda, pero toda la cabecera, funciona muy bien el Script, y
¿Por qué NO así con cabecera?
Feliz Año nuevo a todo los amigos del Foro!