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

Imágen de perfil

Mover un div al pasar el raton por encima de un enlace o texgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 15 de Enero del 2008 por Xavi
29.092 visualizaciones desde el 15 de Enero del 2008. Una media de 63 por semana
Código que muestra el movimiento de un div mientras pasa por encima de un texto o un div.
Probado con IE 5, 6, 7, Firefox 2.0, Opera 9.20 y Safari 2

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 15 de Enero del 2008gráfica de visualizaciones de la versión: Versión 1
29.093 visualizaciones desde el 15 de Enero del 2008. Una media de 63 por semana
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

http://lwp-l.com/s1624