Mostar y ocultar mensaje en el centro de pantalla

corretodo · #1 (**permalink**) 06/09/2009, 23:33

Como puedo mostrar y ocultar mensajes en el centro de la pantalla al pasar el raton por una imagen.

Este codigo me funciona pero quiero que el mensaje me aparezca y se oculte en el centro o en cualquier lado de la pantalla que defina.
-------------------------------------------------
<head>
<script language="JavaScript">
function mostrar(i) {
var texto = new Array(20)
if (i == 0)
texto ="Texto a Mostrar 01"

if (i == 1)
texto ="Texto a <br>Mostrar 02"

ventana.innerHTML=texto;
}
function ocultar() {
ventana.innerHTML=""
}
</script>
</head>
-----------------------------------------------------
<BODY>
<img src="imagen.jpg" onmouseover="javascript:mostrar(1)" onmouseout ="javascript:ocultar()" />
<div id="ventana"></div>
</BODY>
---------------------------------------------------
Dependiendo de la funcion mostrar(0) o mostrar(1).
Me mostrara el mensaje 01 o el 02.
Lo que no se, es como definir el div id="ventana" para que aparezca y desaparezca en el centro de la pantalla.

Muchas gracias

Adler · #2 (**permalink**) 07/09/2009, 04:27

Hola

Esto no es javascript sino CSS

<div aling="center" id="ventana"></div>

Sierte

buzu · #3 (**permalink**) 07/09/2009, 04:33

Eso no es CSS...

Adler · #4 (**permalink**) 07/09/2009, 06:38

Cita:

Iniciado por buzu

Eso no es CSS...

ok, gracias por la corrección, tal y como está es html, pero es que en un principio pensé en aprovechar el id para usar estilos

corretodo · #5 (**permalink**) 07/09/2009, 06:55

A ver: con esto no funciona.
<div aling="center" id="ventana"></div>
Esto lo haria solo en horizontal
----------------------------------------------------
Necesito si se puede en javascript hacer algo para definir mediante algun parametro que la etiqueta div id="ventana" que es la que se define en javascript
pinte y borre el texto en el centro de la pantalla en una ventana, creo que habra que dar algunas coordenadas, en javascript para que esa etiqueta la pinte en una ventana en el centro de la pantalla, tanto en vertical como en horizontal.
Pero eso no lo se hacer y por lo tanto lo pregunto.

Adler · #6 (**permalink**) 07/09/2009, 07:20

Hola

Ese debería de haber sido la primera explicación. Prueba con esto

Código javascript:

Ver originalvar ancho = parseInt((screen.width) / 2)
var alto = parseInt((screen.height) / 2)

a esto tendrás que restarle la mitad del ancho y del alto de la capa

Suerte

corretodo · #7 (**permalink**) 07/09/2009, 07:59

-----------------------------------------------------
La funcion mostrar ahora me queda asi.
---------------------------------------------------------------
function mostrar(i) {
var texto = new Array(20)
var ancho = parseInt((screen.width) / 2)
var alto = parseInt((screen.height) / 2)
if (i == 0)
texto ="Texto a Mostrar 01"

if (i == 1)
texto ="Texto a <br>Mostrar 02"

ventana.innerHTML=texto;
}
function ocultar() {
ventana.innerHTML=""
}
--------------------------------------------------------------
Pero al hacer la llamada a la funcion con este codigo.
<img src="imagen.jpg" onmouseover="javascript:mostrar(1)" onmouseout ="javascript:ocultar()" />
<div id="ventana"></div> Esta es la capa que se deberia pintar en una ventana en en centro.
--------------------------------------------------------------
Supongo que en alguna parte de la llamada a la funcion, tendre que decirle algo de esas dos variables que me has recomendado.
Para que la capa div id="ventana" la pinte en el centro.
------------------------------------------------------------------------
Con el codigo anterior que he puesto, no hace nada.
Lo pinta en la zona donde defino la capa, pero no en el centro.
Y ademas me desplaza todo lo que hay por debajo.
Me gustaria si es posible que pinte una ventana en el centro sin que desplace nada.
Como ya he comentado.

Adler · #8 (**permalink**) 07/09/2009, 11:24

Hola

Prueba así

Cita:

function mostrar(i) {
var texto = new Array(20)
var ancho = parseInt((screen.width) / 2)
var alto = parseInt((screen.height) / 2)
document.getElementById("ventana").style.top = alto +"px";
document.getElementById("ventana").style.left = ancho +"px";

if (i == 0)
texto ="Texto a Mostrar 01"

if (i == 1)
texto ="Texto a <br>Mostrar 02"

ventana.innerHTML=texto;
}
function ocultar() {
ventana.innerHTML=""
}

<div id="ventana" style="position:absolute; top:0px; left:0px;z-index:1000;"></div>

Suerte

buzu · #9 (**permalink**) 07/09/2009, 14:05

Solo aclarar que ese código no te va a poner el mensage en el centro de la ventana. De hecho, puedes obtener resultados totalmente inesperados. Haz la prueva:

1) haz la ventana de tu navagador más chica que tu pantalla, digamos que ocupe solo la mitad de la pantalla.

2) Pon la ventana del lado derecho de la pantalla.

3) Muevete sobre el elemento de modo que se dispare el efecto.

Ahora dime, es eso lo que quieres lograr?
Probablemente si, pero yo creo que no necesariamente.

El problema está en que estás usando la resolución para poder posicionar el elemento, pero no todos navegan con la ventana abierta a todo lo ancho de su monitor. Hay otras propiedades que puedes usar y que te dan un efecto más acorde. Por ejemplo, innerHeiight e innerWidth. El concepto es el mismo, solo cambian las propiedades que usas para calcular los valores de modo que sepas que estás calculando los valores correctos.

Adler · #10 (**permalink**) 07/09/2009, 14:09

Cita:

Iniciado por buzu

Solo aclarar que ese código no te va a poner el mensage en el centro de la ventana. De hecho, puedes obtener resultados totalmente inesperados. Haz la prueva:

1) haz la ventana de tu navagador más chica que tu pantalla, digamos que ocupe solo la mitad de la pantalla.

2) Pon la ventana del lado derecho de la pantalla.

3) Muevete sobre el elemento de modo que se dispare el efecto.

Ahora dime, es eso lo que quieres lograr?
Probablemente si, pero yo creo que no necesariamente.

El problema está en que estás usando la resolución para poder posicionar el elemento, pero no todos navegan con la ventana abierta a todo lo ancho de su monitor. Hay otras propiedades que puedes usar y que te dan un efecto más acorde. Por ejemplo, innerHeiight e innerWidth. El concepto es el mismo, solo cambian las propiedades que usas para calcular los valores de modo que sepas que estás calculando los valores correctos.

Si entramos en supuesto y usamos esas propiedades, entonces habrá que saber que navegador se está usando

Código javascript:

Ver originalvar ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
function iecompattest() {
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
var window_height = ieNOTopera? iecompattest().clientHeight : window.innerHeight;
var window_width = ieNOTopera? iecompattest().clientWidth : window.innerWidth;

buzu · #11 (**permalink**) 07/09/2009, 14:42

por supuesto, pero me parece que es un pequeño paso, el cual ya has resuelto, que vale la pena tomar para asegurar un mejor efecto y no un completo desastre.

Adler · #12 (**permalink**) 07/09/2009, 14:50

Cita:

Iniciado por buzu

por supuesto, pero me parece que es un pequeño paso, el cual ya has resuelto, que vale la pena tomar para asegurar un mejor efecto y no un completo desastre.

La verdad es que tienes razón. ¿Por qué quedarse a medias?