HTML
CSS
Introduzione
Coming Soon
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

<PICTURE>

Il tag <picture> definisce un contenitore di fonti multimediali multiple

Il tag PICTURE permette di rappresentare un contenitore che fornisce fonti multiple all'elemento <img> che contiene, di per sè, non visualizza nulla, si limita a fornire un contesto, indicando al browser (che sceglierà la fonte più adatta) quale risorsa immagine utilizzare in base alla densità dei pixel dello schermo, le dimensioni viewport, formato immagine, e altri fattori.
Il tag PICTURE può avere come elementi padre Embedded elements e contenere zero o più elementi <source>, seguiti da un elemento <img> opzionalmente mescolati con elementi Script-supporting

Categoria: Flow content , Phrasing content , Embedded content

Esempio: Tag PICTURE


Esempio: <PICTURE>

CODE: HTMLpreleva codice
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.       <meta charset="utf-8" />
  5.       <title>Titolo Documento</title>
  6.   </head>
  7.   <body>
  8. <h2>Test picture</h2>
  9. <p>Ridimensiona la finestra</p>
  10. <div style="max-width:512px;margin:0 auto;padding:0;border:black 5px solid">
  11.  
  12. <picture>
  13.  
  14.   <source media="(min-width: 512px)" srcset="./loader_img_512.gif">
  15.   <source media="(min-width: 350px)" srcset="./loader_img_350.gif">
  16.   <source media="(min-width: 256px)" srcset="./loader_img_256.gif">
  17.  
  18.   <img src="./loader_img_128.gif" alt="Loasing....">
  19.  
  20. </picture>
  21.  
  22. </div>
  23.   </body>
  24. </html>

Risultato: <picture>

Prova questo esempio

DEMO
PayPal DONATE

Note:
Le indicazioni dei Browser supportati sono indicative, grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

.?
.?
38
.?
25

Supporto Browser

Browser Support

Leggenda

= Solo per HTML5

= Non Supportato in HTML5

= Solo per CSS3

= Non Supportato in CSS3

Elenco Attributi:

Attributo Valore Descrizione
class Nome della classe Specifica il nome della classe a cui appartiene l'elemento
id id (nome unico) Specifica il nome unico (id) dell'elemento
style Defininizione dello stile Specifica lo stile per l'elemento
title Testo informativo Specifica informazioni aggiuntive dell'elemento
lang Codice linguaggio Specifica il codice lingua del contenuto negli elementi.
xml:lang Codice linguaggio Specifica il codice lingua del contenuto negli elementi in documenti XHTML.
dir rtl
ltr
Specifica la direzione del testo contenuto negli elementi.

Elenco Attributi HTML:

accesskey Valore tasto una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento
contenteditable true
false
Indica se il contenuto di un elemento è modificabile o meno
contextmenu menu (id) Indica un menu contestuale per un elemento, appare il menu contestuale quando un utente fa clic-destro sull'elemento
data-* Valore Utilizzato per memorizzare dati personalizzati privati dalla pagina o applicazione
draggable true
false
auto
Indica se è possibile trascinare l'elemento
dropzone copy
move
link
Indica se i dati trascinati devono essere copiati, spostati, o collegati al rilascio
hidden hidden Indica sè un elemento non è visible
itemid -- API sperimentale (attualmente non deve essere utilizzata)
itemprop -- API sperimentale (attualmente non deve essere utilizzata)
itemref -- API sperimentale (attualmente non deve essere utilizzata)
itemscope -- API sperimentale (attualmente non deve essere utilizzata)
itemtype -- API sperimentale (attualmente non deve essere utilizzata)
spellcheck true
false
Indica se l'elemento ha controllo ortografico e grammaticale
tabindex Numero Sovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato
translate yes
no
Indica se il contenuto di un elemento dovrebbe essere tradotto

Attributi Evento:

Attributo Evento Valore Descrizione
onblur Codice Script Lo script viene eseguito quando un elemento perde il focus
onchange Codice Script Lo script viene eseguito quando un elemento controllo perde il focus e il suo valore è stato modificato. Questo attributo si applica ai seguenti elementi: INPUT, SELECT e TEXTAREA
onclick Codice Script Lo script viene eseguito al click del mouse
ondblclick Codice Script Lo script viene eseguito al doppio click del mouse
onfocus Codice Script Lo script viene eseguito quando quando un elemento riceve il focus. Questo attributo può essere usato con i seguenti elementi: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, e BUTTON.
onload Codice Script Lo script viene eseguito al caricamento del documento. Questo attributo può essere usato con gli elementi BODY e FRAMESET.
onmousedown Codice Script Lo script viene eseguito quando viene premuto il pulsante sinistro del mouse
onmousemove Codice Script Lo script viene eseguito quando il puntatore del mouse si muove dentro un elemento
onmouseout Codice Script Lo script viene eseguito quando il puntatore del mouse si muove fuori da un elemento
onmouseover Codice Script Lo script viene eseguito quando il puntatore del mouse si trova sopra un elemento
onmouseup Codice Script Lo script viene eseguito quando il pulsante sinistro del mouse viene rilasciato
onreset Codice Script Lo script viene eseguito quando un modulo viene azzerato. Si applica solo all'elemento FORM.
onselect Codice Script Lo script viene eseguito quando un utente seleziona del testo in un campo di testo. Questo attributo può essere usato con gli elementi INPUT e TEXTAREA.
onsubmit Codice Script Lo script viene eseguito quando viene inviato un modulo. Si applica solo all'elemento FORM.
onkeydown Codice Script Lo script viene eseguito quando viene premuto un tasto
onkeypress Codice Script Lo script viene eseguito quando un tasto viene premuto e rilasciato
onkeyup Codice Script Lo script viene eseguito quando viene rilasciato un tasto
onunload Codice Script Lo script viene eseguito quando un documento viene chiuso. Questo attributo può essere usato con gli elementi BODY e FRAMESET.

Attributi Evento HTML:

onabort Codice Script --
onautocomplete Codice Script --
onautocompleteerror Codice Script --
oncancel Codice Script --
oncanplay Codice Script Lo script viene eseguito quando il browser stima che la risorsa media potrebbe non essere riprodotta con valore di rate corrente fino alla fine senza pause per il buffering
oncanplaythrough Codice Script Lo script viene eseguito quando il browser stima che la risorsa media potrebbe essere riprodotta con valore di rate corrente fino alla fine senza pause per il buffering
onclose Codice Script --
oncontextmenu Codice Script Lo script viene eseguito quando un menu contestuale viene attivato
oncuechange Codice Script Lo script viene eseguito quando uno o più spunti nella traccia sono diventate attive o smesso di essere attiva
ondrag Codice Script Lo script viene eseguito quando un elemento viene trascinato
ondragend Codice Script Lo script viene eseguito al termine di un'operazione di trascinamento
ondragenter Codice Script Lo script viene eseguito quando un elemento viene trascinato su una destinazione di rilascio valida
ondragexit Codice Script --
ondragleave Codice Script Lo script viene eseguito quando un elemento lascia una destinazione di rilascio valida
ondragover Codice Script Lo script viene eseguito quando un elemento viene trascinato su una destinazione di rilascio valida
ondragstart Codice Script Lo script viene eseguito all'inizio di un'operazione di trascinamento
ondrop Codice Script Lo script viene eseguito quando l'elemento trascinato viene rilasciato
ondurationchange Codice Script Lo script viene eseguito quando l'attributo "duration" viene aggiornato.
onemptied Codice Script Lo script viene eseguito quando il file è improvvisamente non disponibile a causa di un errore fatale durante il caricamento o perché il metodo load() è stato richiamato mentre l'algoritmo di selezione delle risorse era già in esecuzione
onended Codice Script Lo script viene eseguito quando il supporto multimediale è arrivare alla fine
onerror Codice Script Lo script viene eseguito quando si verifica un errore
oninput Codice Script Lo script viene eseguito quando un elemento riceve l'input dell'utente
oninvalid Codice Script Lo script viene eseguito quando un elemento non è valido
onloadeddata Codice Script Lo script viene eseguito quando il browser carica i dati multimediali nella posizione di riproduzione corrente per la prima volta
onloadedmetadata Codice Script Lo script viene eseguito quando i metadati (dimensioni, durata, tracce di testo) sono stati caricati
onloadstart Codice Script Lo script viene eseguito quando inizia a caricare i dati multimediali
onmouseenter Codice Script --
onmouseleave Codice Script --
onmousewheel Codice Script --
onpause Codice Script Lo script viene eseguito quando l'utente ha messo in pausa la riproduzione o tramite il metodo pause()
onplay Codice Script Lo script viene eseguito quando il browser ha avviato la riproduzione, tramite il metodo play() o l'attributo "autoplay" ha iniziato la riproduzione
onplaying Codice Script Lo script viene eseguito quando la riproduzione è pronto per iniziare, dopo essere stato messo in pausa o ritardata a causa della mancanza di dati multimediali
onprogress Codice Script Lo script viene eseguito quando il browser sta recuperando dati multimediali
onratechange Codice Script Lo script viene eseguito ogni volta che cambia la velocità di riproduzione
onresize Codice Script Lo script viene eseguito quando la finestra del browser viene ridimensionata
onscroll Codice Script Lo script viene eseguito quando si scorre la barra di scorrimento di un elemento
onseeked Codice Script Lo script viene eseguito quando l'attributo "seeking" è impostato su false per indicare che ricerca è finita, e dopo la posizione di riproduzione corrente è stata cambiata
onseeking Codice Script Lo script viene eseguito quando l'attributo "seeking" è impostata su true per indicare che la ricerca è attiva, e dopo che la posizione di riproduzione ha iniziato a spostarsi in una nuova posizione
onshow Codice Script Lo script viene eseguito quando un elemento <menu> mostra un menu contestuale
onsort Codice Script --
onstalled Codice Script Lo script viene eseguito quando il browser non può recuperare i dati multimediali per qualsiasi motivo
onsuspend Codice Script Lo script viene eseguito in caso di arresto durante il recupero i dati dei media per qualsiasi motivo
ontimeupdate Codice Script Lo script viene eseguito quando la posizione di riproduzione è cambiata
ontoggle Codice Script Lo script viene eseguito quando l'utente apre o chiude l'elemento <details>
onvolumechange Codice Script Lo script viene eseguito ogni volta che l'attributo "volume" o l'attributo "mute" cambia
onwaiting Codice Script Lo script viene eseguito quando l'elemento <video> o <audio> si ferma perché il fotogramma successivo non è ancora disponibile (buffer) in attesa di riprendere
NOTE: Si consiglia di scrivere SEMPRE i tag, gli Attributi e gli Attributi Evento in minuscolo.

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies