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

meliupa

Nuovo Utente
2 Giu 2014
16
0
1
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.
HTML:
<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?
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.397
338
83
HTML:
<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>
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.397
338
83
CORREZIONE
HTML:
<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>
 
Ultima modifica di un moderatore:

meliupa

Nuovo Utente
2 Giu 2014
16
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.397
338
83
É 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
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Mappa immagine con elenco di link reciproci Javascript 0
M Creare mappa immagine interattiva con dati forniti da database PHP 0
L Mappa zoomabile "immagine" Javascript 9
WpStyle mappa immagine con rollover HTML e CSS 3
C mappare un'immagine x il web con gimp(filtri/web/mappa immagine) Webdesign e Grafica 0
M mappa immagine HTML e CSS 2
S cambio di immagine in un area di una mappa dell'immagine stessa Javascript 0
F Problemi visualizzazione mappa Android studio Sviluppo app per Android 0
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
O Mappa Interattiva PHP 3
A [Javascript] Marker personalizzati su mappa leaflet Javascript 0
C [PHP] Punto su mappa PHP 0
J [Wordpress] Mappa WordPress 2
M [Javascript] Visualizzazione mappa Javascript 1
A [Javascript] Problema visualizzazione posizione corrente su mappa Javascript 2
Trapano [PHP] Mappa con gli indirizzi PHP 3
ecosito [WordPress] Visualizzare una mappa con i pin dei post tramite GPS? WordPress 4
S [Javascript] Creare mappa per ogni utente Javascript 5
felino [Google MyBusiness] Maker non presente durante l'esplorazione della mappa Social Media Marketing 3
F Aggiornare marker su mappa google con una funzione ajax richiamata al cambio di una select Ajax 2
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
L Array multidimensionale mappa browsergame PHP 1
L Overlapping marker mappa google Javascript 0
asevenx [HTML] Creare mappa interattiva con Illustrator HTML e CSS 5
P modificare mappa sito Javascript 0
P modificare mappa sito Javascript 0
E realizzare una mappa personale e responsive HTML e CSS 6
G Mappa Javascript Presentati al Forum 0
M Mappa all'interno del sito con ricerca delle filiali Javascript 8
L Problema Inserimento Azioni Su mappa vettoriale Javascript 0
F zoom jquery mappa jQuery 1
J Mappa che visualizza daove sei PHP 7
F mappa jquery con effetto hover + fancybox Javascript 1
L Problemi a interagire con la mappa sul mio sito jQuery 1
felino Plugin per Mappa del sito WordPress 5
G Scaricare kml da una mappa incorporata in un sito web HTML e CSS 5
U [javascript] visualizzare marker su mappa di google Javascript 10
J Mappa con dati da db PHP 0
S [risolto] Creare una mappa Google per ogni indirizzo Javascript 14
P Popolare un Database da una mappa di google map PHP 7
P Mostrare punti interesse du una mappa di google maps Javascript 1
M Guida su come inserire la mappa di Goggle con Jumi Joomla 1
A creare una mappa del sito in frame HTML e CSS 0
unkus_nob marker dinamici in mappa google Javascript 3
M mappa generata da librerie gd modificabile tramite form PHP 51
M Mappa "interattiva" di isole per browsergame Javascript 7
emanuelevt mappa interattiva - problema jQuery 1
L Centri Media in Italia: mappa dei clienti (aggiornata) SEO e Posizionamento 9
V Mappa di Google su explorer funziona, su CHROME e FIREFOX NO! Javascript 1
A mappa del sito nascosta HTML e CSS 6

Discussioni simili