<html>
<head>
<title>Notas multiples</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
creamos_notas=function(){
mostramos_nota=function(){
var id=this.id.replace(/a/,'nota');
nota=document.getElementById(id);
nota.style.left=event.clientX;
nota.style.top=event.clientY;
nota.style.visibility='visible';
}
esconde_nota=function(){
var id=this.id.replace(/a/,'nota');
nota=document.getElementById(id);
nota.style.visibility='hidden';
}
as=document.getElementsByTagName('a');
for(i=0;i<as.length;i++){
if(/bmi_estilob/.test(as[i].className)){
as[i].onmousemove=mostramos_nota;
as[i].onmouseout=esconde_nota;
}
}
}
window.onload=creamos_notas;
</script>
<style type="text/css">
p {
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #333333;
}
a.mi_estilo:link,a.mi_estilo:visited {
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #
00f;
text-decoration: underline;
}
a.mi_estilo:hover {
color: #
f00;
}
.nota {
position: absolute;
top:
0px;
left:
0px;
background: #
ffc;
padding:
10px;
border: 1px solid #
000;
z-index: 1;
visibility: hidden;
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #
000;
}
</style>
</head>
<body>
<p>Visita, <a href="
URL" id="a0" class="mi_estilo">
Titulo</a>
texto <a href="#" id="a1" class="mi_estilo">
texto</a>
texto</p>
<div id="nota0" class="nota">
Ir a página Inicial</div>
<div id="nota1" class="nota">
texto</div>
<p>
texto <a href="#" id="a2" class="mi_estilo">
texto</a>, <a href="#" id="a3" class="mi_estilo">
texto</a>, Etc.</p>
<div id="nota2" class="nota">
texto</div>
<div id="nota3" class="nota">
texto</div>
</body>
</html>