Div Desplegable

[polpolpol]

Buenas amigos del foro!!

Aqui estoy con una duda!!

Tengo una imagen y quiero aparesca un div por debajo de esta cuando el mouse este sobre la imagen.

Código HTML:

<div id="imagen">
<img src="Green day.jpg"  onmouseover="document.getElementById('texto').style.display=''; " onmouseout="document.getElementById('texto').style.display='none';">
</div>
 
<div id="texto" style="display:none;  ">
<h1>Esto es una prueba</h1>
</div>
 
<h1>Que no se mueva esto</h1>
 

Hasta aqui bien pero lo que quiero es que no me deforme la pagina al poner el mouse sobre la imagen y se despliegue el div.

Asi como se muestra en el menu superior de esta web.

Desde ahora gracias por la atencion al mensaje y a sus sugerencias!!

[macalix]

parece que no has tenido suerte hasta hora con los colavoradores, dejame ver si te puedo ayudar pue yo uso un codigo para eso, que en mi caso es un menu desplegable, que viene siendo lo mismo.

funcion con javascript:

mira estos son los divs:

Código:

<div id="capaPrincipal">
                <a title="Atletas Representados" href="representados.php" onmouseover="muestra('menu1');" onmouseout="oculta('menu1');" class="barra3">Representados</a>
                <div id="menu1" onmouseover="muestra('menu1');" onmouseout="oculta('menu1');">
                 <br/>
                 <a title="Tecnicos Representados" href="cuerpo_tecnico.php" class="barra2" target="_self">Cuerpo Tecnico</a><br/>
                 <a title="Porteros Representados" href="porteros.php" class="barra2" target="_self">Porteros</a><br/>
                 <a title="Defensas Representados" href="defensas.php" class="barra2" target="_self">Defensas</a><br/>
                 <a title="Medio Campistas Representados" href="medio_campistas.php" class="barra2" target="_self">Medio Campistas</a><br/>
                 <a title="Delanteros Representados" href="delanteros.php" class="barra2" target="_self">Delanteros</a><br/>
                 <br/>
                </div></div>

y este es codigo javascrip:

Código:

<script type="text/javascript" language="javascript">
function oculta (capa) {
   document.getElementById(capa).style.visibility="hidden";
}

function muestra (capa) {
   document.getElementById(capa).style.visibility="visible";
} 
</script>

Como ves es muy simple, tu puedes adactarlo a tu necesidad, espero tesirva.

[polpolpol]

Hola macalix!!

Esto es muy bueno, no es exactamente lo que queria pero me sirve por ahora!!

si ves el contenido de el menu por ejemplo donde dice "preferencias" se despliega un menu por encima de todo sin mover nada en la pagina!!

En el codigo que puse al principio hace que aparesca la capa, pero me mueve todo lo demas hacia abajo!!

Pero por el momento esto me ayuda por ke tengo un des-orden en mi pagina...

Y esto me ayuda GRACIAS!!

[ArturoGallegos]

si se tiene que mostrar el div al pasar el cursor sobre tu imagen quizás podrías hacerlo con CSS no necesariamente con javascript

pero bueno lo que te hace falta para que se muestre sin que afecte al resto del contenido (que lo desplace) es aplicar -> position:absolute;

[polpolpol]

Efectivamente Ag666 eso le faltava ya quedo justo como lo queria!!

Y aki dejo el codigo completo por si alguien lo ocupa en el futuro!!
muestra un div al pasar el mouse por una imagen y la oculta al
quitar el mouse de la imagen.

Y ahora no mueve el contenido de la pagina al aparecer!!

Código HTML:

<div id="imagen">
   
      <img src="Green day.jpg"  onmouseover="document.getElementById('texto').style.display=' '; document.getElementById('texto').style.position='absolute';" onmouseout="document.getElementById('texto').style.display='none';">
   
      </div>
   
       
   
      <div id="texto" style="display:none;  ">
   
      <h1>Esto es una prueba</h1>
   
      </div>
   
       
   
      <h1>Que no se mueva esto</h1>
 

Muchas gracias por la ayuda les dejo un punto de karma por ke ambas respuesta me dieron un poco mas de conocimiento que es lo que se busca aqui ( creo )!!

[ArturoGallegos]

jeje pues a mi no me funciono del todo ese código no se porque que bueno fue una prueba rápida ya voy de salida...

lo que si, es que para dicho efecto no requieres javascript basta con un poco de CSS... y en mi opinión es mejor... el script puedes colocarlo aparte y bajo una condicional para IE6 si es que te interesa darle soporte de lo contrario se puede desechar

te dejo un ejemplo rápido de como seria en CSS

Código CSS:

#texto{display:none;background:#FFFF99;border:1px #FFCC00 solid;position:absolute;padding:5px;}
#imagen:hover + #texto,#texto:hover{display:block;}
 

Código HTML:

<div id="imagen">
    <img src="Green day.jpg" alt="Imagen Demo"/>
</div>
<div id="texto">
    <p>Esto es una prueba</p><p>Esto es una prueba</p><p>Esto es una prueba</p>
</div>
<h1>Que no se mueva esto</h1>
 

funciona desde IE7 en adelante para IE6 existe un problema pero igual lo podemos solventar con javascript dentro de una condicional o cambiamos la estructura metiendo segundo div dentro del primero y andaría en todas las versiones de IE

Código CSS:

#texto{display:none;background:#FFFF99;border:1px #FFCC00 solid;position:absolute;padding:5px;}
#imagen:hover #texto,#texto:hover{display:block;}
 

Código HTML:

<div id="imagen">
    <img src="Green day.jpg" alt="Imagen Demo"/>
    <div id="texto">
        <p>Esto es una prueba</p><p>Esto es una prueba</p><p>Esto es una prueba</p>
    </div>
</div>
<h1>Que no se mueva esto</h1>