realizzare una mappa personale e responsive

[elebram]

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:

 

[Max 1]

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

 

[elebram]

Ottimo, hai qualche suggerimento in merito?

 

[Max 1]

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]

questa è un'idea
posso spezzarla e rimontarla come tante svg in un div o in una table...

 

[Max 1]

Io l'ho sempre fatto in una tabella

 

[Fucine Assolute]

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