Beh, complimenti comunque per l'impegno; quantomeno tieni il cervello in allenamento stando dietro a 'ste cose da nerd... è sempre un modo per tenersi giovaniGrazie per la pazienza, ho cercato guide e altro in rete, ma a 63 anni suonati a momenti non capisco neanche cosa scrivo
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.figuriamoci se riesco a seguire guide e spiegazioni che troppo spesso danno per scontati passaggi o codici che scontati non sono.
Se non ho capito male, hai usato quello strumento solo per ottenere le coordinate che avrai poi applicato ai tuoi elementi <area>; giusto?in effetti la seconda soluzione che mi hai proposto (zaneray), è proprio quella che ho usato io per mappare l'immagine
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.
Per il momento fai qualche prova, se poi trovi difficoltà o hai bisogno di chiarimenti, chiedi pure.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>
Rispondi quotando
