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
4.449
338
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
4.449
338
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
4.449
338
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
asevenx Realizzare modulo per selezionare elementi da una lista PHP 1
Silvio Losi Come realizzare una piattaforma "ad-hoc" (No CMS) E-Commerce 8
E Realizzare una finestra overlay con caricamento pagina html HTML e CSS 3
Gabriele Visioli Realizzare e Vendere siti web senza aprire una Partita IVA... Come? Leggi, Normative e Fisco 4
B realizzare una introduzione per un sito web Javascript 4
S Come realizzare una didascalia a comparsa su un'immagine? HTML e CSS 1
D Una query complicata da realizzare PHP 33
B realizzare una buona rete lan.... Reti LAN e Wireless 1
A Come posso realizzare una galleria come questa? Flash 3
L realizzare una funzione di "download" PHP 2
T realizzare una select di ricerca con più opzioni MS Access 3
C Come realizzare una "sequenza"? HTML e CSS 1
E realizzare una vetrina on line...??? HTML e CSS 2
D come posso realizzare in flash8 un form d'iscrizione a una news letter Flash 3
E realizzare una pagina di primo accesso Classic ASP 3
peppoweb Realizzare 3 condizioni con una Query. PHP 2
C [Retribuito] cerco programmatore per realizzare forum phpbb su altervista. Altri Annunci 0
C [Retribuito] cerco programmatore per realizzare forum phpbb su altervista Offerte e Richieste di Lavoro e/o Collaborazione 0
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
I [Photoshop] Come realizzare immagine tonalità di grigio Photoshop 0
C [PHP] Come realizzare un tema wordpress per monetizzarlo?e dove testarlo gratis? PHP 3
F Realizzare video su Mac Mac e Software 0
D [PHP] [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe PHP 0
D [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe Offerte e Richieste di Lavoro e/o Collaborazione 2
L [ASP.Net] Realizzare modulo contatti PopUp ! ASP.NET 1
N Come realizzare Cookie e Privacy Policy con Iubenda Leggi, Normative e Fisco 5
N Con cosa realizzare un sito web? Webdesign e Grafica 9
elpirata Realizzare video con immagini testo e transizioni Windows e Software 5
L [HTML] Realizzare piantina prenotazione posti HTML e CSS 4
P [PHP] Realizzare un controllo accessi cantiere, problema lettore Qrcode... PHP 0
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
Z È possibile realizzare DEM con Adobe Muse? Webdesign e Grafica 0
L Realizzare script con grafico e tabelle che si aggiornano automaticamente jQuery 1
T Come potrei realizzare un piccolo forum di discussione su un sito web...? phpBB 2
C cerco un web master per realizzare sito professionale Offerte e Richieste di Lavoro e/o Collaborazione 6
S realizzare un' area di login completa costo... Offerte e Richieste di Lavoro e/o Collaborazione 2
L Realizzare tabella che aggiorna i prezzi in base alle quantità jQuery 16
L Realizzare applicazione per hotel con camere disponibili PHP 2
G [GRATUITO]Cercasi webdesigner (per realizzare template) Offerte e Richieste di Lavoro e/o Collaborazione 7
Carlito's Come realizzare uno script Javascript 2
M [Cerco Collaborazione] un bravo esperto per realizzare insieme un sito web? Offerte e Richieste di Lavoro e/o Collaborazione 8
T [risolto] Realizzare un form email con multi scelta Sviluppo app per Android 2
G C++ realizzare apps per iOS C/C++ 1
A Realizzare un mega menu con css HTML e CSS 2
L realizzare login numerico PHP 8
G Realizzare apps per iOS meno recenti Sviluppo app per iOS 1
L realizzare apertura e chiusura div dinamico jQuery 3
mircop Realizzare storico consumi PHP 4
P è meglio un framework o realizzare da solo un sito? HTML e CSS 4
M devo realizzare un sito ma... Offerte e Richieste di Lavoro e/o Collaborazione 4

Discussioni simili