Image map con rollover tramite CSS

[Maver]

Salve a tutti, sono nuovo di questo forum, ma diverse persone me l'hanno consigliato per la professionalità degli utenti che lo compongono.

Vengo quindi a spiegarvi il mio problema:

Ho quest'immagine che costituisce il menu di navigazione:
Ogni "frangia" costituisce il link ad una sezione del sito.
Dato che non andrebbe inserito alcun elemento testuale, vorrei evidenziare i vari "pulsanti" con un effetto di rollover (magari con preload), ovvero, quando il mouse si trova in :hover su di un pulsante, la suddetta immagine viene cambiata con un'altra in cui è presente solo la frangia su cui si trova il mouse.

Per ora l'unica soluzione che ho trovato è utilizzare javascript, con il preload delle immagini, disegnare le varie mappe, e ad ogni mappa assegnare un'immagine di rollover differente.

Come ben sapete però IE, di default, non accetta il Javascript, quindi volevo ricorrere ai CSS.
Cercando sul sito, ho trovato diversi trucchi, ma nessuno prevedeva il mapping dell'immagine del menù, o al limite solo mappe rettangolari e non sovrapposte.

Come mi consigliate di procedere, senza ricorrere a Flash?

Grazie in anticipo a chiunque dedicherà del tempo al mio problema.....

[miki003]

Almeno un'istruzione di JS non la puoi evitare per richiamare il rollover

[Mich_]

Probabilmente il tuo effetto e` molto bello, ma attenzione alla accessibilita` ed alla usabilita`.
Chi ha problemi con la vista o con il movimento del mouse non riuscira` a selezionare la componente corretta.
Per una prova banale, prova a fare tu la scelta usando il mouse con la mano sinistra (quella con cui non sei abituato).

Sto dicendo che il tuo menu non puo` restare l'unico modo per accedere: ci dovra` comunque essere un metodo alternativo (un menu tradizionale, una lista, ...).

E comunque non e` vero che "IE, di default, non accetta il Javascript,". Anzi probabilmente il contrario e` piu` vero.
E` pero` vero che le versioni vecchie di IE hanno problemi con alcuni standard (e anche le recenti se usate in modo retrocompatibile).


Per tornare alla domanda, che io sappia le mappe non hanno il rollover tramite CSS. L'unico modo per usare puro CSS sarebbe di avere tutto link rettangolari, ma mi pare che nel tuo caso la cosa non sia possibile.

[Maver]

Grazie ad entrambi per l'immediata risposta.

@mich_
per verificare le compatibilità, ho installato su una macchina virtuale sia firefox che IE con le impostazioni di default, ed ho notato che IE ha disabilitata l'esecuzione di codice JS e Activex, o meglio, appare la banda giallina in alto, che avvisa che il codice non è stato eseguito. Si, è sufficiente che l'utente faccia 2 click, ma se c'era un modo di evitarlo avrei preferito usare quello.

Il discorso su accessibilità/usabilità mi interessa: anche se il sito a cui sto lavorando è abbastanza di nicchia, mi piacerebbe sapere se ha dei "limiti", chiamiamoli così.
Puoi spiegarti meglio? Oppure c'è su html.it una guida sull'argomento?

@miki003
come ha scritto anche mich, sarebbe stato possibile eliminare del tutto il JS, ma solo utilizzando "pulsanti" rettangolari (per dovere di cronaca, ci sono diverse guide sul web e su html.it a riguardco)

[Mich_]

Anche se il tuo target e` di nicchia, non vuol dire che tutti navigano in condizioni ottimali.
Ma pensa solo ad una persona con un braccio ingessato: probabilmente non puo` guidare una macchina, ma non per questo non puo` stare al computer. Magari non potra` fare grafica di fino (in quei casi di solito il puntamento deve essere di precisione), ma non per questo deve essergli preclusa la navigazione.

Quello che voglio dire e` che nella progettazione di un sito, il programmatore deve tener conto di queste cose. Ci sono delle linee guida, ed e` opportuno che chi progetta pagine le conosca.

---

L'accessibilita` e` affrontata dal W3C dal suo comitato WAI. Molti dei documenti sono ora anche tradotti in Italiano.
Per riferimenti italiani, puoi vedere www.diodati.org e www.webaccessibile.org

Ci sono delle linee guida del W3C (WCAG) e in Italia c'e` la legge 4/04 con i suoi 22 requisiti.

In parole povere, occorre renere le pagine fruibili da tutti, anche se limitati da qualche impedimento (sia di tipo sanitario che ambientale).
Quindi le pagine devono essere accessibili anche da persone non vedenti o non udenti, anche da persone che navigano senza mouse, ed altri impedimenti, compreso le situazioni intermedie (ipovedenti, con tremiti alle mani, ...)
Ed occorre tener conto che in alcune situazioni non e` possibile usare JS (compreso alcuni palmari/cellulari).

Ma se si usa un linguaggio moderno (XHTML 1.0 Strict o HTML5), se si fanno le cose con criterio, una buona meta` dei problemi di accessibilita` sono gia` risolti.

---

La prova su una macchina virtuale non e` significativa delle situazioni piu` comuni. In linea di massima chi ha IE ha anche JS, mentre la cosa puo` non essere vera in altre situazioni.

---

Tornando alla tua immagine ed alla usabilita`/accessibilta`.
In quel caso, se dovessi farlo io, ci metterei a fianco un menu classico (eventualmente a comparsa quando il mouse passa sopra una determinata area): in tal modo salvi usabilita` ed accessibilita`, e mantieni l'aspetto della pagina.

[miki003]

Originariamente inviato da Maver
.....@miki003
come ha scritto anche mich, sarebbe stato possibile eliminare del tutto il JS, ma solo utilizzando "pulsanti" rettangolari (per dovere di cronaca, ci sono diverse guide sul web e su html.it a riguardco)

Guarda che io ho risposto unicamente alla tua domanda che implicava un rollover con la mappatura e usando la mappatura onmousemove="" e onmouseout="" non li puoi evitare!

Se invece tu avessi chiesto un menu a lista ti avrei detto che JS si può evitare usando vari metodi compresi gli sprite, per queste cose grazie a iddio non ho più bisogno di leggere guide