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:
Codice:
#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...
Codice:
<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
