29 ottobre 2009

30 commenti Condividi il post Facebook Twitter Google+

Come aprire i link in una nuova pagina o in una finestra popup

Una domanda che mi è stata posta molto spesso, sia via email che nei commenti, è proprio:

come è possibile aprire un link in una nuova pagina o in una finestra popup?

Ieri chattando con Sauro, mi ha fatto notare che molte cose che a me sembrano banali e che do per scontato sono invece di grande aiuto per chi è alle prime armi con l'html.
Ho deciso quindi di scrivere questo post...

Già tempo fa, su richiesta di Gianpy, ho scritto il post Come aprire una finestra popup dal blog: lo script che ho realizzato consente di visualizzare nel popup una porzione del post cliccando su un link.

Oggi vediamo invece come aprire un link in una nuova pagina o in un popup, utile sia per chi ha un blog su Blogger che su altre piattaforme.

Innanzitutto la sintassi di un link è la seguente:

<a href="indirizzo">Nome</a>

dove indirizzo può essere l'url di un blog, un sito, un'immagine o un vostro post mentre Nome rappresenta il nome visualizzato nella pagina. Ad esempio se scrivo:

<a href="http://www.flickr.com/photos/ioleblog/">Le mie header su Flickr!</a>

nella pagina visualizzo la stringa "Le mie header su Flickr!" e cliccando sul link visualizzo la pagina di Flickr con le mie header.

Non avendo impostato alcuna proprietà del link, l'indirizzo viene aperto nella stessa pagina in cui ci troviamo.
Per aprire invece un link in una nuova finestra basta aggiungere la proprietà target in questo modo:

<a href="indirizzo" target="_blank">Nome</a>

Quando l'attributo target viene omesso, di default il link viene aperto nella stessa pagina.

Al posto di un Nome, è possibile anche inserire un'immagine; la sintassi allora diventa:

<a href="indirizzo" target="_blank"><img src="indirizzo_immagine" /></a>

Ed ecco il risultato: Le mie header su Flickr! (in una nuova pagina)

Per aprire il link in un popup, la sintassi invece è la seguente:

<a onclick="window.open('indirizzo','nome finestra','caratteristiche finestra');">Nome</a>

dove indirizzo e Nome hanno lo stesso signifivato di prima, mentre nome finestra serve ad identificare la finestra che andiamo ad aprire (è opzionale, quindi possiamo scrivere anche '').

Per quanto riguarda le caratteristiche finestra eccone alcune:

  • width e height: larghezza e altezza della finestra in pixel
    (es. width=500,height=400)
  • left e top: distanza da sinistra e dal lato superiore del monitor
    (es. left=200,top=300)
  • resizable: la finestra può essere ridimensionata
    (resizable=yes oppure resizable=no)
  • fullscreen: la finestra viene aperta a tutto schermo
    (fullscreen=yes oppure fullscreen=no)
  • menubar: la finestra ha la barra del menu
    (menubar=yes oppure menubar=no)
  • toolbar: la finestra ha la barra degli strumenti del browser
    (toolbar=yes oppure toolbar=no)
  • location: la finestra ha la barra degli indirizzi del browser
    (location=yes oppure location=no)
  • scrollbars: la finestra ha le barre di scorrimento laterali
    (scrollbars=yes oppure scrollbars=no)
  • status: la finestra ha la barra di stato
    (status=yes oppure status=no)

Le caratteristiche vanno separate con una virgola.

Vediamo insieme un esempio: un popup con dimensioni 800x600px fisse (cioè non ridimensionabile), posizionato in alto a sinistra del monitor, senza alcuna barra.

<a href="#" onclick="window.open('http://www.flickr.com/photos/ioleblog/', '', 'width=800,height=600,left=0,top=0,resizable=no,menubar=no,toolbar=no,location=no,scrollbars=no,status=no');">Le mie header su Flickr</a>

ed ecco il risultato: Le mie header su Flickr! (in un popup)

Resto a disposizione per ogni dubbio o chiarimento.
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

30 commenti

  1. Grazie! Davvero molto utile per chi, come me, è alle prime armi con l'html...

    RispondiElimina
  2. Ciao Iole, non usavo le finestre popup perché non sapevo come modificarne le dimensioni, adesso che, come sempre, hai ben spiegato come fare le userò per le mie videoguide. CIAO

    RispondiElimina
  3. P.S. Ti rubo ancora un pò di spazio per invitare te e tutti i tuoi lettori a leggere questo post attentamente (si tratta di una bambina gravemente malata) http://sauroweb.blogspot.com/2009/10/aiutiamo-denise-un-piccolo-angelo.html
    Per favore dategli un'occhiata, io Denise e la sua famiglia ve ne saremo veramente grati.

    RispondiElimina
  4. Grazie mille per la spiegazione!!! Potrebbe essere usato per chi volesse modificare la finestra popup dei commenti e inserirne il link in un post...

    RispondiElimina
  5. Ciao Iole, i tuoi consigli sono utilissimi.
    Sono alle prime armi con l'html.
    Volevo sapere se è possibile aprire
    una finestra popup di solo testo (dove inserire il Copyright) in stile Lightbox.
    Esiste un codice?

    RispondiElimina
  6. i tuoi consigli sono sempe utilissimi...!!

    ma questo codice....dove lo devo copiare...??scusa ma è l'unica cosa che non ho capito.


    grazie ciao

    RispondiElimina
  7. @DORELLA: per qualsiasi cosa, contattami pure! In genere scrivo i miei post in base alle richieste dei lettori. Come ho scritto nel post a me queste cose sembrano banali, mentre per molti di voi sono veramente utili.
    @Sauro: grazie a te per avermi dato lo spunto per questo post.
    @Den: non penso che è possibile modificare la finestra popup dei commenti. Della gestione dei commenti se ne occupa Blogger.
    @CS: cosa intendi di preciso con "finestra popup di solo testo (dove inserire il Copyright) in stile Lightbox"? Nel mio blog, ho realizzato uno script che, cliccando sulle icone Chat e Link del menu, apre un popup con all'interno del testo.
    Per quanto riguarda Lightbox, io non lo uso perché sul mio blog crea conflitti (come ho spiegato in questo post). Al suo posto utilizzo Lytebox, che ha gli stessi effetti grafici ed offre maggiori funzionalità.
    @Alice4161: il codice che ho scritto non va copiato e incollato e tutto funziona alla perfezione.
    Se utilizzi l'editor di Blogger per scrivere i post, quando inserisci un link utilizzando l'apposita icona, Blogger crea l'html corrispondente. Se voui che i tuoi link vengano aperti in una nuova pagina o in una finestra popup allora devi modificare manualmente l'html generato da Blogger aggiungendo la proprietà target per aprire i link in una nuova pagina oppure onclick="window.open(...)" per il popup.

    RispondiElimina
  8. Ciao Iole, non ci conosciamo... da pochissimo scrivo sul forum di elisabetta: abchobby. Avrei un problemino al blog che ho aperto da poco e che mi sta dando non pochi problemi... sul forum mi hanno indicato te, che a quanto noto sei esperta! se passi sul mio blog noti delle icone orrende in basso ad ogni intervento... non riesco proprio ad eliminarle, mi aiuteresti per favore?
    Aspetto tue notizie, spero di riceverle presto. :-)

    RispondiElimina
  9. @Graziola: per far sparire quelle icone devi togliere dal template il codice html che inizia per
    <div class='bookmark'>
    <ul>

    e termina con
    </ul>
    </div>

    RispondiElimina
  10. Sei stata velocissima, grazie!
    Allora lo devo fare in Layout Modifica html? perché lì non c'è questo codice

    RispondiElimina
  11. @Graziola: sì, in Layout - Modifica html e poi devi cliccare su Espandi i modelli widget.

    RispondiElimina
  12. Ciao Iole.
    Hai ragione, mi sono spiegato male.
    Vorrei inserire nel footer dei crediti un link, dove, cliccandoci sopra si apri una finestra con lo stile grafico di lightbox o lytebox.
    Per solo testo, intendo come quelle che hai creato Tu in chat e link.
    La verità è che non ho capito dove inserire il testo e quale sia la stringa giusta per farlo funzionare.
    Ciao e scusami ancora.

    RispondiElimina
  13. Sei un mito! ho dovuto ripristinare, non ho mai notato lì sotto cosa ci fosse perché non scendevo oltre con la barra -_-'Grazie mille davvero, erano inguardabili quelle icone! ti metto tra i preferiti, ciaooo a prestoooo!

    RispondiElimina
  14. @CS: se vuoi utilizzare Lytebox il codice per aprire il popup è <a href="indirizzo" rel="lyteframe" rev="width: 200px; height: 200px;" title="Copyright">Copyright</a>, dove indirizzo è l'url di un file html contenente il testo desiderato (che dovrai caricare online su un qualunque servizio di hosting). Dovrai personalizzare le dimensioni del popup width: 200px; height: 200px;.
    Se invece vuoi usare il popup come quelli che si aprono cliccando sulle icone del mio menu, mandami un'email con il testo del copyright che ti creo lo script e ti spiego dove inserirlo nel blog.
    @Graziola: per qualsiasi altra cosa... contattami pure!

    RispondiElimina
  15. @ Iole: è però possibile modificare le dimensioni della finestra e le caratteristiche. Ad esempio potresti usare questo HTML: <a href="#" onclick="window.open('https://www.blogger.com/comment.g?blogID=4674972716947859365&postID=3244257130724039614', '', 'width=800,height=600,left=0,top=0,resizable=yes,scrollbars=yes,status=no');">Lascia un commento</a> per aprire la finestra dei commenti del tuo blog con altre dimensioni...

    RispondiElimina
  16. @Den: provaci e fammi sapere.
    Io non lo consiglio... Il link per la gestione dei commenti viene generato da Blogger in base al blogID e il postID.
    Per personalizzare il popup, dovresti prima pubblicare il post, copiare l'indirizzo del popup dei commenti e poi aggiungere quel codice html alla fine del post, tutto manualmente e non agendo sul template.

    RispondiElimina
  17. Post utilissimo iole. hai fatto proprio bene a metterti nei nostri panni. Grazie davvero!

    RispondiElimina
  18. Molto chiaro finalmente ho capito qualcosa su come usare i codici, generalmente li ho sempre pasticciati e prova e riprova alla fine funzionavano.
    Ora so come fare GRAZIE Iole

    RispondiElimina
  19. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  20. Grazie mille per la tua cortesia e pazienza.Seguendo i tuoi consigli sono riuscito a inserire nel blog la finestra popup, optando però nel mettere il collegamento nel piè di pagina.Inoltre seguendo un'altro tuo tutorial ho sostituito lightbox con lytebox. Hai ragione ha più funzionalità. Sei grande. Continuerò a seguire i tuoi consigli. Ciao a presto.

    RispondiElimina
  21. Cara Iole, spero tu possa aiutarmi, anzi ne sono certa, sei così brava. Navigando nel tuo blog, ho scoperto che si può inserire nel proprio sito l'invio si sms gratis. Ho fatto la registrazione, mi hanno già inviato il codice html ed io ho inserito il widget nel mio blog, però nn vorrei che mi apparisse tutta la schermata nella mia sidebar, renderebbe tutto ancora più confuso, mi piacerebbe che apparisse solo il titolo sul quale cliccare e poi non so si apre una finestra dalla quale poi inviare l'sms. Non so se sono stata chiara, come ti ho già detto molte volte io nn ci capisco niente di informatica e per me è già tanto avere un blog aperto :-)))
    Grazie , baci Ros

    RispondiElimina
  22. @roro: io ho inserito il codice in un post. Cliccando sull'icona a forma di messaggio del menu si apre la pagina del post.

    RispondiElimina
  23. Grazie Iole, farò così. Sei sempre preziosissima
    Ros

    RispondiElimina
  24. Ciao Iole, ho trovato quest'articolo molto interessante ma una cosa non mi è molto chiara. Tutto questo lavoro va fatto ogni volta che inserisco un link in un post? Spero di no ma allora devo essermi persa un passaggio (so' di coccio duro!!!!!). Va forse inserita da Layout-Modifica HTML?
    Grazie e scusa l'imbranataggine!!!!

    RispondiElimina
  25. @Federica: questo lavoro va fatto ogni volta che desideri aprire un link in una nuova pagina. Aggiungere target="_blank" al codice html di un link non mi sembra però un così grande lavoro, come lo è per aprire un popup dovendo specificare tutte le caratteristiche della finestra.

    RispondiElimina
  26. ciao ascolta io vorrei creare una finestra popup ad apertura automatico appena si visualizza la mia pag blog, ne sto uscendo matto nn riesco a reperire il codice potresti aiutarmi?

    RispondiElimina
  27. @dany27041991: se vuoi che non appena viene aperta una qualsiasi pagina del tuo blog appaia un popup allora vai nell'html del tuo template e trova la riga di codice <body> e sostituiscila con:
    <body onload='window.open(&quot;INDIRIZZO&quot;, &quot;&quot;, &quot;width=500,height=300,left=100,top=100&quot;);'>
    ovviamente sostiuendo INDIRIZZO con l'indirizzo della pagina che vuoi sia visualizzato nel popup e personalizzando dimensioni e posizione (width=500,height=300,left=100,top=100).

    RispondiElimina
  28. Mizica Iole sei una grande! Grazie per il codice per aprire link in un'altra scheda! Sei stata la più chiara! Stavo sclerando^^ Ciaooo, bacio

    RispondiElimina
  29. @Tra Cucina & Realtà: sono contenta che questo post ti sia stato utile!

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy