he encontrado un codigo que es similar a lo que quiero pero el texto debe aparecer siempre en un mismo sitio, no sé mucho de javascript osea que no sé cómo modificarlo, si alguien es tan amable de ayudarme?
<html>
<title>Efecto etiqueta</title>
<body>
<script type="text/javascript" language="JavaScript">
<!--
/*--------------------------------------------------------------------------
por cada explicación que quieras incluir, tienes que escribir una línea !exactamente! como las siguientes por cada explicación
que quieras mostrar. Los elementos tienen que estar separados por coma.
Si quieres incluir un " hazlo en esta forma \".
primer elemento: el texto de tu explicación
segundo: Tamaño del texto
tercero: distancia horizontal del movimiento mouseover
cuarto: distancia vertical del movimiento mouseover
quinto: color del texto
sexto: backgroundcolor(color de fondo)
sétimo: ancho de la capa (layer) en pixels, para IE de otra forma la capa se despliega completamente sobre la pantalla
-----------------------------
cada una debe desplegar una explicación que tiene que incluir los siguientes comandos onMouseover y onMouseout.
<a href="#"></a>onMouseOver="display(1,event)" onMouseOut="hide_layer()"</a>
la conexión entre el enlace (link) y la explicación es hecha a través del número en el manejador del evento onMouseover.
el link que muestra la primera explicación: display(1,event)
segundo: display(2,event)
...
quinto: display(5,event)
y asi sigue
-----------------------------------------------------------------------------
!!!
No te olvides de incluir la capa de salida(layer) al !final!de tu documento. Solo copialo y pegalo de esta página.
*/
var explanation = new Array()
explanation[1] = new Array ("Hyper Text Markup Language.","+0",100,0,"#663399","#FFCCFF",240);
explanation[2] = new Array("Script Language","+1",10,20,"#0000F0","#09F9AF",180);
explanation[3] = new Array("World Wide Web","+2",0,-50,"#990033","#FFCC99",240);
explanation[4] = new Array("Alguna pregunta? Solo enviame un mail.","+1",100,0,"#003333","#CCCC99",280);
ns = (document.layers)? true : false;
ie = (document.all)? true: false;
function display(a,event){
if (a>explanation.length-1){alert("You tried to access an explanation which is not defined!."); return}
//a=welches Array event; nur fuer NS
if (ns) layer_to_display_in = document.output;
if (ie) layer_to_display_in = output.style;
if (ns) {layer_to_display_in.visibility = "show" ;//Ausgabelayer wird eingeblendet
layer_to_display_in.left = event.pageX+explanation[a][2];
layer_to_display_in.top = event.pageY+explanation[a][3];// Position relativ zum Klickereignis
with(document.layers["output"].document){ // Ausgabetext
open();
write("<b><font size="+explanation[a][1]+" color="+explanation[a][4]+">"+explanation[a][0]+"</font></b>");
close();
bgColor=explanation[a][5]}
}
if (ie) { layer_to_display_in.visibility = "visible";
if (isNaN(explanation[a][1])) alert("Something is wrong with the input of the text size.\n\nPlease check.")
//(which_size>300)?which_size=300:which_size=which_s ize; // which_size hier max. 300px
layer_to_display_in.pixelWidth=explanation[a][6];
layer_to_display_in.left=window.event.clientX+expl anation[a][2];
layer_to_display_in.top = window.event.clientY+explanation[a][3];
layer_to_display_in.backgroundColor=explanation[a][5]
document.all["output"].innerHTML ="<b><font size="+explanation[a][1]+"
color="+explanation[a][4]+">"+explanation[a][0]+"</font></b>";}
}
function hide_layer() {
if (ns) layer_to_display_in.visibility = "hide" ;
else if (ie) layer_to_display_in.visibility = "hidden"}
//-->
</script>
<div align="left"><table border="0" width="598">
<tr>
<td width="219" valign="top" style="border-right: thin none rgb(128,128,128)"><small><font
face="Tahoma"><font color="#000040"><small>Pasa tu cursor sobre los hipervínculos y
observa como se activa un mensaje.</small></font><p><font color="#000000">Script hecho por
<a href="mailto:
[email protected]" onMouseOver="display(4,event)"
onMouseOut="hide_layer()" style="color: rgb(0,0,255)">M. Weller </a></font></font></p>
<p><font face="Tahoma" color="#000000">Documentos escritos solo en<a href="#"
onMouseOver="display(1,event)" onMouseOut="hide_layer()" style="color: rgb(0,0,255)"> HTML</a>
se ven muy estáticos. </font></p>
<p><font face="Tahoma" color="#000000">Con <a href="#" onMouseOver="display(2,event)"
onMouseOut="hide_layer()" style="color: rgb(0,0,255)">JavaScript</a> tu puedes cambiar
eso. </font></p>
</small><p><font face="Tahoma" color="#000000"><small>Entonces la <a href="#"
onMouseOver="display(3,event)" onMouseOut="hide_layer()" style="color: rgb(0,0,255)">WWW</a>
se convierte en algo mas interesante. </small></font></p>
<div ID="output" STYLE="POSITION:absolute; TOP:0px; LEFT:0px; visibility: hidden"><p> </p>
</div></td>
</body>
</html>