Immagini possono essere un modo attraente e altamente funzionale di integrare il link nella tua pagina web. Le immagini sono una grande componente di coinvolgere Webdesign; un sito Web di testo normale è raramente e spesso poco attraente. I link sul tuo sito Web possono essere di tipo text o image. Infatti, un'immagine cliccabile collegata generalmente rende per un'esperienza utente più intuitiva. Per fortuna, ci sono due approcci relativamente semplici per l'integrazione di collegamenti in immagini all'interno di HyperText Markup Language (HTML).

Istruzioni

L'immagine

1

Progettare la vostra immagine in un programma di fotoritocco. In alternativa, potrebbe ottenere la vostra immagine da altrove, ma sempre assicurarsi che avete il diritto di utilizzare un'immagine e che ti danno credito al suo creatore.

2

Assicurarsi che la vostra immagine maglie bene con gli altri aspetti visivi della pagina web. Assicurarsi che gli altri colori utilizzati nella tua pagina web non stridente o distrarre quando hanno visto accanto a tua immagine.

3

Salvare l'immagine nella stessa cartella come pagina web. Assicurarsi che sia di un formato accettabile per HTML.

Il Tag < img >

4

Aprire la pagina web in un programma di elaborazione testo. Utilizzare la funzione "Apri con..." quando si individua la pagina web in una cartella; di solito, facendo doppio clic su un file HTML si aprirà nel browser web predefinito. Non si desidera farlo ancora.

5

Trovare il link nella tua pagina web e inserire un tag < img > entro il < a href > tag. Per esempio:

< un href="link.html" >< img src="yourimage.jpg" >< /a >

Questo creerà un'immagine che funzioni come collegamento. Utilizzare questo approccio se si desidera utilizzare l'immagine per un solo link.

6

Per eliminare il bordo attorno all'immagine, inserire bordo = "0" nel tuo tag < img >:

< un href="link.html" >< img src="yourimage.jpg" border = "0" >< /a >

7

Affinché il testo di pop-up quando il cursore passa sopra l'immagine, inserire alt = "il testo" nel tuo tag < img >:

< un href="link.html" >< img src="yourimage.jpg" border = "0" alt = "il testo" >< /a >

Mappe immagine

8

Se si desidera utilizzare una sola immagine per più collegamenti diversi, sarà necessario creare una mappa immagine. Aprire la pagina web in un programma di elaborazione testo.

9

Inserire l'immagine nella posizione desiderata nel codice utilizzando il tag < img >. Utilizzare l'attributo usemap per designare la mappa che si utilizzerà:

< img src="yourimage.jpg" usemap = #yourmap >

10

Creare un tag < map > con un nome identico:

< nome mappa = yourmap >

11

All'interno del tag < mappa >, creare aree corrispondenti alle parti dell'immagine che sarà collegamenti attivi. Specificare la forma corrispondente della zona e l'intervallo di coordinate x-y. Quindi specificare il collegamento appropriato. Per esempio:

< nome mappa = yourmap >
< forma dell'area = rect coords = 0, 0, 50, 50 href="link.html" >

Le coordinate sono elencate nell'ordine x1, y1, X2, y2. Nell'esempio sarebbe creare un collegamento attivo in un'area quadrata tra x valori da 0 a 50 e y valori da 0 a 50. Un componente aggiuntivo del browser sviluppatore web o altro strumento di mappatura immagine è utile per determinare le coordinate applicabile.

12

Creare tutte le aree necessarie, con le forme desiderate (rettangolo, cerchio o poligono) e quindi chiudere il tag < map > con < / mappa >.

13

Aprire la pagina web in un browser web e assicurarsi che l'immagine funzioni come desiderato. In caso contrario, continuare ad apportare modifiche nel vostro programma di elaborazione testi.