Strumenti per il web design

[<a href=“#”>]

Menu grafico

Supponiamo di volerRealizzare un menu graficoComposto da alcune iconeAffiancate una accanto all’altra che al passaggio del mouse diventano più scure

Per prima cosa All’interno del file Index.html creo un div Principale che conterrà tutti i bottoni e che chiamerò bottoniE poi quattro div al suo interno che chiameròBottone1Bottone2Bottone3Bottone4

Menu grafico

<div id="bottoni"><a href="#"><div id="bottone1"></div></a><a href="#"><div id="bottone2"></div></a><a href="#"><div id="bottone3"></div></a><a href="#"><div id="bottone4"></div></a></div>

E inserisco li link al sito o alle pagine desiderate (qui per comodità abbiamo inserito solo un simbolo di # e non l’indirizzo vero e proprio

<div id="bottoni"><a href="#"><div id="bottone1"></div></a><a href="#"><div id="bottone2"></div></a><a href="#"><div id="bottone3"></div></a><a href="#"><div id="bottone4"></div></a></div>

Nel foglio di stile definisco le caratteristiche del div “bottoni” tenedo conto che le immagini che devo inserire sono 4 e di grandezza 103px X 103pxQuindi l’altezza dovrà essere appunto 103 e la larghezza 103x4 quindi almeno412. Per comodità lo faremo largo 500px

#bottoni {width:500px;height:103px; }

10

3p

x103px

#bottoni {width:500px;height:103px; }

Successivamente definisco le caratteristiche di bottone 1 2 3 e 4 Ad ogni bottone metto come sfondo una delle quattro immagini che come sempre si trovano nella cartellina delle immagini che si chiama imgInoltre inserisco il comando float:leftAffinché gli elementi possano affiancarsi l’uno all’altro e non stare uno sotto l’altro

#bottone1 {height:103px;width:103px;background: url (img/but1.jpg) no-repeat;float:left;}

#bottone2 {height:103px;width:103px;background:url(img/but2.jpg)no-repeat;float:left;}

10

3p

x103px

Per fare in modo che al passaggio del mouse il bottone diventi + scuro, oltre a definire bottone1, bottone2, ecc, definisco anche il suo comportamento in hover .Le caratteristiche saranno le stesse di bottone 1, bottone2, ecc ma a cambiare è l’immagine di sfondo e l’indicazione di hover

#bottone1 {height:103px;width:103px;background: url (img/but1.jpg) no-repeat;float:left;}

#bottone1:hover {height:103px;width:103px;background: url (img/but1_h.jpg) no-repeat;float:left;}

10

3p

x103px