Cabecera HTML No se si este hilo corresponde a (X)HTML, pero la puse aquí por mi segunda pregunta que tiene un Script:
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>
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;
}
<!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:
¿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?
