Pubblicato il 02/06/09 - aggiornato il  | 19 commenti :

Inserire scritte ed immagini scorrevoli nel blog.

Come inserire delle scritte e oggetti scorrevoli nel blog con il tag marquee
Ho già parlato di scritte scorrevoli in questo articolo in cui ho illustrato come con questo codice


<marquee onmouseover="this.stop()" direction="Left" scrollamount="5" onmouseout="this.start()" width="100%" style="font-size: 18pt;
color: #800000; font-family: Tahoma" height="40" bgcolor="#FFCC99">Idee per computer ed internet by Parsifal32</marquee>


si otteneva una scritta che si interrompeva al passaggio del mouse. Premesso che anche questo tag, come quello blink del precedente articolo, è deprecato dal W3C vediamo come possiamo utilizzarlo per variare le nostre scritte.

Idee per computer ed internet by Parsifal32

Se inseriamo l’attributo behavior=’alternate’ lo scorrimento della scritta si alternerà verso sinistra e verso destra alla fine della corsa.
Si possono anche far scorrere delle immagini che ovviamente prima devono essere caricate sul web. Per esempio prendiamo questa immagine e carichiamola su Skydrive
betty014
s
Dopo averne ottenuto l’URL inseriamo questo codice in modalità HTML



<marquee onmouseover="this.stop()" direction="Left" scrollamount="10" onmouseout="this.start()" width="100%" > 
<img style="width:50px;" src="https://tinyurl.com/kmf2zv"> </marquee>


In cui ci sono le possibili personalizzazioni che riguardano

  • onmouseover="this.stop()"  - L’immagine viene fermata quando si punta con il mouse
  • onmouseout="this.start()"  - L’immagine riparte quando il mouse si sposta
  • Left – è la direzione iniziale
  • scrollamount =”10” – rappresenta la velocità di scorrimento
  • behavior=”alternate” – va da sinistra a destra e poi da destra a sinistra
  • widht="100%" – è la lunghezza dello spostamento misurata in pixel.
  • Da notare che non occorre mettere il colore di sottofondo e l’altezza che sarà quella dell’immagine
  • img src=”URL_immagine” – ovviamente ho inserito l’URL acquisito da Skydrive dopo averlo accorciato con TinyUrl
Ecco il risultato








19 commenti :

  1. Ciao sono Gabriella digiuna totale di questo linguaggio informatico, ma qualcosa ho compreso grazie a molti chiarimenti nei vari blog compreso il tuo, ma non è chiara una cosa. Ho aperto un sito e vorrei inserire in una pagina una sequenza di fotografie dal mio PC. Scrivi che le immagini devono essere prima caricate sul web, ma dove? Ho provato a fare così. Nella mia "stanza operativa" in Modifica-Sitiwebs.com ho scaricato le foto attraverso queste operazioni:inserisci immagine, sfoglia sul server, carica ed ho caricato 20 foto in una cartella. Ed ecco il problema: nella stessa pagina "carica file" ho altre cartelle e quindi tutte hanno lo stesso URL http//nu.me.ro /index.php/ Wizard/Edit/Wysiwyg/ImageBrowser?SessionID= .... altri numeri e lettere. Ho provato a ricopiare lo stesso URL per ogni foto e il nome della foto, ma appare solo la striscia scorrevole. Quindi che fare? Se puoi aiutarmi ne sarei felice. Grazie Gabriella

    RispondiElimina
  2. @Ella
    Questo commento è finito erroneamente nello spam quindi mi scuso per averlo letto solo adesso. Da quello che mi dici è evidente che hai un blog su una piattaforma che non conosco e che non ho capito quale sia, presumo Wordpres.com o Altervista ma forse mi sbaglio.
    Caricare una immagine sul web significa inserirla in uno dei tanti servizi che permettono di condividere foto: Flickr, Skydrive, Picasa e molti altri. Ti posto alcuni link
    http://www.ideepercomputeredinternet.com/2008/10/skydrive-per-archiviare-gratis-fino-5gb.html
    http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
    Dopo che hai caricato le foto ne potrai acquisire l'indirizzo che sarà una cosa di questo tipo
    http://lh5.ggpht.com/_nT13UtBmmiU/SiTnfSI72sI/AAAAAAAAGkw/Drh-vSoC2JY/betty014_thumb%5B2%5D.gif
    Se tu lo incolli nel browser vedrai che si apre una scheda con una immagine. Questo indirizzo è quello che devi inserire per creare quelli che tu chiami sequenze di foto ma che in gergo si chiamano slideshow. Con Picasa si possono creare automaticamente
    http://www.ideepercomputeredinternet.com/2009/10/come-creare-uno-slideshow-di-foto.html.
    Ciao e scusa ancora per il ritardo nella risposta anche se non è dipeso da me ^;^

    RispondiElimina
  3. ciao gabbriella il modo che usi è sbagliato,tu usi site builder integrato in sitiwebs e come programma è ottimo solo che devi prenderci la mano nelle pagine hai voce foto da li carichi la sequenza e quando gli utenti entrano nel tuo sito alla voce foto vedono quelle che hai inserito,se hai problemi dimmelo a limite ti dò una mano by mistercall360

    RispondiElimina
  4. Ciao sono alice del sito,cenerentolaincucina.com.Volevo chiederti un aiuto,in quanto ho inserito nella colonna a sinistra del mio sito le immagini scorrevoli ma ad un certo punto si bloccano e ritornano in dietro.Ho provato a riscrivere il codice html di nuovo in un'altro gadget,ma il problema si ripresenta nuovamente.

    potrei inviarti l'intero codice html,magari a me sfugge l'errore.

    grazie mille.alice

    RispondiElimina
    Risposte
    1. @Alice4161
      Innanzitutto ti prego di postare il commento una sola volta. Se mi sfugge, cosa rara, puoi sempre ripostarlo.
      Il comportamento della scritta scorrevole che hai inserito mi fa pensare all'inserimento del tag
      behavior=’alternate’
      che fa andare l'oggetto alternativamente da sinistra a destra. Prova a toglierlo e dovrebbe essere tutto OK.

      Elimina
  5. Ho provato,ho tolto behavior="alternate"..ma il problema persiste.


    Ti chiedo scusa se ho postato due volte lo stesso commento.
    grazie.

    RispondiElimina
  6. Ciao ti volevo chiedere ho provato a mettere un'immagine nella pagina di benvenuto
    solo che l'immagine mi esce alla fine della pagina e non la riesco a far salire sopra =( puoi aiutarmi

    RispondiElimina
    Risposte
    1. ovviamente un'immagine scorrevole

      Elimina
    2. @VincenzoPugliese
      Quale pagina di benvenuto?
      Questa?
      http://www.ideepercomputeredinternet.com/2011/05/come-creare-una-pagina-di-introduzione.html
      Il codice della scritta va inserito dopo
      Contenuto pagina introduzione inizio
      Se poi viene mostrato dopo gli altri elementi non saprei da che dipende
      Prova a inserire un < div style=.... prima del codice e un /div alla fine in modo da mettere un margine basso o negativo con l'inizio

      Elimina
    3. mi da l'errore se lo cambio perche' il codice scritto sopra non lo riconosce nell'html ma solo nei gadget delle pagine , invece io lo devo inserire nel modello html e mi da errore del codice html error 500 :S
      mi puoi scrivere un codice che secondo te il modello html del blog legge ;) grazie

      Elimina
    4. @VincenzoPugliese
      Crea un codice di questo tipo
      <div style="position: absolute; left:30px; top:10px;"> <marquee ....."> ..... </marquee> </div>

      dove puoi modificare i parametri e inserire quello che vuoi nei tag marqueee. Se il modello non te lo salva incollalo in questo strumento
      http://blogcrowds.com/resources/parse_html.php
      e pigia su Parse, quindi prova a incollare nuovamente il risultato nel template.

      Elimina
    5. come posso far uscire tutti i post in 1 sola pagina ???
      pkè io l'ho messo pero' me ne ritrovo 2 post nella 2 pagina e la gente non se ne accorge :( c'è un limite di post per pagina o cosa devo modificare ???

      Elimina
    6. @VincenzoPugliese
      Immagino tu ti riferisca alla Homepage. Si possono settare il numero di post ma si tratta solo di un numero massimo. Blogger ne fa vedere solo un numero che è anche funzione della loro lunghezza. Basta comunque mettere un widget degli ultimi articoli per mostrare ai visitatori tutti gli articoli pubblicati recentemente

      Elimina
  7. Ciao Ernesto, volevo chiederti un aiuto, premetto che non sono molto pratica, però sono riuscita ad inserire nel mio blog un widget di testo che permette a delle immagini di scorrere in verticale. fin qui tutto ok, però scorrono (ovviamente) nell'ordine in cui le ho inserite, invece vorrei che scorressero in ordine casuale ... è una cosa fattibile??

    RispondiElimina
    Risposte
    1. @ Onestamente credo che non è fattibile senza usare del javascript e quindi complicando molto le cose

      Elimina
  8. ciao come faccio ad inserire l'immagine al posto del testo

    RispondiElimina
  9. e se volessi inserire piu' di una immagine una dietro l'altra?

    RispondiElimina
    Risposte
    1. Usa un editor di immagini come Photoshop o Gimp. Vai su File -> Nuovo e crei un progetto trasparente delle dimensioni desiderate. Poi ci importi tutte le immagini che vuoi distanziate le une dalle altre. Salvi il risultato come un solo file e segui le istruzioni di questo post dopo aver caricato il file immagine nel web anche utilizzando lo stesso Blogger creando una bozza che poi potrai eliminare
      https://www.ideepercomputeredinternet.com/2018/03/blogger-images-hotlink.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy