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

Imágen de perfil

Mostrar un div en la posición del ratón con DOCTYPE 4.01gráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 28 de Febrero del 2008 por Xavi
16.601 visualizaciones desde el 28 de Febrero del 2008. Una media de 42 por semana
Código que muestra como visualizar un div utilizando DOCTYPE 4.01 en la posición del ratón en el momento que se pulsa sobre un enlace o texto.
probado con IE 6, 7, Firefox 2.0, Safari 3.0 y Opera 9.26

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 28 de Febrero del 2008gráfica de visualizaciones de la versión: Versión 1
16.602 visualizaciones desde el 28 de Febrero del 2008. Una media de 42 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--Este codigo ha sido probado con IE 7, Firefox 2.0, Safari 3.0 y Opera 9.26-->
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
 
<title>Mostrar un div en la posición del ratón con DOCTYPE 4.01</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;

	var tempX = 0;
	var tempY = 0;

	//document.body.clientHeight = devuelve la altura del body
	if(IE)
	{ //para IE
		//event.y|event.clientY = devuelve la posicion en relacion a la parte superior visible del navegador
		//event.screenY = devuelve la posicion del cursor en relaciona la parte superior de la pantalla
		//event.offsetY = devuelve la posicion del mouse en relacion a la posicion superior de la caja donde se ha pulsado
		tempX = event.x
		tempY = event.y
		if(window.pageYOffset){
			tempY=(tempY+window.pageYOffset);
			tempX=(tempX+window.pageXOffset);
		}else{
			tempY=(tempY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
			tempX=(tempX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));
		}
	}else{ //para netscape
		//window.pageYOffset = devuelve el tamaño en pixels de la parte superior no visible (scroll) de la pagina
		document.captureEvents(Event.MOUSEMOVE);
		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;

	//window.alert(event.pageYOffset+" - "+document.body.pageYOffset+" - "+screen.pageYOffset+" - "+this.pageYOffset+" - "+window.pageYOffset);

	document.getElementById('flotante').style.top = (tempY+margin)+"px";
	document.getElementById('flotante').style.left = (tempX+margin)+"px";
	document.getElementById('flotante').style.display='block';
	return;
}
-->
</script>
 
</head>
 
<body>
<h1>Mostrar un div en la posición del ratón con DOCTYPE 4.01</h1>
 
<p onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el texto, se mostrara la capa.</p>
 
<!--mostramos el enlace para pulsar y visualizar el div-->
<p style='margin-top:100px;' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el texto, se mostrara la capa.</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)

Gabi
03 de Julio del 2009
estrellaestrellaestrellaestrellaestrella
¿y como hago si quiero que cada div que se muestra en cada click contenga info distinta??¿que no sea siempre el id=flotante??
Responder

Comentar la versión: Versión 1

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

http://lwp-l.com/s1638