Creare delle icone [era: Home sito!]

Scusate volevo chiedere una cosa;;Io vorrei avere una home del sito come ad esempio questo ma come faccio a creare quelle icone??!!iNSERENDO delle immagini gif...o come???
Grazie Mille


FunCool: Modifico il titolo.

Semplicemente creando una serie di Link associati a delle immagini.

Codice HTML:

---

<a href="indirizzo"><img src="img" /></a>

---

Ovviamente è qualcosa di molto spartano... se vuoi applicare effetti particolari sulle immagini, come il menu a tendina quando ci clicchi sopra, devi usare Javascript.

Grazie Mille vado a cercare cosa posso fare per i Javasript nel forum!!

Citazione:

---

Originalmente inviato da Lorenzinino

Scusate volevo chiedere una cosa;;Io vorrei avere una home del sito come ad esempio questo ma come faccio a creare quelle icone??!!iNSERENDO delle immagini gif...o come???
Grazie Mille

---

Wow... noto con piacere che almeno qualcuno il mio sito lo guarda...

Se ti stai riferendo al menu in alto, ecco i due trucchetti.

Far sì che le icone si muovano al passaggio del mouse è relativamente semplice, bastano due righe di CSS:

Codice:

---

IMG.menu_out { position:relative; top:0; left:0; margin:0.3em }
IMG.menu_hover { position:relative; top:0.3em; left:0.3em; margin:0.3em }

---

per poi dichiarare così le immagini:

Codice HTML:

---

<IMG SRC="..." CLASS="menu_out" onMouseOver="this.className='menu_hover'" onMouseOut="this.className='menu_out'">

---

Naturalmente, al posto di SRC dovrai inserire il file corrispondente alla tua immagine (una normale GIF, JPG, PNG di dimensioni ridotte, tipo 32x32 pixel).

I menu come saltano fuori sono leggermente più complicati. Ti fornisco i dettagli qui di seguito:
- il codice tipo della struttura dei menu, che deve comparire PER ULTIMO nella tua pagina prima della chiusura </HTML>:

Codice HTML:

---

<!-- assegna ad ogni menu un ID diverso -->
<DIV ID="..." CLASS="menu_popup">
<!-- accertati che ci sia un'immagine per chiuderlo... -->
<IMG CLASS="command" SRC="..." ALT="Chiudi popup" TITLE="Chiudi popup" WIDTH="..." HEIGHT="..." onClick="popdown()">
<!-- qui il contenuto del menu, formattato come vuoi in HTML -->
</DIV>

---

- il CSS, che all'inizio nasconderà tutti i menu:

Codice:

---

/* specifica una larghezza limitata, oppure il menu si estenderà a tutta pagina... */
DIV.menu_popup { position:absolute; top:0; left:0; display:none; width:... }

---

- come devi modificare le immagini perché, cliccandoci sopra, esca il menu:

Codice HTML:

---

<IMG SRC="..." onMouseDown="popup('menu_id',event)">

---

- infine, il JavaScript che regola il tutto:

Codice:

---

function mouseX (e)
{
        return e.clientX + document.body.scrollLeft
}

function mouseY (e)
{
        return e.clientY + document.body.scrollTop
}

// specifica qui l'elenco dei menu che vuoi controllare, ad esempio "menu_id"
var menuIDs = new Array (...)

function popdown ()
{
        for (var i = 0; i < menuIDs.length; i++)
                document.getElementById (menuIDs[i]).style.display = "none"
}

/*
ID: elemento da visualizzare
e: impostare event
*/
function popup (ID, e)
{
        popdown ()
        document.getElementById (ID).style.display = "block"
        document.getElementById (ID).style.top = mouseY (e) - 10
        document.getElementById (ID).style.left = mouseX (e) - 10
}

---

Stammi bene...

Grazie Mille!!!NN so come ringraziarvi!!!