Inicio » Introducción a JavaScript » Capítulo 11. Ejercicios resueltos » 11.16. Ejercicio 16
11.16. Ejercicio 16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 16 - Información sobre eventos</title>
<style type="text/css">
body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>
<script type="text/javascript">
function informacion(elEvento) {
var evento = elEvento || window.event;
var coordenadaX = evento.clientX;
var coordenadaY = evento.clientY;
var dimensiones = tamanoVentanaNavegador();
var tamanoX = dimensiones[0];
var tamanoY = dimensiones[1];
var posicionHorizontal = "";
var posicionVertical = "";
if(coordenadaX > tamanoX/2) {
posicionHorizontal = "derecha";
}
else {
posicionHorizontal = "izquierda";
}
if(coordenadaY > tamanoY/2) {
posicionVertical = "abajo";
}
else {
posicionVertical = "arriba";
}
muestraInformacion(['Posicion', posicionHorizontal, posicionVertical]);
}
function muestraInformacion(mensaje) {
document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
for(var i=1; i<mensaje.length; i++) {
document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';
}
}
function tamanoVentanaNavegador(){
// Adaptada de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
var dimensiones = [];
if(typeof(window.innerWidth) == 'number') {
// No es IE
dimensiones = [window.innerWidth, window.innerHeight];
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6 en modo estandar (no quirks)
dimensiones = [document.documentElement.clientWidth, document.documentElement.clientHeight];
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE en modo quirks
dimensiones = [document.body.clientWidth, document.body.clientHeight];
}
return dimensiones;
}
document.onclick = informacion;
</script>
</head>
<body>
<div id="info"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
Descargar solución completa
Puedes sugerir, comentar, criticar e informar de errores en contacto (arroba) librosweb.es