Foros del Web » Programando para Internet » Javascript »

Ventanas emergentes con forma

Estas en el tema de Ventanas emergentes con forma en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/04/2011, 18:33
Avatar de Pafate  
Fecha de Ingreso: mayo-2010
Mensajes: 232
Antigüedad: 9 años, 6 meses
Puntos: 1
Ventanas emergentes con forma

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
  #2 (permalink)  
Antiguo 08/04/2011, 22:13
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 673
Antigüedad: 14 años, 6 meses
Puntos: 78
Respuesta: Ventanas emergentes con forma

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
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip
  #3 (permalink)  
Antiguo 09/04/2011, 21:17
Avatar de Pafate  
Fecha de Ingreso: mayo-2010
Mensajes: 232
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Ventanas emergentes con forma

Gracias por la respuesta. ahi te di karmita
  #4 (permalink)  
Antiguo 10/04/2011, 16:09
Avatar de Pafate  
Fecha de Ingreso: mayo-2010
Mensajes: 232
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Ventanas emergentes con forma

Cita:
Iniciado por Perr0 Ver Mensaje
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>

Última edición por Pafate; 10/04/2011 a las 16:39
  #5 (permalink)  
Antiguo 10/04/2011, 19:19
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 8 años, 9 meses
Puntos: 13
Respuesta: Ventanas emergentes con forma

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.
  #6 (permalink)  
Antiguo 11/04/2011, 09:27
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 673
Antigüedad: 14 años, 6 meses
Puntos: 78
Respuesta: Ventanas emergentes con forma

prueba con algo asi y te vas dando una idea

Código HTML:
Ver original
  1. function v(o,i){
  2.     c=document.getElementById(i);
  3.     if(o)
  4.     capa="block";
  5.     else
  6.     capa="none";
  7.     c.style.display=capa;
  8. }
  9.  
  10. <div onmouseover="v(1,'tootltip')" onmouseout="v(0,'tootltip')">ver video youtube
  11. <div style="border:2px solid red;width:640px;height:auto;display:none;position:relative;background-color:#FF0;padding:10px" id="tootltip">
  12. Video en tooltip by Perr0
  13. <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/H4C3dqpUe7s" frameborder="0">
  14. </div>
  15. </div>

salu2
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip

Etiquetas: emergentes, ventanas, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 12:29.