Código de CSS - Mover un div al pasar el raton por encima de un enlace o tex

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 15 de Enero del 2008gráfica de visualizaciones de la versión: Versión 1
36.637 visualizaciones desde el 15 de Enero del 2008
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!--Este codigo ha sido probado con IE 5,6 y 7, Firefox 2.0 y Opera 9.20 y Safari 2-->
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
 
<title>Mostrar un div al pasar el raton por encima de un enlace o texto</title>
 
<style type="text/css">
/*order ok: link,visited,hover,active*/
A:link, A:visited, A:hover, A:active{color:#0000ff;}
 
#flotante
{
	position: absolute;
	display:none;
	font-family:Arial;
	font-size:0.8em;
	border:1px solid #808080;
	background-color:#f1f1f1;
}
</style>
 
<script type="text/javascript">
<!--
//Funcion que muestra el div en la posicion del mouse
function showdiv(event)
{
	//determina un margen de pixels del div al raton
	margin=5;

	//La variable IE determina si estamos utilizando IE
	var IE = document.all?true:false;
	//Si no utilizamos IE capturamos el evento del mouse
	if (!IE) document.captureEvents(Event.MOUSEMOVE)

	var tempX = 0;
	var tempY = 0;

	if(IE)
	{ //para IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	}else{ //para netscape
		tempX = event.pageX;
		tempY = event.pageY;
	}
	if (tempX < 0){tempX = 0;}
	if (tempY < 0){tempY = 0;}

	//modificamos el valor del id "posicion" para indicar la posicion del mouse
	document.getElementById('posicion').innerHTML="PosX = "+tempX+" | PosY = "+tempY;

	document.getElementById('flotante').style.top = (tempY+margin);
	document.getElementById('flotante').style.left = (tempX+margin);
	document.getElementById('flotante').style.display='block';
	return;
}
-->
</script>
 
</head>
 
<body>
<h1>Mostrar un div al pasar el raton por encima de un enlace o texto</h1>
 
<!--
Generamos el enlace y texto (span) con tres eventos del mouse:
	onmouseout = en el momento que el raton desaparezca del div,
	 se escondera el div
	onmousemove = miestras el raton se mueva por encima del div, se indica
	 que se muestre el div.
	onmouseover = miestras el raton este encima del div, se indica
	 que se muestre el div.
-->
<p><a href='#' onmouseover="showdiv(event);" onmousemove="showdiv(event);" onmouseout="javascript:document.getElementById('flotante').style.display='none';">Al pasar por encima veras el mensaje</a></p>
 
<p style='margin-top:100px;'><span onmouseover="showdiv(event);" onmousemove="showdiv(event);" onmouseout="javascript:document.getElementById('flotante').style.display='none';">Al pasar por encima veras el mensaje</span></p>
 
<div id="flotante">
	Código de La Web del Programador
	<br />http://www.lawebdelprogramador.com
	<br /><span id="posicion"></span>
</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

juan
20 de Abril del 2011
estrellaestrellaestrellaestrellaestrella
gracias por tu trabajo y ofrecer tus conocimientos a los demas
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1624