L
LuisDavid
Buen dia grupo, tengo este problema, espero contar con su ayuda:
tengo un DIV flotante que quiero mostrar segun recorra el SPAN, usando
la funcion getElementsByTagName("span");
el codigo completo es este:
------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>mostrar div flotante</title>
<script language="JavaScript" type="text/javascript">
<!--
//Este codigo funciona con IE 5,6 y 7 y Opera 8 y 9.5
// NO funciona con Firefox 2 y 3; Safari 2 y 3.5; Netscape 8 y 9
// Quisiera que funcione con la mayoria de navegadores, please!!!
window.onload = function() {
var elDiv = document.getElementById("seccion");
var elSpan = elDiv.getElementsByTagName("span");
for(var i=0; i<elSpan.length; i++) {
if(elSpan.className == "especial") {
elSpan.onmousemove = resalta;
elSpan.onmouseout = resalta;
}
}
}
function resalta(event) {
var evento = event || window.event;
var margin = 10;
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){
tempX = evento.clientX + document.body.scrollLeft;
tempY = evento.clientY + document.body.scrollTop;
} else{
tempX = evento.pageX;
tempY = evento.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
switch(evento.type) {
case 'mousemove':
document.getElementById('posicion').innerHTML="significado del texto
citado...";
document.getElementById('flotante').style.top = (tempY+margin);
document.getElementById('flotante').style.left = (tempX+margin);
document.getElementById('flotante').style.display = 'block';
break;
case 'mouseout':
document.getElementById('flotante').style.display = 'none';
break;
}
}
-->
</script>
<style type="text/css">
<!--
..especial {color: #FF0000; cursor
ointer;}
#flotante {position: absolute; display:none; font-size:0.8em; font-
family:Arial; border:1px solid #808080; background-color:#f1f1f1;}
-->
</style>
</head>
<body>
<!--La idea es NO poner en el span onMouseMove onMouseOut (no mezclar
HTML y JS) -->
<div id="flotante"><span id="posicion"></span></div>
<div id="seccion" style="width:300px; height:60px; text-
align:center;">
" <span class="especial">Desnuda</span> eres tan simple como una de
tus manos,
lisa, terrestre, mínima, redonda, <span class="especial">transparente</
span>,
tienes líneas de luna,caminos de manzana,
desnuda eres delgada como el trigo desnudo.
Desnuda eres azul como la <span class="especial">noche</span> en Cuba,
tienes enredaderas y estrellas en el
Desnuda eres enorme y amarilla
como el <span class="especial">verano</span> en una iglesia de oro."</
div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
Ahora nadando por internet encontre un codigo muy parecido:
-------------------------------------------------------------------------------------------------------------------------------------
<!--Este codigo funciona con IE 5,6 y 7 y Firefox 2 y 3; Opera 8 y
9.5; Safari 2 y 3.5; Netscape 8 y 9-->
<html>
<head>
<title>Mostrar un div al pasar el raton por encima de un enlace o
texto</title>
<style type="text/css">
#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=10;
//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>
<!--Este codigo MEZCLA el HTML con JS en el SPAN; el problema es que
pasaria si tengo un numero grande de span (200 a mas por ejemplo),
hacerlo asi resulta tedioso, y seria nada estético, porfavor una ayuda
Grupo. -->
<span style="cursorointer;" onmouseover="showdiv(event);"
onmousemove="showdiv(event);"
onmouseout="javascript:document.getElementById('flotante').style.display='none';">Al
pasar por encima veras el mensaje</span>
<div id="flotante"><span id="posicion"></span>
</div>
</body>
</html>
tengo un DIV flotante que quiero mostrar segun recorra el SPAN, usando
la funcion getElementsByTagName("span");
el codigo completo es este:
------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>mostrar div flotante</title>
<script language="JavaScript" type="text/javascript">
<!--
//Este codigo funciona con IE 5,6 y 7 y Opera 8 y 9.5
// NO funciona con Firefox 2 y 3; Safari 2 y 3.5; Netscape 8 y 9
// Quisiera que funcione con la mayoria de navegadores, please!!!
window.onload = function() {
var elDiv = document.getElementById("seccion");
var elSpan = elDiv.getElementsByTagName("span");
for(var i=0; i<elSpan.length; i++) {
if(elSpan.className == "especial") {
elSpan.onmousemove = resalta;
elSpan.onmouseout = resalta;
}
}
}
function resalta(event) {
var evento = event || window.event;
var margin = 10;
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){
tempX = evento.clientX + document.body.scrollLeft;
tempY = evento.clientY + document.body.scrollTop;
} else{
tempX = evento.pageX;
tempY = evento.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
switch(evento.type) {
case 'mousemove':
document.getElementById('posicion').innerHTML="significado del texto
citado...";
document.getElementById('flotante').style.top = (tempY+margin);
document.getElementById('flotante').style.left = (tempX+margin);
document.getElementById('flotante').style.display = 'block';
break;
case 'mouseout':
document.getElementById('flotante').style.display = 'none';
break;
}
}
-->
</script>
<style type="text/css">
<!--
..especial {color: #FF0000; cursor
ointer;}#flotante {position: absolute; display:none; font-size:0.8em; font-
family:Arial; border:1px solid #808080; background-color:#f1f1f1;}
-->
</style>
</head>
<body>
<!--La idea es NO poner en el span onMouseMove onMouseOut (no mezclar
HTML y JS) -->
<div id="flotante"><span id="posicion"></span></div>
<div id="seccion" style="width:300px; height:60px; text-
align:center;">
" <span class="especial">Desnuda</span> eres tan simple como una de
tus manos,
lisa, terrestre, mínima, redonda, <span class="especial">transparente</
span>,
tienes líneas de luna,caminos de manzana,
desnuda eres delgada como el trigo desnudo.
Desnuda eres azul como la <span class="especial">noche</span> en Cuba,
tienes enredaderas y estrellas en el
Desnuda eres enorme y amarilla
como el <span class="especial">verano</span> en una iglesia de oro."</
div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
Ahora nadando por internet encontre un codigo muy parecido:
-------------------------------------------------------------------------------------------------------------------------------------
<!--Este codigo funciona con IE 5,6 y 7 y Firefox 2 y 3; Opera 8 y
9.5; Safari 2 y 3.5; Netscape 8 y 9-->
<html>
<head>
<title>Mostrar un div al pasar el raton por encima de un enlace o
texto</title>
<style type="text/css">
#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=10;
//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>
<!--Este codigo MEZCLA el HTML con JS en el SPAN; el problema es que
pasaria si tengo un numero grande de span (200 a mas por ejemplo),
hacerlo asi resulta tedioso, y seria nada estético, porfavor una ayuda
Grupo. -->
<span style="cursor
ointer;" onmouseover="showdiv(event);"onmousemove="showdiv(event);"
onmouseout="javascript:document.getElementById('flotante').style.display='none';">Al
pasar por encima veras el mensaje</span>
<div id="flotante"><span id="posicion"></span>
</div>
</body>
</html>