Publicentral.com - Promocion en cientos de buscadoresPromocion en cientos de buscadores
Mostrando Codigo - Javascript
Code

Javascript - Abrir imagen en ventana popup con tamaño ajustado

Códigos Javascript

Mostramos 3 ejemplos para abrir una ventana popup ajustandonos al tamaño de una imagen. Desde boton, enlace, e Imagen. Al pulsarlos este abrirá la ventana.
Visitas: 104,021 - 19/09/2004 20:13:15
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <head>
  2. <script>
  3. PositionX = 100;
  4. PositionY = 100;
  5. defaultWidth  = 500;
  6. defaultHeight = 500;
  7. var AutoClose = true;
  8. if (parseInt(navigator.appVersion.charAt(0))>=4){
  9. var isNN=(navigator.appName=="Netscape")?1:0;
  10. var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
  11. var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
  12. var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
  13. function popImage(imageURL,imageTitle){
  14. if (isNN){imgWin=window.open('about:blank','',optNN);}
  15. if (isIE){imgWin=window.open('about:blank','',optIE);}
  16. with (imgWin.document){
  17. writeln('<html><head><title>Cargando ...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
  18. writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
  19. writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
  20. writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
  21. writeln('width=100-(document.body.clientWidth-document.images[0].width);');
  22. writeln('height=100-(document.body.clientHeight-document.images[0].height);');
  23. writeln('window.resizeTo(width,height);}');writeln('if (isNN){');      
  24. writeln('window.innerWidth=document.images["imagenes"].width;');writeln('window.innerHeight=document.images["imagenes"].height;}}');
  25. writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
  26. if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
  27. else writeln('</head><body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
  28. writeln('<img name="imagenes" src='+imageURL+' style="display:block"></body></html>');
  29. close();       
  30. }}
  31. </script>
  32. </head>
  33. <body>
  34. <a href="javascript:popImage('/tutores/images/mundo3.gif','Texto alt')"> Haz click
  35. para abrir ventana desde enlace<br>
  36. <br>
  37. </a> <a href="javascript:popImage('/tutores/images/mundo.gif','Texto alt')"> <img src="/tutores/images/mundo.gif" alt="Haz click para abrir ventana desde imagen" width="88" height="87" border="0">
  38. </a><br>
  39. <form>
  40. <input type="button" value="Haz click para abrir ventana desde boton" onClick="popImage('/tutores/images/mundo.gif','Texto alt')">
  41. </form>
  42. </body>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Abrir imagen en ventana popup con tamaño ajustado" href="http://www.tutores.org/codigo/1356/" target="_blank">Abrir imagen en ventana popup con tamaño ajustado</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
osvaldo roco
5 5
Bueno, yo no seré tan agresivo como SATAN, pero en verdad los códigos tal cual estan puestos en la página NO FUNCIONAN.
salu2
Osvaldo
Comentario usuario
19/04/2003
3 5
Hola
este espacio de comentarios esta destinado para cuando tengan una duda con el codigo o bien presente algún error.
Como veis en la demo si funciona ademas de la ejecucion del código.
Si el código arroja algun error podeis ponerlo y se intentará solucionar.( Sin faltar al respeto por supuesto
Comentario usuario
15/02/2005 20.54.27
1 5
oye satan, si el código no te funcionó, bastaba con señalarlo y entre todos te hubiesemos dado la solución, ya que de eso se trata, ya que gracias a los foros es que todos aprendemos, claro, sin groserias, me imagino que te gusta la programación y el mundo de la Informática, favor más respeto.
Comentario usuario
deivi
1 5
Que tal? Alguien me podria pasar el codigo "cortado" solo para imagenes? Ademas, por cada link que quiero hacer necesito "pegar" el codigo? Muchas gracias.
Comentario usuario
19/04/2003
1 5
Hola prueba solo poniendo en el body
<a href="javascript:popImage('/tutores/images/mundo.gif','Texto alt')"> <img src="/tutores/images/mundo.gif" alt="Haz click para abrir ventana desde imagen" width="88" height="87" border="0">
</a> esta seria la linea para abrirlo desde imagen
Saludos
Comentario usuario
11-07-2008 23:02:58
5 5
Hola a todos!!!!
Existe algun popup que se autozisee segun la web q levante? y que le a texto tb y no solo fotos como esta ejemplo.
Desde ya muchas gracias.
Comentario usuario
19/04/2003
5 5
hola no es que exista solo debes de explicar lo que quieres hacer!!! se intentará ayudar en lo posible
Existe algun popup que se autozisee segun la web q levante
la verdad no se entiende
saludos
Comentario usuario
11-07-2008 23:02:58
5 5
si puede ser, de todos modos ya esta, lo eh echo yo mismo, pero lo que si nose como hacer es ver una foto en un tamaño menor que nose pixele cuando en realidad la foto origianl es mas grande, se entiende?
Expico de nuevo por las dudas...
Necesito un php que vea una foto en un tamaño menor al real.
Comentario usuario
gustavo natalini
4 5
No se para que necesitas un php asi. Lo unico que puedo decir es que te conviene siempre poner la foto que quires en el tamaño justo, y nunca achicarla, debido a que el tamaño en kb es siempre el mismo, y tardaria mucho en cargar aunque fuera una "fotito" lo que aparece. Me entiendes? Saludos.
Comentario usuario
11-07-2008 23:02:58
2 5
Hola, si te entiendo, pero cuando algo es dinamico como una web de 1 disco la cual es actulizada por el cliente no es posible hacer 2 imagenes, seria engorroso para el cliente, entonces se hace un script donde muestra la misma foto en dos tamaños. Lei algo y lo hacen con librerias gd, pero nose como
Comentario usuario
08/07/2005 19.09.17
2 5
Hola soy Nuevo aqui pues me he dado el alta ya que me parecio sumamente interesante .
Y ya que estoy aqui dentro quiero hacerles un pedido de ayuda.

Alguien sabe como abrir una ventana pop up de entrada y que no sea bloqueada .. agradecere su invalorable ayuda.
Comentario usuario
19/04/2003
4 5
Hola cordobes, hemos insertado un nuevo script que puede servirte de ayuda.
http://www.tutores.org/xml/ir.asp?ScriptID=1530
Saludos
Comentario usuario
cynthia
3 5
hola queria saber como puedo hacer para abrir 2 pop ups al ingresar a una página. gracias!!!!!!!!!!!
Comentario usuario
06/07/2005 20.10.48
5 5
Hola cynthia, lo que puedes hacer es una trampita, dile al segundo popup q habra otro y asi con todos los q quieras abrir.
Jeje espero q te sirva.
Bye.
Comentario usuario
miguel sosa
2 5
hola soy un web master aprendis y he comercialisado con algunas paginas me elegra encontrar una comunidad de web master ya que yo navego mucho buscando recursos y aprendiendo de todo un poco un saludo para el adminiostrador
Comentario usuario
cesar phoenix
5 5
todos los q dicen q no funciona ese codigo.. mejor dediquense a otra cosa q no sea el diseño jaja.... bueno yo no tengo muchos conocimientos, pero si me funciono...
AQUI les doy un dato... solo cambien los A HREF .... POR la ruta de sus imagenes... y les saldra... Bueno no creo q necesite mas explicacion
Comentario usuario
11/08/2005 23.03.51
1 5
estoy utilizando el javascript por primera vez con un codigo simple para abrir imagenes en ventana de su tamaño, hasta ahi bien, lo unico malo es que si cliqueo en alguna de las imagenes para que salte el Popup.. SE ME DETIENE LA CARGA DEL RESTO DE LA PAGINA! como se soluciona alguien lo sabe? gracias
Comentario usuario
willians r.
1 5
utilizando un editor html no funciono, re-hice el codigo y lo inclui mediante un editor de texto y funciona el 100%.
Comentario usuario
emanuel
2 5
Ncesito este vendito codigo para asp.net
Comentario usuario
william aliaga
2 5
Hola a todos amigos del foro, hay manera de abrir un popup, desde otro popup ??
probe con windows.open desde mi popup "padre" y nmada, si alguien me pudiera orientar seria fabuloso
Comentario usuario
19/04/2003
2 5
Hola, como puedes comprobar en la demo de este codigo.
Abrimos la demo en un popup y al ver el ejemplo se abre otro popup desde el mismo.
solo tienes que insertar el codigo en cada ventana o popup donde quieres que abra otro
Saludos
Comentario usuario
23/09/2005 22.53.03
4 5
Hola ,intente utilizar el script en mi blog y no funciono,¿me podrian decir que codigo puedo utilizar? (es para algunas fotos,no para todas).
Muchas gracias.
Este es mi blog : www.icaronocturno.blogspot.com
Comentario usuario
19/04/2003
5 5
Hola david hay bastante javascript en las cabeceras de tu pagina, puede ser por esta razon que no te funcione.
para abrir imagenes independientes puedes utilizar este codigo, aunque no se ajustan al tamaño de la imagen

[CODE*]<a href="javascript:;" onClick=window.open('tu_imagen.jpg','nombre_ventana','width=200, height=100,directories=no,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no, resizable=no,screenX=100,screenY=100,top=15,left=100') onMouseOver="window.status='ver imagen'; return true" onMouseOut="window.status='';return true">Abrir imagen</a>[*/CODE*]

Esperamos que te sirva, saludos
Comentario usuario
06/10/2006 13.09.49
5 5
Hola, estaba buscando un script con esta utilidad y encontré uno hace poco, pero con el problema de que la primera vez que pulsabas el enlace abría la imagen en tamaño muy pequeño y sólo la segunda vez la abría ajustada a su tamaño real. Lástima, porque era un script muy sencillo. Es éste:

[*CODE*]

en el bloque head:

<script LANGUAGE="JavaScript">
<!--
function ventImagen(img){
foto = new Image();
foto.src = (img);
ancho = foto.width + 20;
alto = foto.height + 20;
cadena = "width =" + ancho + ", height = " + alto;
window.open(img,'',cadena);
}
// -->
</script>

En el bloque body
< a href="javascript:;" onClick="-aqui la URL-')">
[*/CODE*]

El script que tenéis aquí es simplemente genial. Funciona perfectamente al primer click. Sólo hay un pequeño problema, que vale la pena corregir: recorta la imagen por la derecha unos 20 pixeles. Si en la línea


writeln('width=100-(document...


ponéis


writeln('width=123-(document...

la imagen sale completa. Aunque quizás esto dependa del navegador. Si alguien tiene este mismo problema, cambiando el widht o el high en esa función lo puede corregir. En mi caso, así ha ido bien.

En cuanto a los críticos, sólo decir

1) que el script funciona perfectamente, os lo aseguro, o sea que aplicaros a colocarlo y escribirlo bien. Si queréis comprobarlo, mirad por ejemplo esta página

http://personales.ya.com/hidalgo/amigosdesantaella/nevada.html

2) que esto es gratis, hecho con mucho altruísmo y buena fe, y merece más respeto.

3) hay que ser humilde y aprender de quien sabe.

Muchas gracias a los creadores del script. Saludos a todos

Panchito
Comentario usuario
06/10/2006 13.09.49
4 5
En efecto, depende del navegador. He provado en varios y en unos, aún recorta la imagen a pesar de haber aumentado el width, mientras que en otros queda un buen trozo sobrante. Una buena solución sería dar un poco más de margen, pero centrar la imagen al ancho. ¿Sería eso posible?

Gracias. Saludos

Panchito
Comentario usuario
19/04/2003
4 5
Hola
no lo hemos probado, pero bastaria con sumar ancho y alto a las propiedades de la ventana
....
ancho_ventana= ancho + 100;
alto_ventana = alto + 100;
cadena = "width =" + ancho_ventana + ", height = " + alto_ventana;
window.open(img,'',cadena);
Saludos y espero que sirva
Comentario usuario
xcorp
1 5
Solo me sale la imagen pequeñita pero al pulsar en ellla el enlace me conduce a la carpeta donde está localizada y en el link he puesto la dirección completa. Compo puedo solucionarlo????
Comentario usuario
Stefy
5 5
Buenísimo ese código....me sirvió demasiado.....gracias
Comentario usuario
Lowson
1 5
quisiera saber si existe alguna propiedad del popup, para que a fuerza se tenga que cerrar, para poder trabajar en la pantalla principal. lo que sucede es que tengo una pagina principal abro un popup pero quiero que no se puede trabajar en la pantalla principal mientras este abierto el popup,,,.
Comentario usuario
lowson
1 5
si existe la amanera de abrir un popup dentro de otro. puedes utilizar el siguiente codigo que me funcia correctamente:

dim Ventana as string ="<Script Language='JavaScript'" & _
"'_blank'","' & Page.ResolverClientScript("~/direccion") & "'"
me.ClienteScript.registerstartupClientScript(Gettype(),"Abrir",Ventana)
aver si te sirve para abrir un popup desde otro popup
Comentario usuario
Irula
1 5
Buenas,
Estoy intentando utilizar este código pero no me funciona, cuando hago click en la imagen que utilizo de enlace se ma abre una página donde la url tiene el contenido del href, es decir, javascript:popImage('ruta_img','nombre_de_la_imagen')
donde pongo ruta_img va la ruta donde esta la imagen y en el nombre el nombre que quiero que tenga la imagen.
Si alguien puede decirme como solucionar el problema se lo agradecería.
Muchas gracias

Un saludo
Comentario usuario
lazara
1 5
como puedo levantar un popup en jommla con un texto
Comentario usuario
Roger Cava
3 5
Gracias amigos por publicar este codigo esta muy bueno me saco del aputo.
Comentario usuario
www.sonlatinoperu.tk
2 5
A mi me funiciono de maravilla, muchas gracias por esa informacion, saludos JC.
Comentario usuario
garbagekid
3 5
disculpn mi ignorancia.pero ps..bueno el codigo si reacciona en mi sitio..jojo..pero la pregunta k lo tomaran talves como tota..es ¿en k parte del codigo pongo la direccion de la imagen??o la imagen..? o k tengo k hacer para k aparezka la imagen..por k ps eso no c como hacerlo..Je...sorry.. Spero k gusten ayudarme:)
Comentario usuario
01-11-2008 22:09:35
1 5
Señores, ese codigo PopImage lo he venido usando durante varios años funciona perfectamente hasta la version 6 del internet explorer... PERO con la version 7 ya no funciona, la imagen ya no se abre con el ancho ral... si alguien descubre el porque por favor escribame haduhu@yahoo.es
Saludos
Harold
Comentario usuario
OriolCosmic
5 5
fantastico código! Gràcias.
Comentario usuario
08/11/2004 18.01.55
4 5
muy buena esta pagina, me ayudaron gracias..SALUDOS DE GUATEMALA
Comentario usuario
09-05-2007 03:08:03
5 5
Hola, como estan amigos. Espero puedan ayudarme o guiarme, lo que intento hacer es algo parecido al sitio de telcel, abrir un popup pero inhabilitando el sitio al tener abierto el popup.
Comentario usuario
HOMER GARZA
3 5
hola, me gustaria abrir una ventana pop up donde traiga insertado un reproductor media player.

Y q se abra el popup automaticamente al abrir la pag. principal.
Comentario usuario
10-06-2010 23:39:40
5 5
hola.. es buena esta pagina..
tengo una duda, no se si me explique pero aparte de esta ventana popup quisiera saber que si la foto no exite dentro del archivo, como puedo hacer para que no muestre la ventana con una X, sino que no muestre nada o no abra nada..?
saludos y gracias
Comentario usuario
lGoo
4 5
Este codigo es de lo mejor
Comentario usuario
Roxas
1 5
Hola sobre este codigo como puedo utilizarlo para una sola imagen y que dar click en cierta parte de la imagen me mande pop-ups diferentes esque tengo que hacer el mapa de la republica mexicana y al dar click en un estado me aparesca una po-up y su informacion

RESPONDAN PORFAVOR
Comentario usuario
08-10-2008 09:52:42
4 5
Hola!
El codigo esta barbaro, pero en los navegadores de hoy dia (FF 4, IE 7-8-9, G.Chrome) no funciona del todo correcto, solo en el Firefox, en los IE no toma el tamaño correcto de las imagen y en el Chrome siempre toma el mismo tamaño.
¿Como se puede modificar el codigo para que funcione correctamente?
Comentario usuario
Xedon
3 5
Hola a todos soy nuevo en esto y ps necesto un poco de ayuda porfavor si pueden ayudarme con un programita q stoy haciendo con ayuda d unos amigos...

Mi Prolema es q quiero abrir una pestaña pulsando una tecla ya sea "x" tecla y ps abra una ventana nueva osea la que yo quiero q abra... les pido porfavor si me pueden ayudar...? se les agradece su pronta respuesta ;)
Comentario usuario
marshal
5 5
felicitaciones a los web master o los q kieren serlo espero les sirva nunca dejen de aprender ni esperar mucho timepo para aprender nuevas coasas yo soy un ing de sistemas pero por motivos de trabajo emepce a hacer otras cosas cuandsop era studiante era un buen prospecto para mis tutres de ser un diseñador web barbaro luego lo deje por motivos ya dichos hoy por hoy intento reanudar con la programacion web y me es muy dificil reaprender y seguir aunq puedo realizar web's e encotrado cosas q yo no es nesesario programar en el dia de hoy mejor dicho los web junior pueden estar a la altura de los web senior asi que todos pueden ser dle mismo nivel no se agredan en sus comentario ya q eso significa que su nivel queda ahi y seguiran asi y no pueden mejorarce ... webadictos no desesperen y q viva el pop rock!! tira de panzones... pd visiten Chimbote - Perú mi natal geo
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.