Código de CSS - Mostrar un div en la posición del ratón

Imágen de perfil

Mostrar un div en la posición del ratóngráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 23 de Octubre del 2007 por Administrador
23.473 visualizaciones desde el 23 de Octubre del 2007. Una media de 56 por semana
Código que muestra como visualizar un div en la posición del ratón en el momento que se pulsa sobre un enlace.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 23 de Octubre del 2007gráfica de visualizaciones de la versión: Versión 1
23.474 visualizaciones desde el 23 de Octubre del 2007. Una media de 56 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 7, Firefox 2.0 y Opera 9.20-->
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
 
<title>Mostrar un div en la posición del ratón</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;
	width:220px;
	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 en la posición del ratón</h1>
<p><a href='#' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.</a></p>
 
<!--mostramos el enlace para pulsar y visualizar el div-->
<p style='margin-top:100px;'><a href='#' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el enlace, se mostrara la capa.</a></p>
 
<!--
Generamos el div con tres eventos del mouse:
	onmouseout = en el momento que el raton desaparezca del div,
	 se escondera el div
	onclick = si se realiza unclick en el div, se escondera el div
	onmouseover = miestras el raton este encima del div, se indica
	 que se muestre el div. No se si es del todo necesaria esta
	 casilla...
-->
<div id="flotante" onmouseout="this.style.display='none'"  onclick="this.style.display='none'"  onmouseover="this.style.display='block'">
	<a href="http://www.lawebdelprogramador.com" target="_blank">Código de La Web del Programador</a>
	<br /><span id="posicion"></span>
</div>
 
</body>
</html>



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

David
19 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
Muchas Gracias por el aporte. Funciona perfecto, lo probé con Internet Explore 11 funciona correctamente y Google Chrome para que funcione deben sustituir
Estas lineas
document.getElementById('flotante').style.top = (tempY+margin);
document.getElementById('flotante').style.left = (tempX+margin);
por estas
document.getElementById('flotante').style.top = (tempY+margin + 'px');
document.getElementById('flotante').style.left = (tempX+margin) + 'px');
Responder

Comentar la versión: Versión 1

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

http://lwp-l.com/s1584