Caja con texto al pasar el raton por encima de un link

eMx · #1 (**permalink**) 17/09/2004, 17:00

Me gustaría saber si alguien tiene o sabe donde puedo encontrar un javascript que haga que, al pasar el raton por encima de un texto hipervinculado aparezca una caja con un texto el cual yo escribiria, es decir, una especie de tabla flotante en la cual poder poner el texto que se desee.

Grácias por atenderme.

Abelius · #2 (**permalink**) 17/09/2004, 17:14

Eso se puede hacer usando un <div> con un class=hidden, y entonces simplemente le das un {display="none"} o "block} a ese div en CSS... :)

eMx · #3 (**permalink**) 17/09/2004, 17:48

Ya, pero yo eso no se hacerlo xDD De hacer un <div> y ponerle un class=hidden y ponerle las fuunciones que me dices a coger un link y ponerle el mensaje ke kiero ke salga etc. etc. hay mucho. No se ¿sabes donde puedo encontrar ese CSS?

Abelius · #4 (**permalink**) 17/09/2004, 19:51

OK, te doy un ejemplo donde yo he usado del div que se esconde y muestra con un click. Tu puedes analizar el SOURCE de esa pagina, y en vez de hacerlo onClick lo haces onMouseOver :)

http://www.worldkit.com/wk_portfolio.asp

:)

eMx · #5 (**permalink**) 18/09/2004, 15:25

Muchas grácias por contestarme, pero eso no es a lo que me refiero. Mira, es algo tipo esto: http://www.gamarod.com.ar/javascript/js.asp?id=183 pero que cuando pase el mouse sobre el link en vez de salir un menú (con varios enlaces) salga un texto. Tu dirás ¿y porqué no cojes este menu y lo modificas para que salga una sola opción? Porque esta configurado para que salgan palabras cortas, es decir, escribo un texto y se saltan el borde bajo (vamos, que el tamaño de cada opción no es modificable por lo que si lo dejo en solo una opcion y escribo algo que sea mas largo de lo que permite su ancho sale abajo pero el alto no varia, por lo que se ven el texto por fuera de la tabla).

Saludos.

sjam7 · #6 (**permalink**) 18/09/2004, 16:49

lo que apsa es que el texto que sale esta en una tabla, borra las celdas de la tabla y deja una sola para que en ella pongas el texto que quieres

axy108 · #7 (**permalink**) 19/09/2004, 09:05

Aqui te pongo un ejemplo que desarrolle para ti:

Código HTML:

<html>
<head>
<title>Caja Oculta</title>
<script language="javascript">
	function muestra_caja(){
		document.getElementById('caja').style.visibility = 'visible'
	}
</script>
</head>
<body>
<a href="#" onMouseOver="muestra_caja()">Pasa por aqui</a>
<div id="caja" style="position: absolute; height: 20; width: 300;top: 10px;left: 100px; visibility:hidden">
<input type="text" name="caja_oculta">
</div>
</body>
</html>

espero sea lo que necesitabas.

SALUDOS

eMx · #8 (**permalink**) 19/09/2004, 10:14

Muchísimas gracias, es casi casi casi exacto a lo que busco. Me gustaría saber como conseguir esto:

-Que en vez de un cuadro de texto fuera una tabla
-La forma de poner 2, porque pongo el mismo codigo 2 veces pero sale el mismo para los dos enlaces.
-Por último, que al quitar el mouse del link desapareciera (o que si se hace click en cualquier otra parte de la página se quite).

Y ya sería exactamente lo que busco.

Muchas grácias por tu ayuda y perdona las molestias.

caricatos · #9 (**permalink**) 19/09/2004, 11:31

Hola a todos:

eMx: Te has fijado en las FAQs javascript...

Yo puse un código que creo que te puede servir, y poco después epplestum puso otro muy parecido.

Saludos

eMx · #10 (**permalink**) 19/09/2004, 15:57

Ya estube buscando y tal pero no encontre nada... ¿Me podrías decir al menos la categoría en la que se encuentra? :$

caricatos · #11 (**permalink**) 19/09/2004, 17:59

Hola otra vez:

La dirección que te comentaba es ésta: http://www.forosdelweb.com/showthrea...756#post694756
... Y pocos temas más abajo está la alternativa de epplestun (es básicamente igual)

Saludos

Alex Cruz · #12 (**permalink**) 19/09/2004, 18:01

Hola eMx:

Veras, yo tambien tengo el mismo problema. Estoy agregando efectos javascript al demo de pagina web, y el script que buscas es este:

http://mx.geocities.com/ocielsanchez/PRUEBA_5.HTML

<HTML>

<HEAD>
<TITLE>prueba</TITLE>

<script type="text/javascript" language="JavaScript">

var explanation = new Array()

explanation[1] = new Array ("AC Amazing Comic Presenta: Tonamelt El Protector Oscuro. En esta página web encontraras toda la información acerca de este personaje y de otros futuros proyectos de nuestro sello editorial. También puedes disfrutar la información de una de las mejores bases de datos del mundo del entretenimiento.","+1",100,0,"white","blue",280);

explanation[2] = new Array ("AC Amazing Comic Present: Tonamelt The Dark Protector. In this pag web you find all the information about this personage and other future projects of our publishing seal. Also you can enjoy the information of one of the best data bases of world of the entertainment.","+1",100,0,"white","blue",270);

explanation[3] = new Array ("INFORMATION.","+3",100,0,"white","3DBBC4",250 );

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>

</HEAD>

<BODY bgcolor="#000000" text="#FFFFFF">
<bgsound src="e001[1].wav">

<TABLE BORDER="1" width="100%" BGCOLOR="BLACK">
<TR BGCOLOR="BLACK">

<TD ALIGN="LEFT" width="25%">
<CENTER>
<A HREF="http://www.tonamelt.com/Tona Ficha Esp.html" onMouseOver="display(1,event)" onMouseOut="hide_layer()">
<SPAN style="color:red; font-size:medium; font-family:Arial Black">
<font color="red">VERSION EN ESPAÑOL</font></SPAN></A>
</CENTER>
</TD>

<TD class="fhelp" align="center" width="30%">
<p align="center">
<A HREF="http://mx.geocities.com/tonamelt/index.html" onMouseOver="display(3,event)"
onMouseOut="hide_layer()">
<SPAN style="color:blue; font-size:x-large; font-family:MS Reference Serif"><B><FONT COLOR="blue">
TONAMELT</FONT></B></SPAN>
</A>
</p></TD>

<TD ALIGN="right" width="25%">
<CENTER>
<A HREF="http://www.tonamelt.com/Tona Ficha Ing.html" onMouseOver="display(2,event)" onMouseOut="hide_layer()">
<SPAN style="color:red; font-size:medium; font-family:Arial Black">
<font color="red">VERSION IN ENGLISH</font></SPAN></A>
</CENTER>
</TD>

</TR>
</TABLE>

<CENTER>
<div ID="output" STYLE="POSITION:absolute; TOP:0px; LEFT:0px; visibility: hidden">
</div>
</CENTER>

</BODY>
</HTML>

Alex Cruz · #13 (**permalink**) 19/09/2004, 18:41

Pero el problema que tuve con este script cuando lo agrege al demo de mi pagina es el siguiente:

El mensaje emergente que parace en el link que esta a la derecha del demo de mi pagina: "Version in English", se sale del cuadro de la pantalla.

Velo tu mismo:

http://mx.geocities.com/ocielsanchez/PRUEBA_3.HTML

El detalle esta el script que se pone al final de la programacion HTML, que le indica la posicion al mensaje emergente.

<div ID="output" STYLE="POSITION: absolute; TOP:0px; LEFT:0px; visibility: hidden">
</div>

Todo esta en el "POSITION: absolute", si uno escribe un "POSITION: center", sale peor el problema. Porque el mensaje emergente se posiciona abajo de todas las tablas y celdas de mi pagina. Estaba tratando de asignarle una POSITION al mensaje emergente por coordenadas, pero no he tenido exito en como redactar el script que le mande las coordenadas al POSITION. Lo que te recomendaria seria usar este javascript de los mensajes emergentes, en los links que estan a la izquierda de la pantalla. Porque el mensaje emergente siempre se posiciona a la derecha del link. y si tu pones el link a la derecha de la pantalla, el mensaje emergente se sale del cuadro de la pantalla.

Saludos!!!

raulgonzalez · #14 (**permalink**) 19/09/2004, 20:13

axy108 · #15 (**permalink**) 20/09/2004, 06:13

Hola eMx lo que puedes hacer es esto:

para lo de la tabla:

Código HTML:

<div id="caja" style="position: absolute; height: 20; width: 300;top: 10px;left: 100px; visibility:hidden">
//sustituye esta parte por el codigo de la tabla
<input type="text" name="caja_oculta">
//hasta aqui
</div>

para poner el otro enlace has lo siguiente

Código HTML:

<html>
<head>
<title>Caja Oculta</title>
<script language="javascript">
//Solo observa como modifique un poco la funcion al pasarle un parametro(el nombre de la capa a mostrar)
	function muestra_caja(capa){
		document.getElementById(capa).style.visibility = 'visible'
	}
</script>
</head>
<body>
<a href="#" onMouseOver="muestra_caja('caja1')">Pasa por aqui</a><br><br>
//Agrego el otro enlace y en la llamada le digo que capa quiereo que muestre
<a href="#" onMouseOver="muestra_caja('caja2')">Pasa por aqui</a>
<div id="caja1" style="position: absolute; height: 20; width: 300;top: 10px;left: 100px; visibility:hidden">
<input type="text" name="caja_oculta">
</div>
//creo la otra caja con el "id" llamado caja2
<div id="caja2" style="position: absolute; height: 20; width: 300;top: 110px;left: 100px; visibility:hidden">
<input type="text" name="caja_oculta">
</div>
</body>
</html>

y para seguir agregando mas solo agrega el link y el div que contiene los otros elementos y ponles id diferentes, los cuales tendras que enviar al mandar llamar a la funcion.

y para que se oculte solo has lo siguiente

Código HTML:

//agrega esta funcion
function oculta_capa(capa){
   document.getElementById(capa).style.visibility = 'hidden'
}
//y en cada en lace mandala llamar de la misma manera que la que la muestra pero ahora con el evento onMouseOut="", asi
<a href="#" onMouseOver="muestra_caja('caja2')" onMouseOut="oculta_capa('caja2')">Pasa por aqui</a>
// y asi con todos

Espero te sirva.

SALUDOS.

Alex Cruz · #16 (**permalink**) 21/09/2004, 02:36

Hola Raul Gonzalez:

Esta muy bien el javascript que pusistes. De hecho se parece a uno que estoy probando: http://mx.geocities.com/ocielsanchez/PRUEBA_7.HTML

El problema es que al poner:

<DIV ID="tickerbg" style="position:absolute;"></DIV>
<DIV ID="ticker" style="position:absolute;"></DIV>
<ul>

...abajo del BODY, la pagina queda mas ancha que la pantalla, las tablas no quedan centradas, y aparece la barra scroll de abajo.

Voy a probar tu javascript, a ver si hace lo mismo.

Como le haria para que el width-scroll no aumente el ancho de la pantalla al poner este javascript???

O la razon por la que se aumenta el width-scroll de la pagina con este javascript cuando hay una tabla con celdas???

Alex Cruz · #17 (**permalink**) 21/09/2004, 02:41

Hola eMx:

Este es el javascript tal y como lo copie, ojala te sirva...

<html>
<head>
<TITLE>Hipervínculo Informador</TITLE>

<script language=javaScript>
// width of the ticker
var tickerwidth=120
// height of the ticker
var tickerheight=100
// distance from the messagetext to the tickermarrgin (pixels)
var tickerpadding=5
// borderwidth of the ticker (pixels)
var borderwidth=2
// font-family
var fnt="Verdana"
// font-size of the text
var fntsize=8
// font-size of the last letter of the ticker
var fntsizelastletter=8
// font-color of the text
var fntcolor="FF8800"
// font-color of the last letter of the ticker
var fntcolorlastletter="FFFFFF"
// font-weight. Set a value between 1 to 9 to adjust the boldness
var fntweight=3
// backgroundcolor
var backgroundcolor="000000"
// standstill between the messages (microseconds)
var standstill=2000
// speed (a higher value will slow down the ticker)
var speed=40
// horizontal distance from the textlink to the popupbox (pixels)
var xdistance=50
// vertical distance from the textlink to the popupbox (pixels)
var ydistance=20
// Do not edit the variables below
var timer
var topposition=0
var leftposition=0
var x,y
var i_substring=0
var i_presubstring=0
var i_message=0
var message
var messagecontent=""
var messagebackground=""
var messagepresubstring=""
var messageaftersubstring=""
fntweight=fntweight*100
function getmessagebackground() {
messagebackground="<table border="+borderwidth+" width="+tickerwidth+" height="+tickerheight+" cellspacing=0 cellpadding=0><tr><td valign=top bgcolor='"+backgroundcolor+"'>"
messagebackground+=" </td></tr></table>"
}
function getmessagecontent() {
messagecontent="<table border=0 cellspacing=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top>"
messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"
messagecontent+="<font color='"+fntcolor+"'>"
messagecontent+=messagepresubstring
messagecontent+="</font>"
messagecontent+="</span>"
messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsizelastletter+"pt;font-weight:900'>"
messagecontent+="<font color='"+fntcolorlastletter+"'>"
messagecontent+=messageaftersubstring
messagecontent+="</font>"
messagecontent+="</span>"
messagecontent+="</td></tr></table>"
}
function showticker() {
if (i_substring<=message.length-1) {
i_substring++
i_presubstring=i_substring-1
if (i_presubstring<0) {i_presubstring=0}
messagepresubstring=message.substring(0,i_presubst ring)
messageaftersubstring=message.substring(i_presubst ring,i_substring)
getmessagecontent()
if (document.all) {
ticker.innerHTML=messagecontent
timer=setTimeout("showticker()", speed)
}
if (document.layers) {
document.ticker.document.write(messagecontent)
document.ticker.document.close()
timer=setTimeout("showticker()", speed)
}
}
else {
clearTimeout(timer)
}
}

function hideticker() {
clearTimeout(timer)
i_substring=0
i_presubstring=0
if (document.all) {
document.all.ticker.style.visibility="hidden"
document.all.tickerbg.style.visibility="hidden"
}
if (document.layers) {
document.ticker.visibility="hidden"
document.tickerbg.visibility="hidden"
}
}

function showmessage(linkmessage) {
getmessagebackground()
message=linkmessage

i_substring=0
i_presubstring=0
leftposition=x+xdistance
topposition=y+ydistance
if (document.all) {
document.all.ticker.style.posLeft=leftposition
document.all.ticker.style.posTop=topposition
document.all.tickerbg.style.posLeft=leftposition
document.all.tickerbg.style.posTop=topposition
tickerbg.innerHTML=messagebackground
document.all.ticker.style.visibility="visible"
document.all.tickerbg.style.visibility="visible"
showticker()
}
if (document.layers) {
document.ticker.left=leftposition
document.ticker.top=topposition
document.tickerbg.left=leftposition
document.tickerbg.top=topposition
document.tickerbg.document.write(messagebackground )
document.tickerbg.document.close()
document.ticker.visibility="visible"
document.tickerbg.visibility="visible"
showticker()
}
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// - End of JavaScript - -->
</script>

<body bgcolor=#FFFFFF>

<DIV ID="tickerbg" style="position:absolute;"></DIV>
<DIV ID="ticker" style="position:absolute;"></DIV>
<ul>

<font color="#000080"><b>MUESTRA</b></font>
<p>
<font size=1 face=Verdana><b>Mueva tu raton al hipervinculo de color rojo y vea
el impresionante efecto:<br>
<a href="http://www.ibm.com" onMouseOver="showmessage('Al sitio del poderoso IBM, E-business, Productos.')" onMouseOut="hideticker()" target="_blank"><font color=red>I.B.M.</font></a> |

<a href="http://www.microsoft.com" onMouseOver="showmessage('Al sitio de Bill Gates, mostrando su monopolio que sigue todavia.')" onMouseOut="hideticker()" target="_blank"><font color=red>MICROSOFT</font></a> |

<a href="http://www.netscape.com" onMouseOver="showmessage('Al sitio del Archienemigo de Microsoft, pero es mejor que el IE ya que es mas rapida y sin problemas.')" onMouseOut="hideticker()" target="_blank"><font color=red>NETSCAPE</font></a></b><br>
</font>
</p>

</ul>

</body>
</html>