Creazione di collegamenti immagine e mappe immagine

• Potrebbe 2, 2024

La risposta di questa settimana è in risposta a una domanda del lettore: "Puoi spiegare come creare un collegamento di immagini a una pagina in HTML". Esistono un paio di tecniche diverse che è possibile utilizzare per le immagini collegate. Uno è collegare l'intera immagine con il tuo HTML e l'altro è fare una mappa di immagini - dove parti diverse della stessa immagine sono collegate a posizioni diverse.

Immagine collegata in HTML

Collegare una piccola immagine o icona è molto semplice, basta posizionare il collegamento dell'immagine all'interno del collegamento ipertestuale in questo modo:



Tutto quello che ho fatto qui è stato racchiudere l'immagine all'interno dell'html per il collegamento. Questo è il modo più semplice ed efficace per collegare una piccola immagine ed è spesso fatto con punti elenco, icone personalizzate, ecc. Ma cosa succede se si desidera che un'immagine di grandi dimensioni si colleghi a diversi luoghi? È qui che la suddivisione delle immagini è utile.

Affettatura delle immagini in Photoshop

Questo è molto facile da ottenere in Photoshop. Dovresti usare un'immagine che non sia eccessivamente complicata, perché vuoi che i tuoi utenti possano vedere chiaramente dove fare clic sull'immagine. Vuoi anche assicurarti che i tuoi utenti comprendano che devono fare clic sull'immagine per arrivare dove stanno andando. Sviluppa attentamente le mappe immagine pensando al tuo utente. Tieni presente che le mappe di immagini non sono generalmente amichevoli per i motori di ricerca come il testo in una pagina, tuttavia un corretto utilizzo dei tag alt all'interno delle sezioni di immagini può aiutarti in questo.

Una volta creata la tua immagine, il passo successivo è "tagliare" la tua immagine. L'icona dello strumento fetta sembra un piccolo coltello esatto. Si trova nella parte superiore della barra degli strumenti e si trova sotto lo strumento di ritaglio: se si fa clic sull'icona "Ritaglia", verranno visualizzati gli strumenti di selezione delle sezioni.

Seleziona lo strumento fetta, tieni premuto il tasto sinistro del mouse e trascina con attenzione la sezione nel punto desiderato, quindi rilasciala. Andare avanti e continuare a tagliare l'intera immagine. Dovrebbe esserci una sezione attorno ad ogni area dell'immagine che si desidera collegare a un'altra pagina. Qualsiasi grande area bianca può essere una fetta.

Dopo che l'immagine è stata completamente suddivisa, il passaggio successivo consiste nell'utilizzare lo strumento "selezione sezione", fare clic su ciascuna sezione e da lì scegliere il tipo di sezione "immagine". Sotto quel riempire l'URL del punto in cui si desidera dirigere questa sezione seguita dal campo tag alt in basso. Gli altri campi non sono necessari per la semplice mappatura delle immagini. Spostati attraverso ogni sezione allo stesso modo fino a quando l'intera immagine non viene mappata.

Una volta completata l'intera immagine, utilizzerai l'opzione "Salva per Web e dispositivi". Se fai clic su "File" in alto e guardi in basso sotto le tipiche opzioni di salvataggio, vedrai l'opzione per salvare per Web e dispositivi. Seleziona questa opzione e si aprirà una finestra di dialogo in cui puoi vedere in anteprima l'aspetto della tua immagine. Se sei soddisfatto, premi il pulsante Salva e si aprirà un'altra finestra di dialogo. Assicurati che la seconda opzione dice "salva immagini e HTML", quindi salva il tuo lavoro.

Vai alla tua cartella in cui hai salvato il documento HTML e aprilo. Puoi copiare e incollare questo codice nel tuo file HTML. In genere questo HTML sarà un po 'sciatto. Se sei esperto di HTML, puoi pulirlo a tuo piacimento, ma dovrebbe funzionare bene così com'è. Assicurati, come sempre, che i tuoi file immagine ecc. Siano nelle posizioni corrette, altrimenti l'immagine non verrà visualizzata.

Istruzioni Video: Creare SFONDI 2D per Videogiochi ???? (Potrebbe 2024).