cambiare le img onmouseover

[pierofix]

Oggi come oggi il problema del caricamento sta passando sempre di più in secondo piano, vuoi per la diffusione delle connessioni ad alta velocità, vuoi per gli strumenti che permettono di comprimere al meglio i media presenti nei documenti.

Insomma, per siti che non devono mostrare foto enormi o di altissima qualità o altri media particolari, direi che la soluzione del precaricamento non debba essere presa in considerazione.

Se poi pensiamo anche che le immagini di grafica vengono caricate una volta sola all'ingresso del sito (in quanto i riferimenti sono inseriti nel css esterno), allora saremo ancora più d'accordo nel dire che javascript va usato per altri più nobili scopi (con un occhio di riguardo - come sempre - per l'accessibilità).

[GordonMX]

piero ti devo rompere le p.. ancora un po'!

Ho provato a fare il tutto ma non mi funziona.. forse perché il codice è un po' più complicato di quello mostrato nel tuo esempio. La pagina che voglio modificare la trovi cliccando qui.

Come vedrai ci sono 3 img con effetto onmouseover. Ora sto cercando di far funzionare l'ultima.. quella per la lingua spagnola..

quindi nella pagina html ho messo:

<div id="espanol">
mira la version espanola
</div>

e nel foglio di stile:

#espanol {
position:absolute;
left:303px;
top:245px;
width:137px;
height:57px;
}
#espanola {
text-indent:-9999px;
width:137px;
height:57px;
background: url(immagini/espanol.gif) no-repeat 50% 50%;
}
#espanola:hover {
width:137px;
height:57px;
background: url(immagini/espanol-over.gif) no-repeat 50% 50%;
}

ma non funziona !!! perchè???????

[pierofix]

Io non ho parlato di div. E poi, dati i problemi di compatibilità che "text-indent:-9999px" può generare, avevo consigliato una soluzione tipo

<span>Testo del pulsante</span>

ove lo span veniva reso invisibile tramite visibility:hidden;.

E poi, non serve ripetere le dimensioni width e height nell'hover di un elemento: quelle vengono ereditate.

[GordonMX]

ma cosa devo fare se lo devo mettere all'interno di un div per questioni di layout??? Posso?????

ad ogni modo il testo del pulsante lo posso anche eliminare dato che l'immagine ha il testo raster

[pierofix]

No, aspetta un attimo.

Per questioni di layout? Ma scusa, quanto stai a dare il position direttamente al tag a? Prima occorre definire bene il markup, cercando di tradurre al meglio il contenuto e dando alla struttura un senso logico e semantico; poi, e solo poi, ci si concentra sulla grafica. La struttura del markup dei tuoi documenti segue questi principi?

Cosa intendi con "il testo del pulsante lo posso eliminare"? Il testo nell'immagine o quello inserito in html?

[GordonMX]

parlavo del testo inserito in html..

Sì, io cerco di seguire questi principi ma sono passato dal conoscere ZERO di linguaggi di programmazione ad avere una conoscenza base negli ultimi 5 mesi quindi ho ancora delle difficoltà...solo questione di pratica!



PS: ora provo togliendo il div

[GordonMX]

tutto funge.. grazie per l'aiuto!!!

[pierofix]

Non so se si è capito, ma tutto questo casino è stato fatto per inserire un link TESTUALE che tramite css viene "tradotto" in immagine.

Ora, se togli il testo dal link allora significa che questo non ti era chiaro.

Questa è una soluzione che punta all'accessibilità: se tu inserisci il testo html nel link, esso può essere sia indicizzato che parsato correttamente da uno screen-reader. Se poi lo togli, facevi prima a mettere un'immagine con il link. :rollo:

Il web è di tutti!

P.S. Oppure lasci il testo dov'è e giochi con una fantasiosa sfumatura sullo sfondo, un po' come ho fatto io in www.itgmarinoni.it nella barra di navigazione principale (in alto).

[pierofix]

Originariamente inviato da GordonMX
... sono passato dal conoscere ZERO di linguaggi di programmazione ad avere una conoscenza base negli ultimi 5 mesi quindi ho ancora delle difficoltà...

Html, xhtml, xml, css e javascript non sono linguaggi di programmazione.

[GordonMX]

bhè, se guardi la pagina che ti ho postato sopra vedrai che le immagini "contengono" il testo ma per gli screen-reader posso mettere il testo e farlo dello stesso colore dello sfondo così lo screen reader lo legge e i vedenti no! Che ne pensi???