[javascript (forse)] inserire due immagini che cambiano per ogni link

[oioi]

Salve a tutti,

non so se la soluzione al mio problema sia javascript, so solo che ho perso fino adesso un sacco di tempo :-/ (si, spesso mi perdo in un bicchier d'acqua... ma nessuno nasce "imparato" purtroppo per me)

Io desidererei realizzare una pagina HTML con diversi collegamenti ipertestuali e vorrei farlo tramite delle immagini cliccabili per ognuno di essi.
Ogni collegamento dovrebbe avere due immagini: una che si vede solo quando il mouse ci passa sopra (ma non ci clicca) e l'altra che si vede di "default" (quando non ci passa sopra niente)

In totale dovrebbero essere sei/sette collegamenti, per un totale di dodici/quattordici immagini da utilizzare.

Come posso fare a realizzare tutto questo? (anche non in javascript se esiste un modo - ho poche conoscenze)

Ringrazio in anticipo per le eventuali risposte che spero positive^^

[artorius]

Puoi farlo coi Javascript, ma è molto più semplcie usare i CSS:
metti un <div> in un <a>, al div asseni il background-image e lo cambi con l'hover dell'a.

Coi javascript devi indicare che all'evento onmouseover dell'elemento cambi il background con l'altra immagine, mentre all'evento onmouseout l'immagie torna quella di prima.

C'è un effetto molto carino da implementare con una libreria di effetti (uso mootools 1.11 in questa):

HTML

<div style="background-image: url(images/logo.gif); background-repeat: no-repeat; width: 140px; height: 84px; border: 1px solid black;" id="blenddiv">
       [img]images/logo2.gif[/img]
</div> 

Javascript

window.onload = function(){
    $('blenddiv').addEvent('mouseenter', function(){
        opacity('blendimage', 0, 100, 300);
    });
    
    $('blenddiv').addEvent('mouseleave', function(){
        opacity('blendimage', 100, 0, 300);
    });
} 

Nel momento in cui apri la pagina, il div contiene un immagine con opacity 0 (trasparente), quindi si vede lo sfondo del div che è l'immagine iniziale. Al passaggio del mouse l'immagine compare con un effetto morbido.

[oioi]

C'è un effetto molto carino da implementare con una libreria di effetti (uso mootools 1.11 in questa)

Una libreria di effetti? nel senso che dovrei installare questa cosa sul server o non la posso usare? (per capirci io non ho un server ma sto usufruendo di uno spazio gratuito per "impratichirmi", so che posso usare il "php5" mettendo tutto in una cartella e per database e altre cose devi fare degli upgrades, quindi il mio sito per ora è progettato solo in html)

Comunque per la cosa di prima ho (in parte) risolto, forse avevo risolto anche prima ma avevo fatto un errore tremendamente stupido
L'ho fatto in javascript anche se ci capisco veramente poco (è incredibile che la cosa funzioni...)

per il css sono ancora in alto mare... devo leggere qualche guida...

[artorius]

No, scusa, per libreria si intede un file JS che contiene una serie di funzioni o implementi delle classi di oggetti che servono a fare determinate azioni javascript con una solo riga di codice.
Tu devi sono importare il file nella pagina. (<script src="js/mootools-1.11.js" type="text/javascript" /> nell'head)

[oioi]

Un po' come un'immagine jpeg... Grazie, capito, era più semplice di quel che pensassi^^

(lì dentro ci sono una serie di "effetti" che si possono richiamare dove si mette il tag giusto? - nell'head quello per richiamare quel file e i vari tag nel body intendo)

RIEDIT: Ho trovato questo: http://docs.mootools.net/

Ma come faccio a vedere le cose che posso fare con quel file?
(mi sembra comunque che questi mootools siano un buon punto di inizio per me in quanto sono opensource e quindi posso vedere/utilizzare tutto più o meno liberamente, grazie ancora)

[artorius]

Mootools è decisamente un bon punto di inizio, dai un'occhiata a http://demos.mootools.net/