• Domingo 22 de Diciembre de 2024, 04:17
« anterior próximo »
Páginas: [1]

Autor Tema:  Script Dependiente De Cabecera Html  (Leído 1479 veces)

Deiv

  • Miembro activo
  • **
  • Mensajes: 67
  • Nacionalidad: bo
    • Ver Perfil
Script Dependiente De Cabecera Html
« en: Jueves 10 de Enero de 2008, 23:59 »
0
Me ha interesado cómo obtuvieron fijar un logo inamovible en esta página:
Código: Text
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  3. <html>
  4. <style type="text/css">
  5. #logo {
  6.  Z-INDEX: 1; LEFT: 0px; MARGIN: 0px; COLOR: white; POSITION: absolute; TOP: 0px
  7. }
  8. [id]#logo {
  9.  POSITION: fixed
  10. }
  11. </style>
  12. <body>
  13. <P id=logo><A title=Home href="http://coding.derkeiler.com/"><IMG title=Home
  14. height=308 alt=derkeiler.com src="logo.png" width=77 border=0></A></P>
  15. </body>
  16. </html>
  17.  
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: Text
  1.  
  2. if (document.all) {
  3. yourLogo = &#34;Mouse Orbital - &#34;;
  4. logoFont = &#34;Arial&#34;;
  5. logoColor = &#34;FFFFFF&#34;;
  6. yourLogo = yourLogo.split('');
  7. L = yourLogo.length;
  8. TrigSplit = 360 / L;
  9. Sz = new Array()
  10. logoWidth = 60;
  11. logoHeight = -30;
  12. ypos = 0;
  13. xpos = 0;
  14. step = 0.03;
  15. currStep = 0;
  16. document.write('&#60;div id=&#34;outer&#34; style=&#34;position:absolute;top:0px;left:0px&#34;&#62;&#60;div style=&#34;position:relative&#34;&#62;');
  17. for (i = 0; i &#60; L; i++) {
  18.  document.write('&#60;div id=&#34;ie&#34; style=&#34;position:absolute;top:0px;left:0px;'
  19.  +'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
  20.  +'color:'+logoColor+';text-align:center&#34;&#62;'+yourLogo[i]+'&#60;/div&#62;');
  21. }
  22. document.write('&#60;/div&#62;&#60;/div&#62;');
  23. function Mouse() {
  24. ypos = event.y;  
  25. xpos = event.x - 5;  
  26. }
  27. document.onmousemove=Mouse;
  28. function animateLogo() {
  29.  outer.style.pixelTop = document.body.scrollTop;  
  30.  for (i = 0; i &#60; L; i++) {  
  31.   ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
  32.   ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
  33.   Sz[i] = ie[i].style.pixelTop - ypos;
  34.   if (Sz[i] &#60; 5)
  35.    Sz[i] = 5;
  36.   ie[i].style.fontSize = Sz[i] / 1.7;
  37.  }
  38.  currStep -= step;
  39.  setTimeout('animateLogo()', 20);
  40. }
  41. window.onload = animateLogo;
  42. }
  43.  
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?. En este caso estaría supeditado a no trabajar con Stándares si deseo utilizar este Script???
Páginas: [1]
« anterior próximo »