• Programmazione » CSS » Tutorial CSS

Un esempio classico di "mappa cliccabile" potrebbeessere un immagine dell'Italia in cui, cliccando sullevarie regioni, richiamare le pagine ad esse relative.

Nessun problema per una cartina d'Italia ma se dobbiamorendere palesi queste aree cliccabili su d'una cartinastradale (ad esempio per indicare i punti di ristoro, iparcheggi, etc.) la prima idea che ci viene in mente èquella di sovrapporre alla mappa delle immagini gif animateche, magari "lampeggiando" , attragganomaggiormente l'attenzione.

Una bella idea ma irrealizzabile con le normali "mappecliccabili" (n.d.a. o quantomeno io non ci sono mairiuscito!) ed è a questo punto che entrano in gioco iCSS: possiamo infatti utilizzare l'immagine della cartinastradale come immagine di sfondo di un<div>...</div> e, al suo "interno" ,posizionare le gif dei nostri "segnalini".

Vediamo quindi i CSS necessari:

innanzitutto viene impostata la dimensione del <div>eguale alla dimensione dell'immagine da utilizzare comemappa che, a sua volta, verrà utilizzata come sfondodel <div> stesso. La tipologia di posizionamento deveessere "relativa" altrimenti sarà bendifficile riuscire poi a posizionare i nostri segnalini. Unpiccolo bordo poi, non guasta mai anche se non èindispensabile.

Volendo utilizzare gli elenchi puntati debbono esserenecessariamente impostate alcune proprietà per il tag<ul> interno al <div> della mappa: per prima cosalo sfondo trasparente in modo da consentire la visionedell'immagine di sfondo, quindi margini e spaziatura dalbordo azzerate, dimensioni eguali a quelle del <div> enessuno stile per le voci dell'elenco.

I vari anchor inseriti nelle voci dell'elenco puntatodovranno avere una posizione assoluta, mostrare come cursorela classica "manina" ed avere uno z-indexabbastanza alto o, comunque, superiore a quello eventualmenteassegnato al <div> contenente la mappa.

Ogni voce <li>...</li> è identificataunivocamente da un suo id che, in questo caso, è lalettera "p" seguita da un numero progressivo apartire da uno. Il valore assegnato ai vari id non èrestrittivo: potete benissimo utilizzarne altri a vostropiacimento.

Come visibile dal codice, per ogni punto vengono dichiarati ivalori al posizionamento left e top sapendo che le coordinateleft 0 e top 0 corrispondono all'angolo in alto asinistra della nostra mappa. Se visualizzando la mappanotaste che uno o più punti sono esterni ad essa (adestra o in basso) significa che avete inserito un valore dileft e/o top che eccedono la dimensione della mappa stessa.

Terminata la definizione dei CSS, vediamo il codice HTMLdella "mappa" che non credo abbia bisogno dispiegazione alcuna data la relativa semplicità:

Gli anchor potranno poi essere personalizzati in base alleproprie esigenze: inserendo gli indirizzi URLnell'attributo href, intercettati gli eventi onmouseovered onmouseout, etc. in poche parole ... come qualsiasi altrolink.