associare class a tag area

[dvjack]

ho visto che è possibile associare una classe di stile al tag <area> di una <map>, solo che non riesco a capire che proprietà posso associargli, nel senso posso carmbiare solo il cursore del mouse?
La mia intenzione era quella di creare un effetto onMouseOver trammite la pseudo classe :hover, in cui cambiavo il colore di sfondo dell'area stessa (per renderla più visibile), ma ho notato che la proprietà background, viene ignorata. Quindi mi è venuto il dubbio, ma quali proprietà posso inserire nella classe, perchè vengano correttamente utilizzate dal tag area?

Mi sembrava di aver visto qualcosa in internet, ma non lo trovo più....forse mi sbaglio...altrimenti come potrei fare senza ricorrere al flash?

Grazie

[Mich_]

E` noto che in IE le pesudoclassi funzionano solo sui link (ma non mi e` chiaro se solo il tag <a> o anche <area>).
Invece nei browser standard, le pseudoclassi funzionano in tutti i tag.

Dovresti quindi fare le prove con browser diversi.
Puoi anche vedere vista con browser diversi (lento) oppure Test diversi browser (necessaria iscriz.)

[dvjack]

E` noto che in IE le pesudoclassi funzionano solo sui link

appunto per questo motivo io utilizzo Firefox e Opera

cmq forse non mi sono espresso bene, volevo fare in modo che il tag area abbia un colore di sfondo e che poi cambiasse con :hover, ma il problema sta nel fatto che lo sfondo del tag non si colora.....il punto era, non si può dare un colore di sfondo al tag area?

[salasir]

Se hai necessità di gestire i vari link sul tag <area>, prova a guardare il link che ti indico, dove si espone un metodo alternativo per gestione di <map> <area>.. </area> </map>.

Techniques for Web Content Accessibility Guidelines 1.0


In particolare il punto 4.7.5.

[Mich_]

Originariamente inviato da dvjack
il punto era, non si può dare un colore di sfondo al tag area?

Scusa, non avevo focalizzato il problema.

E` ragionevole che il tag <area> non abbia sfondo: infatti e` solo una sovrastruttura trasparente che si mette sopra le immagini per trasformarne alcune aree in link.

[sircnav]

Scusate, premetto che capisco ben poco di programmazione in genere ormai, ma non è possibile in via del tutto teorica bypassare il problema utilizzando il tag div?

Non so forse mettendo <div> <area> in cascata...

Sto solo provando a dare un escamotage.

Anch'io ho questo problema e devo provare a vedere se riesco a bypassare il problema.

Se troverò il modo vi farò sapere.
Se voi trovate il modo fatemi sapere, vi prego.

Grazie

[Mich_]

In linea teorica forse si puo` trovare un trucco, ma in pratica non e` detto che funzioni (e dipende anche dalle necessita`).
Un'<area> puo` avere un controno di qualsiasi forma, un <div> (o altro oggetto) puo` essere solo un rettangolo. Quindi la presente idea puo` andare bene solo se le tue aree sono tutte rettangolari.

Potresti mettere la tua immagine come sfondo di un blocco.
Po sopra (nello stesso posto con z-index piu` alto) ci metti un altro <div> con sfondo trasparente formato a sua volta da altri blocchi, tutti con sfondo trasparente.
Dentro ad ogni blocco ci metti un <a> con display:block; width:100%; height:100% e con i link che ti interessano.
Su tali <a> ci metti un rollover (pseudoclasse :hover) che metta uno sfondo colorato semitrasparente.

Pero` nei browser che non riconoscono la semitrasparenza (Opera 8, Safari, ...) vedrai un rettangolo colorato che si sovrappone all'immagine.

Nota: dentro i vari <a> ci devi mettere qualcosa. Forse basta un carattere bianco (&amp;nbsp ma non e` detto che sia sufficiente; meglio sarebbe un'immagine trasparente.

[dvjack]

grazie Mich_, l'idea dei div sovrapposti mi era già venuta, solo che avendo delle poligonali come area mi risultava difficile creare un div con quelle forme....

creerò la cartina in flash allora, grazie mille