mostrar definicion de una palabra al pasar cursor

toiaqui · #1 (**permalink**) 06/03/2007, 14:30

hola

Alguien me puede decir si es posible crear mediante css, la definicion de una palabra?

es decir, que en el texto en general, haya una palabra en diferente color, y que al pasar el raton por encima o al hacer clik sobre ella, se muestre una ventanita con la definicion de la misma; Pero que no sea un pop up

saludos

JavierB · #2 (**permalink**) 06/03/2007, 15:31

Hola toiaqui

Puedes utilizar la propiedad title:

<span title="Definición de palabra">palabra</span>

o utilizar el código que explican en este enlace:

http://meyerweb.com/eric/css/edge/popups/demo.html

Saludos,

Mikmoro · #3 (**permalink**) 06/03/2007, 16:22

También puedes ver el ejemplo que hice ayer para una consulta parecida, que usa la misma técnica:

http://www.araudi.net/tooltipCSS.html

EDITADO para corregir el enlace.

Mikel.

toiaqui · #4 (**permalink**) 06/03/2007, 18:25

mikmoro, tu enlace me va a un sitio no encontrado

ElJavista · #5 (**permalink**) 06/03/2007, 20:12

La Solución es algo ineficiente según los requerimientos que pidió el forista que inició este tema. Ni siquiera es una solución Usando CSS, lo que visto el participante será un bocadillo no una ventanita, no un bocadillo que tarde algo en aparecer. Bien, hay solución??? La hay, pero no es CSS, sino en JavaScript. y cual es? Es esta.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Titulo</title>
<script language="JavaScript">
function capa (ca, co) {
var e = event;
var cont = "<table bgcolor=\"#DBFFFF\"><td>"+co+"</table>";

var cap = document.getElementById(ca);
{
cap.style.left = e.pageX ? pageXOffset + e.clientX: document.body.scrollLeft + e.x;
cap.style.top = e.pageY ? pageYOffset + e.clientY : document.body.scrollTop + e.y - 30;
cap.style.visibility = 'visible';
cap.innerHTML = cont;
}
}
function closeT (ca) {
var cap = document.getElementById(ca);
if (cap.style.visibility) cap.style.visibility = "hidden";
}

</script>
<style type="text/css">
#cap {
visibility: hidden;
position: absolute;
}
</style>
<div id="cap"></div>
</head>
<body>
<a href="#" onMouseover= "capa('cap', 'Definicion: todo lo que quieras')" onMouseOut="closeT('cap')">Palabra</a>
</body>
</html>

Mikmoro · #6 (**permalink**) 07/03/2007, 00:09

Cita:

Iniciado por toiaqui

mikmoro, tu enlace me va a un sitio no encontrado

Disculpa, es cierto. Ya está arreglado. Copie el enlace de otro hilo donde lo puse y se copió ya abreviado.

Mikel.

Mikmoro · #7 (**permalink**) 07/03/2007, 01:23

Cita:

Iniciado por ElJavista

La Solución es algo ineficiente según los requerimientos que pidió el forista que inició este tema. Ni siquiera es una solución Usando CSS, lo que visto el participante será un bocadillo no una ventanita, no un bocadillo que tarde algo en aparecer.

Hola, ElJavista.
Veo a qué te refieres, pero era porque fallaba mi enlace (que ya está arreglado), porque mi ejemplo creo que se parece más a lo que pedía, y es completamente CSS.

De todas maneras, creo que algo falla en tu script.

Mikel.

toiaqui · #8 (**permalink**) 07/03/2007, 15:55

mikmoro..perfecto..es lo que necesitaba

Gracias tambien a ELjavista, si bien no entiendo del todo el javascrip, pero gracias a ambos por la ayuda

saludos