[web] disegnare su una imagemap

axxel

Nuovo Utente
7
0
Ciao ragazzi, sto cercando di mappare dei punti con i quali interagire su un'imagemap. Fin qui tutto ok, ma non riesco a trovare nessun modo di renderli tutti visibili di default: alla fine dovrebbero essere 200-300 punti su una mappa piuttosto grande, è impensabile lasciare all'utente l'onere di scorrere col mouse sulla mappa per cercarli. Come posso fare senza predisegnarli fisicamente sull'immagine? E' possibile sovrapporre un marker (immagine o elemento) in corrispondenza di ogni area in qualche modo?
 

d.effe

Nuovo Utente
6
0
stai usando un imagemap ovvero un immagine di sfondo e sopra ci vuoi mettere dei marker(area) oppure stai usando google maps?
 

axxel

Nuovo Utente
7
0
Scrivo di seguito il codice esemplificato, così da spiegarmi meglio:

HTML:
<img src="mappa.jpg" class="map" usemap="#mappa">
<map name="mappa">
    <a id="acol1" class="point">
        <div>
            <area shape="circle" coords="623,857,5" href="#" class="mappedpoint" id="col1">
            <img src="img_green.gif" class="marker" id="col1" />
        </div>
    </a>
    <a id="acol2" class="point">
        <div>
            <area shape="circle" coords="653,929,5" href="#" class="mappedpoint" id="col2">
            <img src="img_red.gif" class="marker" id="col2" />
        </div>
    </a>
    <a id="acol3" class="point">
        <div>
            <area shape="circle" coords="688,1064,5" href="#" class="mappedpoint" id="col3">
            <img src="img_green.gif" class="marker" id="col3" />
        </div>
    </a>              
</map>

Nell'esempio qui sopra definisco tre area circolari sulla mappa. Dato che nel codice finale saranno molte di più, vorrei che tutte venissero evidenziate di default al caricamento della mappa, in modo da risultare immediatamente riconoscibili ed evitare all'utente di doverle "cercare" andando in giro col mouse (ed in modo da evitare, successivamente, di doverle marcare utilizzando un tag img).
E' possibile?
 
Ultima modifica:

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!

Discussioni Simili