Codice per mettere delle immagini come a:link, a:hover,...

Ciao a tutti, è da un paio d'ore che sto impazzendo per far funzionare questa cosa non avendola mai fatta prima ma non ci riesco... ho anche cercato in giro ma senza successo =(

Allora: sto costruendo un nuovo sito e voglio fare un menu con delle immagini, in modo che al passaggio e al click del mouse queste cambino (es. tipo il menû du questo sito: www.gpxplus.net) Per ora sto solo cercando di capire come funziona quindi le immagini non sono definitive, solo esempi, ma rendono l'idea

La pagina su cui sto lavorando è www.originalconcorso.altervista.org/home.htm


Sono quasi sicura che il codice css è giusto, infatti se nell'html metto solo una scritta qualsiasi fra i tag del link (es. <a href.....>MENU</a>) come sfondo effettivamente mi fa vedere le due immagini che ho messo in a:link e a:hover che cambiano al passaggio del mouse. Non riesco invece a capire cosa devo mettere nel codice html.


Attualmente questo è quanto ho scritto nella pagina del css:

#img2 {
position: absolute; 
top: 119px; 
left: 20px;
}

a:link {
background-image: url(http://originalconcorso.altervista.org/menubianco.png); 
}

a:visited {
background-image: url(http://originalconcorso.altervista.org/menubianco.png); 
}

a:hover {
background-image: url(http://originalconcorso.altervista.org/menuhome.png); 
}

a:active { 
background-image: url(http://originalconcorso.altervista.org/menuhome.png); 
}

Questo invece è la parte che lo riguarda nell'html, so che fra i tag del link devo mettere qualcos'altro (al posto dell'immagine), ma... cosa? Ho provato a mettere un div vuoto a cui poi con i css davo le misure giuste, ma così facendo scompare tutto...

<a href="http://originalconcorso.altervista.org/home.htm"><img id="img2" src="http://originalconcorso.altervista.org/menubianco.png" border="0"></a>

Qualcuno che ha voglia potrebbe gentilmente scrivermi il codice esatto? Grazie!

P.S. In seguito darò un id anche ai link

nel sito che dici tu l'effetto é stato usando delle liste (ul, li) il css é più o meno così:

ul#ulid{
       list-style: none;
         }
ul#ulid li{display: inline;margin: 0 2px}
ul#ulid a{background-image: http://indirizzoimmagine;}
ul#ulid a:hover{background-image: http://indirizzoimmagine;}

nel codice html devi mettere

<ul id="ulid">
<li><a href="LINK"></a></li>
<li><a href="LINK"></a></li>
<li><a href="LINK"></a></li>
</ul>

Ci sono riuscita! Non con le liste, ma il suggerimento mi è comunque servito a capire che nei tag del link (fra <a href...> e </a>) posso anche non mettere niente... poi nei css ho dato una dimensione e una posizione al link e ora funziona =) Grazie mille!

[dementialsite]

Ci sono riuscita! Non con le liste, ma il suggerimento mi è comunque servito a capire che nei tag del link (fra <a href...> e </a>) posso anche non mettere niente... poi nei css ho dato una dimensione e una posizione al link e ora funziona =) Grazie mille!

Diciamo che il tuo problema era proprio quello: con l'immagine dentro il link stavi "oscurando" lo sfondo, che di conseguenza a te sembrava che non venisse cambiato.

Stammi bene...

Ho capito... grazie per l'aiuto!

[dreadnaut]

Ci sono riuscita! Non con le liste, ma il suggerimento mi è comunque servito a capire che nei tag del link (fra <a href...> e </a>) posso anche non mettere niente... poi nei css ho dato una dimensione e una posizione al link e ora funziona =) Grazie mille!

Lasciare dei tag <a> senza niente dentro è la seconda peggior abitudine di sempre:

• i link non si vedono finchè le immagini non sono state caricate
• se le immagini non caricano, non ci sono link
• se l'utente non può vedere le immagini (screen reader, telefonino, poca banda?) non ha idea che i link esistano
• i motori di ricerca vedono dei link vuoti, ridono alle tue spalle e li considerano come i meno interessanti dell'intero web

Usa come minimo almeno un testo nascosto via css.

edit: bonus, un award per il tuo sito.

edit: bonus 2x

Siamo nel 2010, e si possono usare font sul web, e fare a meno di disegnare tre immagini per bottone. Prova a cercare "web fonts" su google, o più semplicemente usa il font Tangerine come gentilmente servito da Google.