Visualizzazione dei risultati da 1 a 10 su 10

Discussione: Mappa su immagini responsive

  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    18

    Mappa su immagini responsive

    Buongiorno a tutti, esiste un metodo semplice ma funzionale per inserire link posizionati su una immagine responsive di un sito?
    Dovrei inserire tre zone cliccabili ma non riesco.
    Cercando in rete ho parzialmente risolto mappando l'immagine online, purtroppo funziona solo ad una specifica risoluzione, visualizzando con dispositivi che hanno risoluzioni diverse , la cosa non funziona.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,985
    Ciao, se stai usando un elemento <map> con degli elementi <area>, probabilmente saprai che le coordinate di tali elementi non possono essere espresse in percentuale, per cui ciao ciao al responsive. In questo caso però si può risolvere con qualche plugin jQuery che in sostanza ricalcola le coordinate al volo.
    Qui un articolo: https://avexdesigns.com/responsive-image-map/
    Qui la risorsa: http://mattstow.com/experiment/respo...mage-maps.html

    Con qualche ricerca puoi trovare altri plugin simili.

    In alternativa, se i tuoi link sono dei semplici elementi rettangolari, potresti risolvere via CSS andando a posizionare tali link sopra l'immagine, in maniera assoluta e usando dei valori percentuali.
    Qui uno strumento online che ti permette di creare la tua mappa di link:
    https://www.zaneray.com/responsive-image-map/
    Una volta caricata la tua immagine puoi aggiungere nuovi link quindi impostarne i relativi dati e spostarli sull'immagine. Sotto verrà restituito il codice HTML.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    18
    Ciao e grazie per la risposta,
    in effetti la seconda soluzione che mi hai proposto (zaneray), è proprio quella che ho usato io per mappare l'immagine e qui mi fermo perchè "potresti risolvere via CSS andando a posizionare tali link sopra l'immagine, in maniera assoluta e usando dei valori percentuali" questo non so farlo (sigh!).
    I link da posizionare sono altre piccole immagini (o se preferisci icone) che vorrei posizionare sull'immagine di sfondo (responsive), mantenendone la posizione alle varie risoluzioni.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,985
    Ok, posta un po' di codice di ciò che hai fatto, così da capire meglio come intervenire.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    18
    OK, questa è la mappatura che ho ottenuto:

    codice:
     
        <img alt="sfondo" src="img/sfondo3.jpg" width="100%" height="auto" usemap="#image-map"/>
        <map name="image-map">
        <area target="" alt="A.P.S. UGJ" title="A.P.S. UGJ" href="ugj/ugj.html" coords="513,167,62" shape="circle">
        <area target="" alt="Savona" title="Fujin Ryu Savona" href="ryu.html" coords="391,327,51" shape="circle">
        <area target="" alt="Cogoleto" title=" Cogoleto" href="cogoleto/cogoleto.html" coords="637,316,53" shape="circle">
    </map>
    Questo è il progetto originale in cui l'immagine di sfondo comprende anche le icone da cliccare (quelle 3 mappate).
    Grazie per la pazienza, ho cercato guide e altro in rete, ma a 63 anni suonati a momenti non capisco neanche cosa scrivo,
    figuriamoci se riesco a seguire guide e spiegazioni che troppo spesso danno per scontati passaggi o codici che scontati non sono.

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,985
    Grazie per la pazienza, ho cercato guide e altro in rete, ma a 63 anni suonati a momenti non capisco neanche cosa scrivo
    Beh, complimenti comunque per l'impegno; quantomeno tieni il cervello in allenamento stando dietro a 'ste cose da nerd... è sempre un modo per tenersi giovani

    figuriamoci se riesco a seguire guide e spiegazioni che troppo spesso danno per scontati passaggi o codici che scontati non sono.
    Capisco, però bisogna considerare che nella maggior parte di quei casi è richiesto (o comunque, si presume) che il lettore abbia già raggiunto un certo livello di conoscenza necessario per poter affrontare poi quelle specifiche argomentazioni di un livello superiore. In mancanza di tali conoscenze è chiaro che sarà necessario fare un passo indietro e studiarsi quelle nozioni mancanti per poter quindi proseguire nella comprensione del resto. Spero tu sia concorde in questo.

    in effetti la seconda soluzione che mi hai proposto (zaneray), è proprio quella che ho usato io per mappare l'immagine
    Se non ho capito male, hai usato quello strumento solo per ottenere le coordinate che avrai poi applicato ai tuoi elementi <area>; giusto?

    Analizzando il tuo codice noto che le aree sono circolari. In generale per forme irregolari (o meglio, non rettangolari) la scelta ricade per la prima tra le due soluzioni proposte (cioè l'uso di <map>), in quanto la seconda prevede appunto che le aree sensibili siano di forma rettangolare perché non sono altro che degli elementi HTML (dei tag <a> nel caso specifico) che normalmente hanno forma rettangolare. E' però vero che con un po' di CSS attualmente è possibile rendere circolari questi elementi.

    Personalmente quindi eviterei l'uso dell'elemento <map> e opterei comunque per la seconda soluzione.

    Come puoi procedere?

    In breve:
    - Si crea un <div> che faccia da contenitore opportunamente dimensionato per il responsive;
    - Si applica l'immagine come background di questo div;
    - Si inseriscono degli elementi <a> dimensionati e posizionati in modo assoluto, usando valori percentuali.

    Ti dico subito che non è una cosa troppo semplice ma nemmeno così complicata.

    Qui posto un esempio "improntato" sul tuo codice. Ovviamente andrà poi aggiustato opportunamente.

    codice:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <style>
          
             #mappa-immagine {
                position: relative;
                width: 100%;
             }
             
             #mappa-immagine a {
                position: absolute;
                border-radius: 50%;
                transform: translate(-50%, -50%);
                background: red;  /* rimuovere questa riga dopo aver trovato le giuste coordinate e dimensioni */
             }
             
             #mappa-immagine img {
                width: 100%;
                height: auto;
             }
             
          </style>
       </head>
       <body>
    
          <div id="mappa-immagine">
             <img alt="" src="img/sfondo3.jpg">
             <a title="A.P.S. UGJ"         href="ugj/ugj.html"           style="top: 45%; left: 50%;   padding: 5.25%;"></a>
             <a title="Fujin Ryu Savona"   href="ryu.html"               style="top: 75%; left: 38.5%; padding: 4.4%; "></a>
             <a title="Cogoleto"           href="cogoleto/cogoleto.html" style="top: 73%; left: 60%;   padding: 4.6%; "></a>
          </div>
    
       </body>
    </html>
    Per il momento fai qualche prova, se poi trovi difficoltà o hai bisogno di chiarimenti, chiedi pure.
    Ultima modifica di KillerWorm; 14-06-2018 a 19:47
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    18
    Grazie, KillerWorm, per il tempo che dedichi agli altri.
    Ho letto attentamente quanto inviato, ti chiedo ancora dove posso trovare una guida mooolto semplice per l'argomento di interesse e soprattutto che spieghi come convertire le coordinate fisse, come quelle del mio codice originale, in coordinate percentuali.
    Grazie ancora.

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,985
    Quote Originariamente inviata da KillerWorm
    - Si applica l'immagine come background di questo div;
    Mi correggo: nell'esempio non ho usato un background ma ho inserito direttamente un elemento immagine dentro quel div. Questo per ottenere una proporzione automatica tra larghezza e altezza del contenitore, basata sulle dimensioni implicite dell'immagine. A momenti non mi capisco nemmeno io, ma prendilo per buono.

    Quote Originariamente inviata da mare55
    ti chiedo ancora dove posso trovare una guida mooolto semplice per l'argomento di interesse e soprattutto che spieghi come convertire le coordinate fisse, come quelle del mio codice originale, in coordinate percentuali
    Ti direi, molto semplicemente, che "mooolto semplice" non esiste. Ciò in cui ti stai applicando implica la conoscenza di varie nozioni di base che possono essere apprese giusto "studiando", appunto, da guide di base.

    Per la conversione da valori fissi in valori percentuali si tratta del calcolo di "semplici" proporzioni aritmetiche (o rapporti matematici). Non ti nascondo che sono concetti matematici elementari, che prescindono dall'ambito informatico. Non ho guide del genere da consigliarti ma posso suggerirti di fare qualche semplice ricerca sul web, tipo: "calcolare la percentuale tra due numeri" o "come risolvere le proporzioni" o robe del genere.

    A parte questo, tali valori dovranno poi essere applicati al sistema di riferimento cartesiano di pertinenza; nel caso di una pagina HTML parliamo in generale di box-model CSS e del posizionamento degli elementi. Tra i link utili CSS ai primi capitoli puoi trovare svariati riferimenti a guide di base in cui sono spiegati questi concetti.

    Tutte queste nozioni dovrebbero formare quindi una base di partenza per poter comprendere come procedere in questo tipo di applicazioni.

    In breve:
    Di fatto non c'è un rapporto fisso tra un valore in px e uno in percentuale; dovrai necessariamente avere un valore di partenza (che potrebbe essere ad esempio la larghezza totale in px della tua immagine) e da questo potrai rilevare i relativi valori percentuali per qualsiasi altro punto (nel tuo caso, per la proprietà left, relativa a ciascun punto, che sostanzialmente definisce la x di quel punto).

    Esempio:
    La tua immagine è larga 1600px ed alta 600px. Vuoi trovare i valori percentuali per la coordinata (x: 200px, y: 300px).

    I valori percentuali saranno quindi:

    x = 100 / 1600 (larghezza) * 200 (x)
    y = 100 / 600 (altezza) * 300 (y)


    Avrai quindi:

    x = 12.5% (di 1600)
    y = 50%
    (di 600)

    Quindi le proprietà CSS per il posizionamento saranno:

    left: 12.5%;
    top: 50%;


    Questo è sostanzialmente il calcolo che andrebbe fatto per ogni punto. Nel mio esempio non ho potuto rilevare esattamente i valori percentuali dei punti prelevati dal tuo codice, perché non conoscevo la larghezza e l'altezza della tua immagine, per cui ho fatto giusto in maniera empirica.

    Ovviamente dovrai ricalcolare tu quei valori. Oppure puoi semplicemente usare quello stesso strumento online da cui hai già estrapolato i valori in px (se non ho capito male). Quello strumento fornisce, appunto, anche i valori in percentuale (anzi, direi che fornisce prima di tutto quelli), per cui potresti eventualmente adoperare quello strumento per ottenere i riferimenti in percentuale.

    Spero di averti chiarito qualcosa in più o quantomeno di non aver creato ancora più confusione
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    18
    Ok spiegato così è più chiaro, credevo che dietro la conversione ci fosse altro,di più oscuro.
    In effetti calcolare la percentuale tra due numeri" o risolvere le proporzioni sono tra le "prime" nozioni che si apprendono.
    Del fatto che l'immagine non fosse un background, mi ero accorto leggendo con attenzione il codice.
    Il servizio che ho utilizzato è questo: https://www.image-map.net/ e non fornisce riferimenti percentuali ma fissi.

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,985
    Il servizio che ho utilizzato è questo: https://www.image-map.net/ e non fornisce riferimenti percentuali ma fissi.
    Bene, in quel caso potrai esercitarti con la conversione "manuale" da pixel a valori percentuali
    Se usi invece un servizio come quello che ho indicato sopra, ti saranno restituiti già i valori percentuali da usare direttamente nel tuo elaborato.

    In entrambe i casi, ora hai tutti gli strumenti utili a risolvere la situazione.

    Buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.