Le immagini possono essere un modo interessante e altamente funzionale di integrare i link nella vostra pagina web. Le immagini sono una grande componente di web design accattivante; un sito web di testo normale si vede raramente, e spesso poco attraente. I collegamenti sul tuo sito web possono essere sia testo o immagine. In realtà, una collegata, immagine cliccabile fa generalmente per un'esperienza utente più intuitiva. Per fortuna, ci sono due approcci relativamente semplice integrazione di collegamenti in immagini all'interno di HyperText Markup Language (HTML).

istruzione

L'immagine

1 Progetta la tua immagine in un programma di fotoritocco. In alternativa, si potrebbe ottenere la vostra immagine da altrove, ma sempre assicurarsi di avere il diritto di utilizzare un'immagine e che dare credito al suo creatore.

2 Assicurarsi che la vostra immagine maglie bene con gli altri aspetti visivi della tua pagina web. Assicurarsi che gli altri colori utilizzati nella vostra pagina web non sono stridente o distrazione se visto al fianco l'immagine.

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

Il tag <img>

4 Aprire la pagina Web in un programma di elaborazione testi. Utilizzare il "Apri con ..." funzione quando si individua la pagina web nella relativa cartella; di solito, facendo doppio clic su un file HTML verrà aperto nel browser Web predefinito. Non si vuole fare questo ancora.

5 Trovate il link nella tua pagina web, e inserire un tag <img> all'interno del tag <a href>. Per esempio:

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

Ciò creerà un'immagine che funge da collegamento. Utilizzare questo approccio se si desidera utilizzare l'immagine per un solo collegamento.

6 Per eliminare il bordo intorno all'immagine, inserire border = "0" in tag <img>:

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

7 Per causare il testo a pop-up quando il cursore passa sopra l'immagine, inserire alt = "testo" in tag <img>:

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

mappe immagine

8 Se si desidera utilizzare un'immagine per collegamenti multipli differenti, è necessario creare una mappa immagine. Aprire la pagina Web in un programma di elaborazione testi.

9 Posizionare la vostra immagine nella posizione desiderata nel codice usando il tag <img>. Utilizzare l'attributo usemap per designare la mappa che verrà utilizzato:

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

10 Creare un tag <map> con un nome identico:

<Map name = yourmap>

11 All'interno del tag <map>, creare aree corrispondenti alle parti dell'immagine che saranno collegamenti attivi. Specifica la forma corrispondente della zona e la gamma delle coordinate xy. Quindi specificare il collegamento appropriato. Per esempio:

<Map name = yourmap>
<zona forma = rect coordinate = 0, 0, 50, 50 href = ""> link.html

Le coordinate sono elencati nell'ordine x1, y1, x2, y2. L'esempio potrebbe creare un collegamento attivo in un'area quadrata tra i valori di x da 0 a 50 e valori y da 0 a 50. Un browser sviluppatore add-on o altro strumento di mappatura immagine web è utile per determinare le coordinate applicabili.

12 Creare tutte le aree, se necessario, con le forme desiderate (rettangolo, cerchio o poligono), e quindi chiudere il <map> con </ map>.

13 Aprire la pagina web in un browser web e assicurarsi che l'immagine sta funzionando, se lo desideri. In caso contrario, continuare a fare modifiche nel programma di elaborazione testi.