Hover su link

[tryhere]

Ho una freccia che collega ad un altra pagina. Vorrei creare un effetto tale che al passaggio del mouse sulla freccia questa diventasse di un altro colore.
Ho creato le due immagini (freccia verde e rossa). Vorrei utilizzare i css per farlo ma non so come.

[dementialsite]

Se fosse un link semplice (di solo testo), potresti cavartela con CSS.

Con le immagini la soluzione via CSS ci sarebbe anche, ma non sarebbe supportata da tutti i browser (anzi, forse quasi nessuno). Puoi ottenere lo stesso effetto usando dei JavaScript... prova a cercare "rollover" in rete o su questo forum...

Stammi bene...

[dreadnaut]

non vedo assolutamente il problema di dare un :hover ad un link e cambiarne lo sfondo Prova a guardare se questo esempio ti è di aiuto.

[tryhere]

Ho fatto come mi hai detto ma non mi visualizza il bottone:

css:

#next a {
    background:url(../images/arrows/next.gif);
}

#next a:hover {
    background:url(../images/arrows/nextlight.gif);
}

index:

<div id="next">
            <a href="#" onclick="update('starcraft/story/legapotenzeunite.php','right')"></a>
</div>

[darkwolf]

Se vuoi usare javascript vedi questo:
http://darkwolf.altervista.org/script/test/index.htm

[tryhere]

Come scritto in precedenza cercavo una soluzione che prevedesse l'uso dei css.

[unlocketor]

Leggi qui.

E' in inglese ma può aiutarti.

[tryhere]

Nel codice che ho postato sopra ho fatto come c'è scritto nel link (cioè come mi ha detto dreadnut) ma non mi funziona.

magari hai sbagliato qualcosa nel codice...metti il link della pagina così possiamo controllare

[tryhere]

Qui bisogna cliccare su "Prologo:gli Xel'Naga" e in basso dovrebbe apparire la freccia blu. Invece non appare.

[dreadnaut]

non hai idea di come funzionano i css, vero

per assegnare ai tuoi link un stile, devi dargli un nome (class o id) e creare regole con lo stesso nome. Quindi devi aggiungere qualcosa tipo:

<a class="freccia" href="#" onclick="update('starcraft/story/xelnaga.php','right')">

e nel css dovrai chiamare la regola con lo stesso nome:

a.freccia {
    padding-left: 24px;
    background:url(../images/arrows/next.gif) left no-repeat;
}

a.freccia:hover {
    padding-left: 24px;
    background: url(../images/arrows/nextlight.gif) left no-repeat;
}

consiglio gratuito: pessima la pratica di caricare pezzi di pagina via javascript, sarebbe piu' saggio avere pagine separate.

[tryhere]

io ho fatto nel div quello che tu mi dici di fare nell'a. Non è la stessa cosa?
Inoltre, perchè pessimo il caricamento in javascript? Consente di non ricaricare ogni volta le stesse parti della pagina.

[dreadnaut]

io ho fatto nel div quello che tu mi dici di fare nell'a. Non è la stessa cosa?

Lo sarebbe, se l'avessi fatto correttamente. Il tuo div si chiama postbody mentre la regola css si chiama next. Il primo e' un class, il secondo e' un'id (mentre piu' elementi possono avere la stessa classe, solo un elemento della pagina puo' avere un particolare id). E percio' la regola non viene applicata all'elemento giusto.

Inoltre, perchè pessimo il caricamento in javascript? Consente di non ricaricare ogni volta le stesse parti della pagina.

Gia', ma i motori di ricerca non eseguono gli script, e se uno ha javascript disabilitato non potra' vedere nulla.

[tryhere]

Scusa, hai ragione. Il problema è che dentro al mio div postbody ci sono vari tag a e io voglio mettere lo sfondo della freccia solo a quello con id="next". Come posso fare?

[dreadnaut]

nella tua pagina al momento nessun link ha id="next". Una volta che tale link esiste, le regole per raggiungerlo saranno

#next { ... }
#next:hover { ... }

[tryhere]

Il link con id="next" esiste ma si trova nella pagina php che includo attraverso javascript...

[dreadnaut]

trovato, tralascia quanto ho detto sopra a questo punto. Il problema e' che il link non contiene nessun testo*, quindi le sue dimensioni sono 0px * 0px. Nel css dovrai specificarle tu a mano:

#next a {
    background:url(../images/arrows/next.gif);
    width: 16px;
    height: 16px;
}

#next a:hover {
    background:url(../images/arrows/nextlight.gif);
}

[*] la mancanza di testo nei link e' un'altra cosa pessima, come hai potuto verificare sulla tua pelle: se l'immagine non carica per qualche motivo, non vedi nulla, ed il link non ha un significato per chi cerca di capire a cosa serva senza guardare l'immagine.

[tryhere]

Ho fatto come mi hai detto ma non funziona.

[dreadnaut]

il problema resta sempre che il tuo link è vuoto, senza testo fra <a> ed </a>, e non è bello. Se proprio non vuoi scriverci nulla, puoi aggiungere al suo css la riga

display: table-cell;

che dovrebbe andare su tutti i browser...

[tryhere]

funziona! grazie mille!
ancora una cosa...
se volessi allineare la freccia sinistra a sinistra e quella destra a destra come posso fare?

[dreadnaut]

temevo l'avresti chiesto, e siccome tapullo dopo tapullo sta diventando una schifezza, a questo punto diventa troppo complesso spostarlo a destra senza avere del testo dentro. Quindi ti tocca scegliere

[tryhere]

se allora metto un testo vuoto?

[dreadnaut]

:sbonk: come se ci fosse differenza.

#next { text-align: right; }

#next a {
 padding-right: 20px;
 background: url(../images/arrows/next.gif) right no-repeat;
}

#next a:hover {
 background: url(../images/arrows/nextlight.gif) right no-repeat;
}

<div id="next">
 <a href="#" onclick="update('starcraft/story/legapotenzeunite.php','right')">Avanti</a>
</div>

[tryhere]

mi hai scritto che diventa complicato se non c'è testo dentro...

edit 2x:

ho fatto come mi hai detto ma rimane allineato a sinistra

ho inserito il testo nel link ma non funziona...

[dreadnaut]

pazienza e tasto edita

non hai fatto come ti ho scritto, hai solo mescolato le due soluzioni. Usa il codice finale, esattamente come nel post sopra, togliendo i vari rattoppi precedenti (height, width, table-cell, etc...)

[tryhere]

Funziona quasi perfettamente...l'unico problema è che la freccia appare leggermente tagliata sotto...

[dreadnaut]

line-height: 20px;

per il link dovrebbe aggiustarlo. O valori più alti, vedi tu

e cerca di risolvere le tue crisi di identità

[tryhere]

ho settato:
line-height: 100px;
ma non fa altro che alzare la freccia (che rimane tagliata)...
quali crisi di identità?

[dreadnaut]

ancora non hai copiato esattamente il codice di cui sopra mancano ancora i "right"

comunque, vista la nuova evoluzione con il &nbps; tanto anni '90, invece di padding-right metti padding: 15px; e via.

[Ospite]

ops! non li avevo visti...
comunque cos'ha il &nbps; che non va (chiedo giusto per sapere).
Un ultima cosa, visto che mi hai aiutato così tanto: a sinistra della freccia compare un quadratino blu...cos'è? si può togliere?