Hacer Titles o Tooltip más chulos y bonitos

jjrolevio · #1 (**permalink**) 01/06/2004, 03:37

Buenos días a todos, espero me podais decir alguno, como podría realizar o hacer, 1 que al pasar el ratón por algún enlace (ya sea imágen o texto) me aparezca una explicación (Title o Tooltip) pero de una forma más chula y no como se muestra por defecto.
Lo que me gustaría es ver como puede salir un Texto de este tipo como por ejemplo, los de los enlaces de la página microsoft, (Que se despliegan textos cuando pasas por encima de ellos e incluso se mueven si tu mueves el ratón)

Un Saludo para todos, espero me podais ayudar.

Solrak · #2 (**permalink**) 01/06/2004, 04:07

Oye, cómo han cambiado los foros!!

Bueno, al lío!

Hace tiempo pillé esta función de la un script de karlankas o caricatos (no sé bien). La modifiqué un poco para que puedas meter todo el código html que quieras en le tooltip.

Mete el mensaje en la pseudopropiedad mensaje.

Un saludo a la moderadora!

Código HTML:

<html>
<head>
	<title>Ratón</title>
	<style>
	#ayuda{position:absolute;
	border:solid 1px black;
	background:#ffffcc;
	font:normal 10px/10px verdana;
	width:100px;
	height:20px;
	visibility:hidden;
	padding:3px;
	}</style>
	
<script>
	
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorX, coorY, iniX, iniY;
if (ns6) document.addEventListener("mousemove", mouseMove, true)
if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}
function mouseMove(e)
{
	if (ns4||ns6)	{coorX = e.pageX; coorY = e.pageY;}
	if (ie4)	{coorX = event.x; coorY = event.y;}
	return true;
}


function ocultar(){
aquello=null;
document.getElementById('ayuda').style.visibility="hidden";
}
var aquello=null;
function mostrar(esto){
texto=esto.mensaje;
if(esto!=aquello){
document.getElementById('ayuda').innerHTML="<marquee>"+texto+"</marquee>";}
aquello=esto
if(!ie4){
document.getElementById("ayuda").style.top = coorY + 10;
document.getElementById("ayuda").style.left = coorX + 10;}
else{
document.getElementById('ayuda').style.posTop=event.clientY;
document.getElementById('ayuda').style.posLeft=event.clientX+10;
}
document.getElementById('ayuda').style.visibility="visible";
}


	</script>
</head>

<body>
<a 
href="#" 
onmousemove="mostrar(this)" onmouseout="ocultar()" 
mensaje="Pincha aquí para ver las cosas que te puedo contar">
Cosas que te puedo contar</a>
<div id="ayuda"></div>

</body>
</html>

caricatos · #3 (**permalink**) 01/06/2004, 17:30

Hola a todos:

Solrak: Parece que tienes buena memoria...

, de hecho yo sigo referenciando la página original en bastantes ocasiones: http://www.pepemolina.com/coordes/coordes.html ... ahí se puede ver el efecto original, supongo que el retoque de Solrak debe quedar bien.

Creo que era con motivo del PAIs (cosas de antaño en los foros)

Saludos