<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Monito in the shell · Mapa de Red</title>
<style type="text/css">
#mapa {width:100%;font: 12px Arial,sans-serif;min-width:400px;}
#mapa a {outline: none;}
#mapa #monito {display:none;}
#mapa #comecocos {display:none; position:absolute; top:12px; left:230px;}
#mapa #nmap {display: inline;background:#f1e2c7;color:#8a5704;border:1px solid #8a5704; padding:2px 4px 4px 4px;border-radius:5px;}
#mapa #nmap:hover {box-shadow: 2px 2px 2px #8a5704;}
#mapa #delineante {border-bottom:1px dotted #c49851;}
#mapa #cartografiamaquina {margin-top:10px;}
#mapa #cartografiamaquina #cajamaquina {display:inline-block; margin:2px;}
#mapa #cartografiamaquina #cajamaquina #maquina {text-align:center;}
#mapa #cartografiamaquina #cajamaquina #ip {text-align:center; font:10px \'Verdana\',Arial,sans-serif; padding:1px 2px 1px 2px; color:#8a5704;border:1px solid #8a5704; background:#f1e2c7; border-radius:5px; }
</style>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//tontería inicial, aparece el logotipo poco a poco
$(\'#monito\').fadeIn(3600);
//si pulsamos el botón mapear...
$(\'#nmap\').click(function() {
$(\'#comecocos\').fadeIn();
//load
$(\'#salida\').load("mapared.php");
//desaparece comecocos
$(\'#comecocos\').fadeOut();
});
//fin ready
});
</script>
</head>
<body>
<div id="mapa">
<!--monito--><img src="imagina/monito.png" id="monito" />
<!--botón mapear--><a href="#"><div id="nmap">★mapear</div></a>
<!--carga ajax--><div id="comecocos"><img src="imagina/comecocos.gif" /></div>
<!--línea punteada--><div id="delineante"></div>
<div id="cartografiamaquina">
<!--por aquí viene la salida de nmap--><div id="salida"></div>
<!--fin mapa-->
</div>
</div>
</body>
</html>