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

Publicado el 23 de Octubre del 2007 por Administrador (686 códigos)
30.119 visualizaciones desde el 23 de Octubre del 2007
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(2)

Publicado el 23 de Octubre del 2007gráfica de visualizaciones de la versión: Versión 1
30.120 visualizaciones desde el 23 de Octubre del 2007
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 (2)

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
FranProg
7 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Iba a escribir la solucion de los px. Me he llevado 1 hora pa darme cuenta. Bien escrito!
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/s1584