A:hover con il tag html map e area

[Leonardojavascr]

Ciao a tutti!
Io sto cercando di mettere un effetto (qualsiasi) ad una parte di una immagine che ho già messo nel sito.
MI spiego meglio:
Io ho creato, con il tag map e successivamente con il tag area, varie sezioni rettangolari di questa immagine dove è possibile cliccare e volevo applicare ad ognuna di queste sezioni un effetto CSS diverso.
Vi lascio il codice per farvi capire meglio:
<map name="link" id="link">
<area id="" shape="rect" coords="20,10,378,125" href="#" alt="HOME">
<area id="" shape="rect" coords="415,45,500,85" href="#" >
<area id="" shape="rect" coords="510,45,670,85" href="#" >
<area id="" shape="rect" coords="680,45,845,85" href="#" >
<area id="" shape="rect" coords="855,45,990,85" href="#" ">
<area id="" shape="rect" coords="1000,45,1070,85" href="#" >
<area id="" shape="rect" coords="1080,45,1156,85" href="#">
<area id="" shape="rect" coords="1166,45,1345,85" href="#">
</map>
<div id="logo">
[img]Immagini/1.jpg[/img]
</div>

Nel tag area ho lasciato vuoto "id" solo per cercare di renderelo più leggibile a voi.

[carlomarangoni]

E la domanda quale è?

[Leonardojavascr]

La domanda è appunto come fare a mettere gli effetti (CSS) diversi per ogni tag area presente nel codice HTML.

[carlomarangoni]

Originariamente inviato da Leonardojavascr
La domanda è appunto come fare a mettere gli effetti (CSS) diversi per ogni tag area presente nel codice HTML.

Si! Ma quali effetti? Non ti si puà dare il codice per tutti le varianti possibili! Ti sembra?

[Leonardojavascr]

Si, scusa, è vero...
Però io volevo solo sapere come "selezoinare" (se così si può dire) il tag area in modo da potergli applicare un effetto a:hover, senza indicare quale.
Se per farmi un esempio ti serve l'effetto puoi usare backgroun-color.

[Henry.Chinaski]

A ciascuna area attribuisci un id, ad esempio la prima la chiami "area1".
Di seguito ti posto la porzione di codice css e html che dovrebbe far cambiare colore nell'area al passaggio del mouse. Per ogni area poi, identificata da un id univoco, attribuisci le regole che ti pare nel css.

#area1  a {
background:#FF0000;
}
#area1 a:hover {
background:#FFFF00;
}



<area id="area1" shape="rect" coords="20,10,378,125" href="#" alt="HOME">

[Leonardojavascr]

Non funziona....

[Henry.Chinaski]

Allora guarda QUI se può fare al caso tuo