1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Abrir ventana con imágen grande al hacer click

Tema en 'Programación y Diseño Web' iniciado por dennyboy, 5 Ago 2003.

  1. dennyboy

    dennyboy Guest

    Pues eso, que quiero hacer lo siguiente, en <a href="http://cardenastkd.webcindario.com/cblancas.html" target="_blank">este link</a> al hacer click en cada imágen quiero que aparezca una nueva pantallita pero sin scrollbars ni menus, misma a la que le pondré la imágen correspondiente y un botoncito con la instrucción para que se cierre.

    He recibido ayuda de otras personas (TUNAIT) con un javascript, pero por más que lo quiero cargar no logro hacer que funcione, mi siguiente paso es darme un tiro... pero de cualquier forma eso no va a ayudar, voy a poner un poco del código para que lo vean vale?.

    <HTML>
    <HEAD>
    <TITLE>cblancas</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    </HEAD>
    <script language="javascript">
    //script por Tunait
    var ventana
    var cont=0
    var titulopordefecto = "Instituto Cárdenas de Tae Kwon Do"
    function afoto(cual,titulo)
    {
    if(cont==1){ventana.close();ventana=null}
    if(titulo==null){titulo=titulopordefecto}
    ventana=window. open('','ventana','resizable=yes,scrollbars=no,width=500,height=400')
    ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)"><br><div align="center"><a href="java script:this.close()">cerrar</a>')
    ventana.document.close()
    cont++
    }
    function redimensionar(ancho, alto)
    {
    ventana.resizeTo(ancho+12,alto+50)
    ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2) //centra la ventana. Eliminar si no se quiere centrar el popup
    }
    </script>
    <BODY BGCOLOR=#EEEEEE LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <!-- ImageReady Slices (cblancas.psd) -->
    <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" cellpadding="0" width="850">
    <tr>
    <td align="right" width="98">
    <IMG SRC="images/cblancas_01.jpg" WIDTH=47 HEIGHT=96 ALT=""></td>
    <td width="608" colspan="7">
    <IMG SRC="images/cblancas_02.jpg" WIDTH=609 HEIGHT=96 ALT=""></td>
    <td width="144">&</td>
    </tr>
    <tr>
    <td width="98">&</td>
    <td bgcolor="#FFFFFF" width="8">&</td>
    <td bgcolor="#FFFFFF" width="134">&</td>
    <td bgcolor="#FFFFFF" width="134">&</td>
    <td bgcolor="#FFFFFF" width="89">&</td>
    <td bgcolor="#FFFFFF" width="135">&</td>
    <td bgcolor="#FFFFFF" width="9">&</td>
    <td bgcolor="#FFFFFF" width="99">&</td>
    <td width="144">&</td>
    </tr>
    </table>
    </BODY>
    </HTML>


    Alguna idea?

    Saludos
     
    dennyboy, 5 Ago 2003
    #1
  2. Anunciante

    Anunciante

     
  3. Ronegar

    Ronegar Nuevo usuario

    Denny, has escrito mal el link????
     
    Ronegar, 5 Ago 2003
    #2
  4. dennyboy

    dennyboy Guest

    Nop, yo le doy y si abre...

    <a href="http://cardenastkd.webcindario.com/cblancas.html" target="_blank">http://cardenastkd.webcindario.com/cblancas.html</a>

    claro que ahorita verás nadamás los thumbnails, no hacen nada... todavía. :twisted:
     
    dennyboy, 5 Ago 2003
    #3
  5. Ronegar

    Ronegar Nuevo usuario

    Ronegar, 5 Ago 2003
    #4
  6. dennyboy

    dennyboy Guest

    Yes en inglés, asi es lo que quiero hacer o morir en el intento... ahorita me fusilo el código, lo intento a la hora de comer y regreso con el resultado....


    Dennyboy en ventana nueva con click, toma siete.... Acción... :roll:
     
    dennyboy, 5 Ago 2003
    #5
  7. Ronegar

    Ronegar Nuevo usuario

    Animo Denny, tu puedes.
     
    Ronegar, 6 Ago 2003
    #6
  8. Cyber

    Cyber Nuevo usuario

    :D Aparte de crearlo con un Pop Up lo puedes hacer con una ventana aperte digo yo por el tamaño de la imagen, solo crea un link en la foto que tienes haciendo referencia a la imagen solo que creando una ventana a parte... bueno has como creas conveniente y con la forma que sea mas facil que es mas importante 8) 8) jejeejej
     
    Cyber, 8 Ago 2003
    #7
  9. otherme

    otherme Nuevo usuario

    por el tamaño de las imagenes.. esa es una opcion es mas.. al poner la imagen en cada documento puede hacer una barra de navegacion con "siguiente" "anterior" "cerrar"

    eso seria un enlace html .. con target _new .. pero asi no podria controlar el scrool status, menues etc.. y todas esas cositas que si podria con javascipt... en fin ambas seran validad. creo yo--

    a ver denny..pronunciate... como vas?
     
    otherme, 9 Ago 2003
    #8
  10. Cyber

    Cyber Nuevo usuario

    :D Otherme esta conmigo denny ves vamos a delante como vas he?? 8) 8)
     
    Cyber, 9 Ago 2003
    #9
  11. otherme

    otherme Nuevo usuario

    hey denny.. mira aqui hay un articulo/tutorial sobre abrir popups ..

    <a href="http://www.desarrolloweb.com/articulos/18.php" target="_blank">http://www.desarrolloweb.com/articulos/18.php</a>
     
    otherme, 9 Ago 2003
    #10
  12. Cyber

    Cyber Nuevo usuario

    :D Veo que estan sirviendo las derecciones que os posteo eso me alegra mucho jejejejeje 8) 8)
     
    Cyber, 9 Ago 2003
    #11
  13. Adguer

    Adguer Nuevo usuario

    Usa dreamweaver mi amigo, en dreamweaver, existe un behavior para hacer eso, con cualquier link, especificas las dimensiones y lo que quieres que tenga la venatana siguiente.
     
    Adguer, 17 Feb 2004
    #12
  14. obi-alf

    obi-alf Nuevo usuario

    Para abrir un pop-up:
    Pones esto en la página desde donde se abrirá el pop-up

    <!--coloro:white--><span style="color:white"><!--/coloro--><script language="JavaScript">

    function abrirPopup()
    {
    posx=((screen.availWidth-350)/2)
    posy=((screen.availHeight-350)/2)
    eval("boxwindow=window.open('tu_pagina.html','boxwindow','width=350,height=350,toolbar=0,directories=0,status=0,scrollbars=0,resize=0,menubar=0,screenx="+posx+",screeny="+posy+",left="+posx+",top="+posy+"')")
    }

    </script><!--colorc--></span><!--/colorc-->

    Tienes que cambiar el tamaño en los 2 sitios donde aparecen el width y el height por el de la imagen y poner el html de la página que vas a abrir.
    Cuando hagas la página con la imagen grande, acuerdate de poner en el body esto <!--coloro:white--><span style="color:white"><!--/coloro--><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><!--colorc--></span><!--/colorc--> para que asi no queden margenes.

    En el link donde harás el click para que se te abra el pop-up debes de poner esto

    <!--coloro:white--><span style="color:white"><!--/coloro--><a href="java script:abrirPopup()">aumentar</a><!--colorc--></span><!--/colorc-->

    Para pasar imágenes con siguiente y anterior sería asi:

    <!--coloro:white--><span style="color:white"><!--/coloro--><script language="JavaScript">
    var myPix = new Array("imagen_01.jpg","imagen_02.jpg","imagen_03")
    var thisPic = 0
    function processPrevious() {
    if (document.images && thisPic > 0) {
    thisPic--
    document.myPicture.src=myPix[thisPic]
    }
    }
    function processNext() {
    if (document.images && thisPic < 2) {
    thisPic++
    document.myPicture.src=myPix[thisPic]
    }
    }</script><!--colorc--></span><!--/colorc-->

    Aqui tienes que ir poniendo las imagenes y su ubicación y aumentando el <b>< 2</b> a medida que pongas una nueva imagen (el número es siempre uno menos que imágenes tengas)

    A los botones anterior y siguiente les pones esto:

    <!--coloro:white--><span style="color:white"><!--/coloro--><a href="java script:processPrevious()">« anterior</a>
    <a href="java script:processNext()">siguiente »</a><!--colorc--></span><!--/colorc-->

    Espero que te valga

    Saludos
     
    obi-alf, 17 Feb 2004
    #13
  15. otherme

    otherme Nuevo usuario

    este sirve tambien

    este sirve tambien

    <a href="http://www.forocreativo.net/foro/viewtopic.php?t=1965" target="_blank">http://www.forocreativo.net/foro/viewtopic.php?t=1965</a>

    saludes a todos..

    Otherme
     
    otherme, 17 Feb 2004
    #14


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·