In questo tutorial, vedremo come aggiungere link sopra un immagine di sfondo per ricreare l’effetto in css del ‘image map’, immagine mappata senza l’uso dell’elemento html <map>.

Questa tecnica è usata quando vogliamo rendere parte di un’immagine cliccabile e è valida
per delimitare zone rettangolare.

Per primo, ho creato un immagine di sfondo costituita di una foto in alto e un menu con 4 pulsanti in basso:

A questa immagine, aggiungerò 5 zone cliccabile, la prima essendo la foto della rana, gli altri 4, i 4 link del menu in basso.

Per capire meglio quello che dobbiamo realizzare, ho ricreato la stessa immagine con i delimiti di ogni pulsanti (in bianco), le loro misure (width e height) e il loro posizionamento (top e left):

Per creare un elemento a angoli arrotondati, abbiamo la proprietà css3 border-radius che (purtroppo) non è ancora supportata da tutti i browser. Nel fratempo, possiamo ricreare gli angoli arrotondati in css con l’uso di un unica immagine e la proprietà background-position (e qualche extra div nel nostro html).

Questa unica immagine è composta dai 4 angoli e impostata come immagine di sfondo a 4 div differente seguendo questa struttura html:

• div id=”contenitore” : il div principale che contiene sia gli angoli che il contenuto
  • div class=”css_angoli” id=”angolo_superiore_sinistra” : il div che contiene la parte superiore e a quale è applicato l’immagine di sfondo per creare l’angolo sinistra
    NB: l’uso di una classe comune per tutti gli div con un angolo per evitare di ripetere stesse regole css per ogni uno e l’uso d’un identificatore unico per ogni div con un angolo per posizionare la stessa immagine di sfondo con il background-position
    • div class=”css_angoli” id=”angolo_superiore_destra” : il div a quale è applicato l’immagine di sfondo per creare l’angolo superiore destra
    • div class=”colore_sfondo” : il div che riempi lo spazio con il colore di sfondo tra i 2 angoli
      NB: l’uso di questo extra div è dovuto al fatto che gli angoli sono png trasparente e non si vuole riempire tutto il div del colore di sfondo, il quale coprirebbe tutta la larghezza e renderebbe l’effetto inutile
  • div class=”contenuto” : il div che contiene il proprio contenuto
  • div class=”css_angoli” id=”angolo_inferiore_sinistra” : il div che contiene la parte inferiore e a quale è applicato l’immagine di sfondo per creare l’angolo sinistra
    • div class=”css_angoli” id=”angolo_inferiore_destra” : il div a quale è applicato l’immagine di sfondo per creare l’angolo inferiore destra
    • div class=”colore_sfondo” : lo stesso div che per la parte superiore (di la l’uso della class visto che condividano stesso stile css)

Le regole css usate

Lo stile css è basato principalmente sul uso della proprietà background, riusando la stessa immagine di sfondo e posizionata per ogni angolo in maniera differente con la proprietà background-position.

Altro quello è usato le margine (margin) per allineare i div ‘colore_sfondo’ con i suoi angoli e il height per impostare un altezza specifica (l’altezza degli angoli).

Per fare capire meglio le regole css applicate, allego un immagine del box model.

Di seguito due esempi concreti con relative spiegazione.

Di tutti i campi di forma, il campo input di tipo ‘file’ è uno dei peggiori quando viene a li dare stile css.

Windows Explorer offre poche possibilità di stile, Mozilla un pò di meno e nulla per altri browsers.
Specialmente il pulsante ‘Sfoglia’ è completamente inaccessibile allo stile css.

Quando sono applicate le normale regole css ai campi di tipo ‘input’, i campi di tipo ‘file’, non funzionano correttamente e ci sono grande differenze d’interpretazione tra i vari browsers e dare stile css al pulsante di default è impossibile.

Di seguito, vedremo 2 soluzione da applicare sia puramente in css che in javascript.

Questo articolo è una traduzione della versione originale in inglese intitolata Styling an input type=”file” e pubblicato su questo sito con l’autorizzazione del autore.

Di seguito vedremo il modo di potere centrare:

• orizzontalmente un elemento a larghezza fissa
• orizzontalmente un elemento a larghezza non conosciuta
• verticalmente un elemento ad altezza fissa
• verticalmente un elemento ad altezza non conosciuta
• orizzontalmente e verticalmente un elemento a misure fisse
• orizzontalmente e verticalmente un elemento a misure non conosciute
• orizzontalmente e verticalmente una singola riga di testo

In questo tutorial, vediamo come creare un menu css dropdown orizzontale di base usando liste non ordinate e liste innestate.

Userò la proprietà css visibility per nascondere i sub item del menu e renderli visibile sullo stato :hover.

Il menu css funziona per i maggiori browser di recente edizione.
Alla fine dell’ articolo, spiegherò come farlo funzionare anche per Internet Explorer 6.

Con questo tutorial, vediamo come usare un’ unica immagine di sfondo da applicare a un pulsante per creare i 3 stati (normale, sopra e selezionato) a un pulsante.

Questo metodo permette di avere una singola immagine caricata da l’inizio e evitare problemi di ’scatti’ tra i differenti stati quando più immagine di sfondo vengono usate su chiamata del stato stesso.

L’idea sarà realizzata usando la proprietà CSS background-position,
spostando il sfondo con i valori top, center e bottom.

Grazie all’uso della proprietà css z-index, possiamo facilmente aggiungere uno sfondo Flash (swf) a un contenuto HTML.
Le base per aggiungere un swf come sfondo sono…
Per il contenitore che contiene entrambi swf e altri elementi html:

un width e height, larghezza e altezza
una position:relative; per potere posizionare il swf in modo assoluto in rapporto a questo contenitore

Per [...]

Usando 3 immagini di sfondo, possiamo creare un pulsante che prende la larghezza del suo contenuto testo.

Questo metodo è utile per creare menu per quale i pulsanti hanno diverse misure come dimostrato nel seguente esempio…

L’idea di base è di impostare dentro il nostro elemento a:

• un’immagine per creare la parte sinistra ad un elemento vuoto: em in quest’esempio
• un’immagine per creare lo sfondo ad un elemento che contiene il testo: span in quest’esempio
• un’immagine per creare la parte destra ad un elemento vuoto: b in quest’esempio

In questo tutorial spiegherò com’evitare un problema che tanti principianti in css ed utente di Firefox possono incontrare.
Per quello che usano IE, il ‘problema’ non è visibile per errore d’interpretazione del browser.

Il problema incontrato si pone quando vogliamo usare la proprietà css float su un elemento contenuto in un blocco (div) contenitore a qual è applicato uno sfondo o bordo.
Lo sfondo/bordo del contenitore non si ridimensiona automaticamente in altezza per accomodare il suo elemento ‘floatato’ e rimane per quasi dire invisibile mentre il ‘float’ si ritrova sotto il suo contenitore.