Ver lo mismo en diferentes pantallas

mortal2008 · #1 (**permalink**) 02/02/2010, 06:27

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!

quimfv · #2 (**permalink**) 02/02/2010, 07:03

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<html>
<head>
<script language="javascript">
 
function moure(){
var aleatori;
aleatori = Math.floor (Math.random()*4)+1;
 
if (aleatori==1) {
moure_dalt('objecte',null);
moure_dalt('objecte2',90);
}
 
if (aleatori==2) {
moure_dreta('objecte',null);
moure_dreta('objecte2',90);
}
 
if (aleatori==3) {
moure_arriba('objecte');
moure_arriba('objecte2');
}
 
if (aleatori==4) {
moure_esquerra('objecte');
moure_esquerra('objecte2');
}
window.setTimeout("moure()",1);
 
 
}
 
function moure_dalt(ID_objecte,vmax) {
var objecte_moure = document.getElementById(ID_objecte);
    if (vmax!=null){
        if (parseInt(objecte_moure.style.top) + 10>90){
            objecte_moure.style.top = 90;
        }else{
            objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;
        }
    }else{
        objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;
    }
}
 
 
function moure_dreta(ID_objecte,vmax) {
var objecte2_moure = document.getElementById(ID_objecte);
    if (vmax!=null){
        if (parseInt(objecte2_moure.style.left) + 10>90){
            objecte2_moure.style.left = 90;
        }else{
            objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
        }
    }else{
            objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
    }
}
 
 
function moure_arriba(ID_objecte) {
var objecte3_moure = document.getElementById(ID_objecte);
if (parseInt(objecte3_moure.style.top) - 10<0){
objecte3_moure.style.top = 0;
}else{
objecte3_moure.style.top = parseInt(objecte3_moure.style.top) - 10;
}
}
 
function moure_esquerra(ID_objecte) {
var objecte4_moure = document.getElementById(ID_objecte);
if (parseInt(objecte4_moure.style.left) - 10<0){
objecte4_moure.style.left = 0;
}else{
objecte4_moure.style.left = parseInt(objecte4_moure.style.left) - 10;
}
}
 
 
 
 
</script>
</head>
<body onLoad="moure()">
<br>
<br>
<br>
<br>
<div id="cuerpo" style="width:100px; height:100px; background-color: #F5F5DC; border:1px solid #CCCCCC;margin-bottom:10px;z-index:0">
  <div id="objecte" style="position: absolute; width:10px; height:10px; left:0px; top:0px; background-color: #cccccc; z-index:1">&nbsp;</div>
  <div id="objecte2" style="position: relative; width:10px; height:10px; left:0px; top:0px; background-color: #cccccc; z-index:1">&nbsp;</div>
</div>
</body>
</html>

mortal2008 · #3 (**permalink**) 02/02/2010, 07:09

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.

mortal2008 · #4 (**permalink**) 02/02/2010, 07:34

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;
}

mortal2008 · #5 (**permalink**) 02/02/2010, 07:57

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