Pq no me muetra la capa¿!

Hola a todos, necesito que me ayudeis, no me muestra la capa y no se pq!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
scrollbar-arrow-color: #000000; //para cambiar de color la barra de desplazamiento
scrollbar-base-color: "background-color: transparent";
scrollbar-dark-shadow-color: "background-color: transparent";
scrollbar-track-color: "background-color: transparent";
scrollbar-face-color:"background-color: transparent";
scrollbar-shadow-color:"background-color: transparent";
scrollbar-highlight-color: "background-color: transparent";
scrollbar-3d-light-color: "background-color: transparent";
}
</style>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<script language="Javascript">
display = (navigator.appName == "Microsoft Internet Explorer") ? "block" : "table-row" ;
function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.display=display;}
function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.display="none";}
</script>
</head>
<body background="../../imagenes/FondoderechaEventos.png" onLoad="MM_showHideLayers('Layer3','','show')">
<div id="Layer1" style="position:absolute; left:100px; top:51px; width:98px; height:149px; " align="center">
<img src="../../imagenes/mapas/MapaEventosGral.jpg" width="418" height="520" border="0" >
</div>
<div id="capa1" style="position:absolute;width:100px;height:26px;top:167px;left:247px;" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"></div>
<div id="capa2" style="position:absolute;width:100;height:100;top:112px;left:556px;display:none">prueba</div>
</body>
</html>

1 respuesta

Respuesta
1
Prueba a cambiar tu funcion "mostrar(nombreCapa)" por lo siguiente:
function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.display='';}
nada, me sigue sin funcionar. llevo asi casi un mes y nadie me sabe decir pq no funicona.
esto es mu mu mu raro.
Te voy a pasar de nuevo el codigo a ver si ves algo mal.
Muchas gracias
<html>
<head>
<style type="text/css">
body {
scrollbar-arrow-color: #000000; //para cambiar de color la barra de desplazamiento
scrollbar-base-color: "background-color: transparent";
scrollbar-dark-shadow-color: "background-color: transparent";
scrollbar-track-color: "background-color: transparent";
scrollbar-face-color:"background-color: transparent";
scrollbar-shadow-color:"background-color: transparent";
scrollbar-highlight-color: "background-color: transparent";
scrollbar-3d-light-color: "background-color: transparent";
}
</style>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<script language="Javascript">
display = (navigator.appName == "Microsoft Internet Explorer") ? "block" : "table-row" ;
function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.display='';}
function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.display="none";}
</script>
</head>
<body background="../../imagenes/FondoderechaEventos.jpg" onLoad="MM_showHideLayers('Layer3','','show')">
<div id="Layer1" style="position:absolute; left:100px; top:51px; width:98px; height:149px; " align="center">
<img src="../../imagenes/mapas/MapaEventosGral.jpg" width="418" height="520" border="0" >
</div>
<div id="capa1" style="position:absolute;width:100px;height:26px;top:167px;left:247px;" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"></div>
<div id="capa2" style="position:absolute;width:100;height:100;top:112px;left:556px;display:none">prueba</div>
</body>
</html>
Vamos a probar una cosa. Quítale todos los style a "capa2". Déjalo así:
<div id="capa2">prueba</div>
Ahora te tendrá que aparecer sí o sí. Cuando el ratón pase sobre "capa1" y se vaya deberá desaparecer, y cuando vuelvas a ponerte sobre "capa1" de nuevo debería volver a aparecer.
Si se comporta de ese modo, trabajaremos por esa vía.
jjajajaja, nada de nada.
Con este codigo lo  que me hace es que ahora me pone todo el rato en la pantalla la palabra "prueba". pero no desaparece cuando me pongo sobre capa1. me sigue dado un error de javascript.
Te paso otra vez el codigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<script>
display = (navigator.appName == "Microsoft Internet Explorer") ? "block" : "table-row" ;
function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.display='';}
function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.display="none";}
</script>
</head>
<body background="../../imagenes/FondoderechaEventos.jpg">
<div style="position:absolute; left:100px; top:51px; width:98px; height:149px; " align="center">
<img src="../../imagenes/mapas/MapaEventosGral.jpg" width="418" height="520" border="0" >
</div>
<div style="position:absolute;width:100px;height:26px;top:167px;left:247px;"></div>
<div >prueba</div>
</body>
</html>
En último ejemplo que me has puesto, los divs no tienen el atributo "id". Si no lo pones, seguro que no funciona...
Confírmame que lo tienes puesto ;)
si si que los tengo puesto, no se pq no lo habra copiado
<div id="capa1" style="position:absolute;width:100px;height:26px;top:167px;left:247px;" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"></div>
<div id="capa2" >prueba</div>
Ok, pues empecemos con las pruebas. Cambia tu función "mostrar" por la siguiente:
function mostrar(nombreCapa){
alert(nombreCapa);
var capa = document.getElementById(nombreCapa);
alert(capa);
alert(capa.style);
alert(capa.style.display);
capa.style.display='';

Y dime qué resuletados te dan los 4 alert.
no me hace naca el script, pero pq en fireox me funciona y en IE no???
Poniendo el script que te mandé, ¿el IE no lanza ningún alert?
¿Cuál es tu versión del IE?
Al menos debería mostrarte los alerts, porque si no lo hace debemos atacar el problema por otra parte.
ahora mismo lo estoy probando con IE7, te paso el codigo otra vez a ver
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<script language="Javascript">
display = (navigator.appName == "Microsoft Internet Explorer") ? "block" : "table-row" ;
function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.display=display;}
function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.display="none";}
</script>
</head>
<body background="../../imagenes/FondoderechaEventos.jpg" onLoad="MM_showHideLayers('Layer3','','show')">
<div id="Layer1" style="position:absolute; left:100px; top:51px; width:98px; height:149px; " align="center">
<img src="../../imagenes/mapas/MapaEventosGral.jpg" width="418" height="520" border="0" >
</div>
<div id="capa1" style="position:absolute;width:100px;height:26px;top:167px;left:247px;" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"></div>
<div id="capa2" style="position:absolute;width:100;height:100;top:112px;left:556px;display:none">prueba</div>
</body>
</html>
OK, entonces vamos a hacer una cosa totalmente diferente a la que estás intentando. Vamos a usar "map" y "area".
Sigue los siguientes pasos:
PASO 1
Al elemento "img" le vas a añadir un atributo "usermap", de forma que quede así:
<img src="../../imagenes/mapas/MapaEventosGral.jpg" width="418" height="520" border="0" usemap="#mymap">
PASO 2
Elimina completamente el div con id "capa1". Ya no nos hace falta.
PASO 3
Añade lo siguiente allá donde estaba el div que acabas de eliminar.
<map name="mymap">
<area shape ="rect" coords ="0,0,82,126"
     onmouseout="ocultar('capa2')" onMouseOver="mostrar('capa2')" />
</map>
<map name="capa3">
<area shape ="rect" coords ="0,0,82,126"     onmouseout="ocultar('capa2')" onMouseOver="mostrar('capa2')" />
</map>
PASO 4
Cambia las coords del area según te convenga. Si te hacen falta más area's las puedes añadir dentro del elemento "map".
muchiiiiiiiiiiiisimas gracias de verdad, no se como agradecertelo, este tema me estaba volviendo loca y quitandome mucho tiempo.
de verdad, muchiiiisimas gracias

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas