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

Imágen de perfil
Val: 587
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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


CSS

Publicado el 28 de Febrero del 2008 por Xavi (533 códigos)
17.547 visualizaciones desde el 28 de Febrero del 2008
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
17.548 visualizaciones desde el 28 de Febrero 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
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
3 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...
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/s1638