Foros del Web » Programando para Internet » Javascript »

Ver lo mismo en diferentes pantallas

Estas en el tema de Ver lo mismo en diferentes pantallas en el foro de Javascript en Foros del Web. Hola, tengo un PC con una pantalla de 17'' y un protatil de 15''4. Estoy desarrollando un pequeño JavaScript que crea un efecto de mousover ...
  #1 (permalink)  
Antiguo 02/02/2010, 06:27
 
Fecha de Ingreso: febrero-2010
Mensajes: 37
Antigüedad: 11 años, 4 meses
Puntos: 0
Ver lo mismo en diferentes pantallas

Hola, tengo un PC con una pantalla de 17'' y un protatil de 15''4. Estoy desarrollando un pequeño JavaScript que crea un efecto de mousover sobreponiendo una FOTO sobre un MAP AREA (lo hago con DOM). Para que functione en todas las resoluciones el código calcula el top y el left de tal manera que se vea siempre sobre el MAP AREA y se cree el efecto deseado. El problema es que en una pantalla de diferentes pulgadas la imágen sale un poco a un lado (la altura se queda igual, que es lo que quiero). ¿De que manera podría hacer que salga siempre sobre el MAP AREA en todos los tamaños de pantalla? Aunque en las dos pantallas las tengo con 1280 px de ancho parece que en una 1 pixel "mide más" fisicamente que en la otra. No se, estoy buscando una relación para hacerlo, en función del ancho en pulgadas del monitor(si es que se puede sacar), o sacandole la posición al MAP AREA si se puede y darsela a la IMÁGEN que se coloca encima.
Me podéis dar algunas sugerencias, ¡gracias! Lo que intento hacer es un mapa que al mover el ratón por encima de un país, este cambia de color (colocandose una imágen recortada sobre el MAP AREA).
¡Gracias por anticipado!
  #2 (permalink)  
Antiguo 02/02/2010, 07:03
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 13 años, 3 meses
Puntos: 574
Respuesta: Ver lo mismo en diferentes pantallas

El tema es calcular la posición de manera relativa a la zona que te sirve de marco y no respecto de la pantalla.

En el ejemplo que te pongo tenemos tres capas dos de ellas se mueven aleatoriamente pero una de ellas lo hace respecto de la pantalla y la otra respecto de la tercera capa.


position: relative;
position: absolute;

para la capa con position: relative; el punto 0,0 coincide con la esquina superior izquierda de la capa que hace de fondo, mientras que para la otra capa el punto 0,0 és el de la ventana.

Creo que adaptando todo esto puedes solucionar lo que necesitas.


Quim

Código HTML:
Ver original
  1. <script language="javascript">
  2.  
  3. function moure(){
  4. var aleatori;
  5. aleatori = Math.floor (Math.random()*4)+1;
  6.  
  7. if (aleatori==1) {
  8. moure_dalt('objecte',null);
  9. moure_dalt('objecte2',90);
  10. }
  11.  
  12. if (aleatori==2) {
  13. moure_dreta('objecte',null);
  14. moure_dreta('objecte2',90);
  15. }
  16.  
  17. if (aleatori==3) {
  18. moure_arriba('objecte');
  19. moure_arriba('objecte2');
  20. }
  21.  
  22. if (aleatori==4) {
  23. moure_esquerra('objecte');
  24. moure_esquerra('objecte2');
  25. }
  26. window.setTimeout("moure()",1);
  27.  
  28.  
  29. }
  30.  
  31. function moure_dalt(ID_objecte,vmax) {
  32. var objecte_moure = document.getElementById(ID_objecte);
  33.     if (vmax!=null){
  34.         if (parseInt(objecte_moure.style.top) + 10>90){
  35.             objecte_moure.style.top = 90;
  36.         }else{
  37.             objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;
  38.         }
  39.     }else{
  40.         objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;
  41.     }
  42. }
  43.  
  44.  
  45. function moure_dreta(ID_objecte,vmax) {
  46. var objecte2_moure = document.getElementById(ID_objecte);
  47.     if (vmax!=null){
  48.         if (parseInt(objecte2_moure.style.left) + 10>90){
  49.             objecte2_moure.style.left = 90;
  50.         }else{
  51.             objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
  52.         }
  53.     }else{
  54.             objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
  55.     }
  56. }
  57.  
  58.  
  59. function moure_arriba(ID_objecte) {
  60. var objecte3_moure = document.getElementById(ID_objecte);
  61. if (parseInt(objecte3_moure.style.top) - 10<0){
  62. objecte3_moure.style.top = 0;
  63. }else{
  64. objecte3_moure.style.top = parseInt(objecte3_moure.style.top) - 10;
  65. }
  66. }
  67.  
  68. function moure_esquerra(ID_objecte) {
  69. var objecte4_moure = document.getElementById(ID_objecte);
  70. if (parseInt(objecte4_moure.style.left) - 10<0){
  71. objecte4_moure.style.left = 0;
  72. }else{
  73. objecte4_moure.style.left = parseInt(objecte4_moure.style.left) - 10;
  74. }
  75. }
  76.  
  77.  
  78.  
  79.  
  80. </head>
  81. <body onLoad="moure()">
  82. <br>
  83. <br>
  84. <br>
  85. <br>
  86. <div id="cuerpo" style="width:100px; height:100px; background-color: #F5F5DC; border:1px solid #CCCCCC;margin-bottom:10px;z-index:0">
  87.   <div id="objecte" style="position: absolute; width:10px; height:10px; left:0px; top:0px; background-color: #cccccc; z-index:1">&nbsp;</div>
  88.   <div id="objecte2" style="position: relative; width:10px; height:10px; left:0px; top:0px; background-color: #cccccc; z-index:1">&nbsp;</div>
  89. </div>
  90. </body>
  91. </html>

Última edición por quimfv; 02/02/2010 a las 07:40 Razón: Pongo "Creo" en negrita
  #3 (permalink)  
Antiguo 02/02/2010, 07:09
 
Fecha de Ingreso: febrero-2010
Mensajes: 37
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Ver lo mismo en diferentes pantallas

Muchas gracias!
Me estoy dando cuenta de que el problema está solamente en el navegador de Mozilla (la primera vez que el IE me deja contento). Entonces, todo este rollo que he estado contando solamente ocurre en Mozilla. Lo curioso es que en el monitor de 17'' se ve bien, solamente en el de 15''4, y solamente en el Mozilla. Intentaré ver si son los ajustes del navegador o no he encontrado la mejor manera de calcular la posición para este navegador.

Última edición por mortal2008; 02/02/2010 a las 07:26
  #4 (permalink)  
Antiguo 02/02/2010, 07:34
 
Fecha de Ingreso: febrero-2010
Mensajes: 37
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Ver lo mismo en diferentes pantallas

Si, functiona en IE, Safari y Chrome pero no funciona en Firefox y Opera (tengo las últimas versiones de todos). ¿Cuál podría ser la causa? La función con la que calculo la posición del contenedor del mapa (para que a partir de ella coloque la imágen sobre el MAP AREA) es ésta:
Código:
function get_window_size() {
var size = Array(800, 600);

    if (typeof window.innerWidth != 'undefined') {          //Esto para la mayoría de los navegadores, incluyendo Mozilla
        size[0] = window.innerWidth,
        size[1] = window.innerHeight
    } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {         //Esto para IE y Opera
        size[0] = document.documentElement.clientWidth,
        size[1] = document.documentElement.clientHeight
    } else {       //Esto para navegadores más antiguos
        size[0] = document.getElementsByTagName('body')[0].clientWidth,
        size[1] = document.getElementsByTagName('body')[0].clientHeight
    }
    return size;
}

Última edición por mortal2008; 02/02/2010 a las 07:42
  #5 (permalink)  
Antiguo 02/02/2010, 07:57
 
Fecha de Ingreso: febrero-2010
Mensajes: 37
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Ver lo mismo en diferentes pantallas

Yjajajajaja, ya funciona, gracias!
Funciona con todos los navegadores, todas las pantallas, todos los monitores.

Etiquetas: diferentes, pantallas, ver
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:14.