Mappa immagine...vi prego è urgente, devo farlo quanto prima

[meliupa]

Ciao ragazzi, ho un problema, con la mappa immagini in html, non riesco a gestire nulla con il css, e ho bisogno urgente di aiuto per impostare l'hover, non so proprio come fare sono giorni che ci perdo la testa.
Non vorrei usare jquery, e sarei veramente contento se ci fosse un modo.
questo è il codice della mappa.

<div id="container">
<img src="http://forum.mrwebmaster.it/images/onda.png" alt="onda" width="1132" height="85" usemap="#ondhom" border="0" />
  <map name="ondhom" id="ondhom">
    <area shape="circle" coords="148,26,8" href="js/ond.mp4" class="playlist-btn" />
     <area shape="circle" coords="243,29,13" href="js/pchom.mp4"class="playlist-btn" />
  </map>
   </div>

con il css come posso impostare un hover quando si va sul punto selezionato?
Ho provato a dare border ad area, ma il bordo non mi appare intorno al punto cliccabile, ma in basso a sinistra, ho provato ad assegnarlo alla classe playlist-btn, ma neanche funziona, come devo fare?

 

[Max 1]

<div id="container">
<img src="http://forum.mrwebmaster.it/images/onda.png" alt="onda" width="1132" height="85" usemap="#ondhom" style="border-style:none" />
  <map id="ondhom" name="ondhom">
<area shape="circle" alt="ond" coords="146,27,8" href="js/ond.mp4" title="ond" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda1.png';" onMouseOut="<div id="container">
<img src="http://forum.mrwebmaster.it/images/onda.png" alt="onda" width="1132" height="85" usemap="#ondhom" style="border-style:none" />
  <map id="ondhom" name="ondhom">
<area shape="circle" alt="ond" coords="146,27,8" href="js/ond.mp4" title="ond" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda1.png';" onMouseOut="<div id="container">
<img src="http://forum.mrwebmaster.it/images/onda.png" alt="onda" width="1132" height="85" usemap="#ondhom" style="border-style:none" />
  <map id="ondhom" name="ondhom">
<area shape="circle" alt="ond" coords="146,27,8" href="js/ond.mp4" title="ond" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda1.png';" onMouseOut="document.images[0].src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="circle" alt="pchom" coords="241,30,13" href="js/pchom.mp4" title="pchom" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda2.png';" onMouseOut="document.images[0].src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>.src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="circle" alt="pchom" coords="241,30,13" href="js/pchom.mp4" title="pchom" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda2.png';" onMouseOut="document.images[0].src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>.src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="circle" alt="pchom" coords="241,30,13" href="js/pchom.mp4" title="pchom" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda2.png';" onMouseOut="document.images[0].src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>

 

[borgo italia]

ciao @max1
verifica c'è qualcosa che non mi torna, se non sbaglio sembrerebbero dei tag non aperti/chiusi bene

 

[Max 1]

CORREZIONE

<div id="container">
<img 
src="http://forum.mrwebmaster.it/images/onda.png" alt="onda" 
width="1132" height="85" usemap="#ondhom" style="border-style:none" />
<map id="ondhom" name="ondhom">
<area shape="circle" alt="ond.mp4" coords="148,26,8" href="js/ond.mp4" title="ond.mp4" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda1.png';" onMouseOut="document.images[0].src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="circle" alt="pchom.mp4" coords="243,29,13" href="js/pchom.mp4" title="pchom.mp4" target="_self" onMouseOver="document.images[0].src='http://forum.mrwebmaster.it/images/onda2.png';" onMouseOut="document.images[0].src='http://forum.mrwebmaster.it/images/onda.png';" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>

 

[meliupa]

ragazzi, ma al posso di mettere un immagine diversa al onMouseOver non è possibile applicare un effetto, che sfruttando il bordo dell'area mi faccia applicare un effetto tipo box shadow?

 

[Max 1]

É possibile tutto dipende dalla complessità che puoi supportare e dalle conoscenze che hai in fatto di JavaScript, io ti ho dato la soluzione più semplice e che si possa dare qui sul forum, soluzioni più complesse diventa difficile dartele senza avere a disposizione la tua pagina e il resto dei contenuti.
Se ci vuoi provare tu puoi provare a sostituire OnMouseOver e OnMouseOut con il codice di Lightbox