realizzare una mappa personale e responsive

elebram

Nuovo Utente
8 Apr 2015
7
0
0
Buongiorno a tutti
Sono un novizio di bootstrap 3 e, se ho indovinato la sezione, avrei bisogno di un paio di consigli da chi ne sa più di me.

Devo costruire una piantina, es un piano con vari appartamenti, e vorrei che la suddetta piantina avesse lapossibilità che:

1) Cliccando su un appartamento si apra un popup
2) Sia responsive

la parte 1 l'ho risolta solo per desktop, ho inserito la mia piantina e disegnato le aree cliccabili (hotspot)

il problema è la scalabilità, perchè i pulsanti non li trovo più in posizione.


Come posso fare? Inserisco una img per farvi un'idea:

esempio.jpg
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.984
295
83
Una mappa d'immagine non potra mai essere resposive come tu la intendi, perchè se si cambia risoluzione o dimensione della finestra le coordinate non combaciano più e questo è un fatto fisiologico. Ci sono però altre solozioni che non sono mappe d'immagine e per questo più complicate e macchinose
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.984
295
83
Sul momento non ho molte idee bisognerebbe pensarci! L'unica che al momento mi sovviene, è di suddividere l'immagine nelle varie parti da linkare in modo responsive e unirle in un'immagine unica in modo che non ci siano coordinate da rispettare
 

elebram

Nuovo Utente
8 Apr 2015
7
0
0
questa è un'idea
posso spezzarla e rimontarla come tante svg in un div o in una table...
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.984
295
83
Io l'ho sempre fatto in una tabella
 

Fucine Assolute

Nuovo Utente
30 Set 2015
7
0
0
Ciao,
sono Maria di Fucine Assolute. Ho posto anche io lo stesso problema....
La soluzione di Max mi sembra praticabile ma come alternativa se non si conosce la soluzione.... In realtà non credo che referenziare un rettangolo (per fare un es) di una mappa con coordinate relative ricalcolabili rispetto ad uno con coordinate fisse sia un problema insormontabile e credo anche che lo abbiano risolto: si tratta di un algoritmo che ricalcola la nuova coord rispetto ad un punto che ha cambiato coord. Sono solo operazioni matematiche.... Se Dreamweaver CC2015 (ma anche le versioni precedenti) consentono di creare immagini responsive e di poterle mappare credo che si possa fare in modo semplice come si faceva prima per le pagine "statiche".

Se volete approfondire, io ho appena trovato delle info che potranno esservi utili e se riuscite ad applicarle meglio di me, mi aiuterete :)

https://wordpress.org/plugins/responsive-image-maps/

oppure potete cercare: Responsive Image Maps jQuery Plugin

Buon lavoro
Maria