Ventanas emergentes con forma

[Pafate]

Alguien sabe como hacer una especie de pop up como esta aca (clicken algun nombre azul abajo de MAIN DECK y se abrira una ventana a la par con un recuadro que no es el comun)

Código:

http://magic.tcgplayer.com/db/deck.asp?deck_id=815263

Si tengo que hacerlo un estilo ese, lo haria tranquila y facil con onmouseover y onmouseout... usando window.open y window.close...
pero me daria una ventana en otro lugar, no como esa y con el formato de una ventana

[Perr0]

esos se llaman tooltips

para ello necesitas:
- un div.
- una imagen con la forma que necesitas, cargada como backgroun-image en el div con los respectivos height ywidth.
- tenerlo con un z-index:9999 por ejemplo.
- con el onmouseover y onmouseout puedes crearlo y quitarlo con DOM o simplemente cargarlo con display:none y luego jugar con display:block y none.

se me debe haber olvidado algo, peor en realidad es mas simple,
ojo, el ajax que sale en algunos ejemplos no es completamente necesario.

aqui un ejemplo

y como usarlo

aquí estan las imagenes usadas para este tooltips. descargar.

es mas entretenido desarrollarlo pero tu verás.

salu2

[Pafate]

Gracias por la respuesta. ahi te di karmita

[Pafate]

Iniciado por Perr0

esos se llaman tooltips

para ello necesitas:
- un div.
- una imagen con la forma que necesitas, cargada como backgroun-image en el div con los respectivos height ywidth.
- tenerlo con un z-index:9999 por ejemplo.
- con el onmouseover y onmouseout puedes crearlo y quitarlo con DOM o simplemente cargarlo con display:none y luego jugar con display:block y none.

se me debe haber olvidado algo, peor en realidad es mas simple,
ojo, el ajax que sale en algunos ejemplos no es completamente necesario.

aqui un ejemplo

y como usarlo

aquí estan las imagenes usadas para este tooltips. descargar.

es mas entretenido desarrollarlo pero tu verás.

salu2

No me funciona, nose por que...
EDITO:
No me funciona ponerle un video de youtube al tooltip

Código:

<a href="#" onmouseover="showToolTip(event,'
<iframe title="YouTube video player" width="480" height="390" src="" frameborder="0" allowfullscreen></iframe>');return false"
 onmouseout="hideToolTip()"><img src="templates/juice/images/2e_juice_04.gif" 
border="0" alt="" /></a>

[conexion]

Si vas a utilizar un tooltip debes buscar uno que permita cargar código html y probablemente un iframe (dependiendo de cómo estés diseñando).

Pero para la carga de un video yo utilizaría un div oculto que haría visible con un click o con un onmouseover. Depende de cómo quieras que se comporte. Si utilizas un div le puedes dar la apariencia que quieras con css.

[Perr0]

prueba con algo asi y te vas dando una idea

Código HTML:

<script>
function v(o,i){
    c=document.getElementById(i);
    if(o)
    capa="block";
    else
    capa="none";
    c.style.display=capa;
}
</script>
 
<div onmouseover="v(1,'tootltip')" onmouseout="v(0,'tootltip')">ver video youtube
<div style="border:2px solid red;width:640px;height:auto;display:none;position:relative;background-color:#FF0;padding:10px" id="tootltip">
Video en tooltip by Perr0
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/H4C3dqpUe7s" frameborder="0">
</iframe>
</div>
</div>
 

salu2