~sanbombo92 |
|
| 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):
Struttura html
La struttura html consista in un semplice div con un identificatore unico con al suo interno 5 elementi (i link) con ogni uno un id proprio e una classe per i link che condividono stesso stile css (quelli del menu in basso).
<div id="image_map">
<a id="link1">
Il CSS per creare un immagine mappata
Iniziamo per dare lo stile css al div contenitore (id=”image_map”), specifichiamo:
* la larghezza (width): la stessa larghezza del immagine di sfondo
* l’altezza (height): la stessa larghezza del immagine di sfondo
* l’immagine di sfondo usando la proprietà css background
* una posizione relativa per di seguito potere posizionare il suo contenuto in modo assoluto.
#image_map{
width:450px;
height:400px;
background:url(css_image_map.jpg) no-repeat;
position:relative;
}
Lo stile generale dei link contenuti in ‘image_map’:
* display:block; da elementi inline le convertiamo in elementi di blocco per poi potere
impostare una larghezza e altezza (leggi la differenza tra elementi inline e di blocco per maggiore informazione)
* position:absolute; ogni elementi sono posizionati in modo assoluto in rapporto al loro div contenitore.
#image_map a{
display:block;
position:absolute;
}
Tutti i link del menu in basso condividano più proprietà css, di la è stato scelto di applicare una classe
comune per evitare di dovere ripetere stesso css per ogni uno: la largezza (width) di 100px, l’altezza (height) di 50px e la loro posizione (top) a 340px del bordo superiore del loro div contenitore.
#image_map a.menu{
width:100px;
height:50px;
top:340px;
}
Altro lo stile css comune, ogni link ha un identificatore unico (link1, link2, link3…) che usiamo per dare il loro stile specifico.
Per il primo link che coprirà la zona della foto con la rana: la larghezza (width) di 430px, l’altezza (height) di 320px, la posizione verticale a 10px del bordo superiore e orizzontale a 10px del bordo sinistra del div contenitore.
#image_map a#link1{
width:430px;
height:320px;
top:10px;
left:10px;
}
Visto l’uso della classe ‘menu’ per gli 4 link del menu, rimane da specificare per ogni uno la loro posizione
orizzontale partendo del bordo sinistra del div contenitore.
#image_map a#link2{
left:10px;
}
#image_map a#link3{
left:120px;
}
#image_map a#link4{
left:230px;
}
#image_map a#link5{
left:340px;
}
Immagine mappata, il risultato finale
guardate sulla fonte
FONTE: importantissimo! sono i migliori |
| | |
