C'era un punto nella storia del web design in cui molti siti utilizzavano una funzionalità nota come "mappe di immagini". Questo è un elenco di coordinate associate a un'immagine specifica su una pagina. Queste coordinate creano aree di collegamento ipertestuale su quell'immagine, essenziale aggiungendo "punti caldi" a un'immagine, ognuna delle quali può essere codificata per collegarsi a luoghi diversi. Questo è molto diverso rispetto all'aggiunta di un tag link ad un'immagine, che farebbe diventare quell'intero grafico un unico grosso link ad una singola destinazione.
Esempi: immagina di avere un file grafico con un'immagine degli Stati Uniti. Se si desidera che ogni stato sia "selezionabile" in modo che vada alle pagine relative a quello stato specifico, è possibile farlo con una mappa immagine. Allo stesso modo, se tu avessi un'immagine di una banda musicale, potresti usare una mappa immagine per far sì che ciascun membro sia cliccabile su una pagina successiva su quel membro della band.
Le mappe di immagini sono utili? Certamente lo erano, ma sono caduti in disgrazia sul Web di oggi. Questo è, almeno in parte, perché le mappe di immagini richiedono specifiche coordinate per funzionare. I siti oggi sono progettati per essere reattivi e le immagini vengono ridimensionate in base alle dimensioni di uno schermo o dispositivo. Ciò significa che le coordinate preimpostate, ovvero il funzionamento delle mappe delle immagini, si annullano quando un sito si ridimensiona e le immagini cambiano di dimensione. Questo è il motivo per cui le mappe immagine sono utilizzate raramente sui siti di produzione oggi, ma hanno ancora vantaggi per le demo o le istanze in cui si sta forzando la dimensione di una pagina.
Vuoi sapere come creare una mappa immagine, in particolare come farlo con Dreamweaver? Il processo non è particolarmente difficile, ma non è neanche facile, quindi dovresti avere un po 'di esperienza prima di iniziare.
Iniziare
Iniziamo. Il primo passo che devi compiere è aggiungere un'immagine alla tua pagina web. Quindi fai clic sull'immagine per evidenziarla. Da lì, è necessario accedere al menu delle proprietà (e fare clic su uno dei tre strumenti di disegno dell'hotspot: rettangolo, cerchio o poligono.) Non dimenticare di assegnare un nome all'immagine, che è possibile eseguire nella barra delle proprietà. è tutto ciò che vuoi. Usa "mappa" come esempio.
Ora, disegna la forma desiderata sull'immagine usando uno di questi strumenti. Se hai bisogno di macchie rettangolari, usa il rettangolo. Lo stesso per il cerchio. Se vuoi forme di hotspot più complesse, usa il poligono. Questo è quello che probabilmente useresti nell'esempio della mappa degli Stati Uniti dato che il poligono ti permetterebbe di lasciare punti e creare forme molto complesse e irregolari sull'immagine
Nella finestra delle proprietà per l'hotspot, digitare o accedere alla pagina a cui deve essere collegato l'hotspot. Questo è ciò che crea quell'area collegabile. Continua ad aggiungere hotspot fino a quando la tua mappa è completa e tutti i link che desideri aggiungere sono stati aggiunti.
Al termine, rivedere la mappa immagine in un browser per assicurarsi che funzioni correttamente. Fare clic su ciascun collegamento per assicurarsi che vada alla risorsa o alla pagina Web corretta.
Svantaggi delle mappe di immagini
Ancora una volta, bisogna essere consapevoli del fatto che le mappe di immagini presentano numerosi svantaggi, anche al di fuori della sopra citata mancanza di supporto con siti Web reattivi. In primo luogo, piccoli dettagli possono essere oscurati in una mappa immagine. Ad esempio, le mappe di immagini geografiche possono aiutare a determinare da quale continente proviene un utente, ma queste mappe potrebbero non essere sufficientemente dettagliate da individuare il paese di origine dell'utente. Ciò significa che una mappa immagine può aiutare a determinare se un utente proviene dall'Asia, ma non dalla Cambogia in particolare.
Le mappe immagine possono anche caricarsi lentamente. Non dovrebbero essere utilizzati più volte su un sito Web perché occupano troppo spazio per essere utilizzati su ciascuna pagina di un sito web. Troppe mappe di immagini su una singola pagina creerebbero un serio collo di bottiglia e un enorme impatto sulle prestazioni del sito.
Infine, le mappe di immagini potrebbero non essere facili per gli utenti con problemi visivi. Se hai utilizzato le mappe immagine, dovresti anche creare un altro sistema di navigazione per questi utenti come alternativa.
Linea di fondo
Usa le mappe immagine di volta in volta quando provi a mettere insieme una rapida demo di un design e come funziona. Ad esempio, se stai prendendo in giro un design per un'app mobile e desideri utilizzare le mappe immagine per creare hotspot per simulare l'interattività dell'app. Questo è molto più facile da fare rispetto alla codifica dell'app, o addirittura costruire pagine web fittizie create secondo gli standard attuali con HTML e CSS. Ma inserirli in un sito di produzione o in un'app è molto complicato e dovrebbe essere evitato sui siti Web di oggi.
