Hvordan lage Web linker i en HTML Bilde

Hvordan lage Web linker i en HTML Bilde


Bilder kan være et attraktivt og meget funksjonell måte å integrere linker inn på din side. Bildene er en stor del av engasjerende web design; en ren tekst nettsted er sjelden sett, og ofte lite tiltrekkende. Linkene på nettstedet ditt kan være enten tekst eller bilde. Faktisk en koblet, klikkbart bilde generelt gir en mer intuitiv brukeropplevelse. Heldigvis er det to relativt enkle tilnærminger til å integrere linker til bilder i Hypertext Markup Language (HTML).

Bruksanvisning

Bildet

1 Design ditt bilde i et bilderedigeringsprogram. Alternativt kan du få bildet ditt fra andre steder, men alltid sørge for at du har rett til å bruke et bilde, og at du gir kreditt til sin skaper.

2 Sørg for at bildet maskene godt med de andre visuelle aspekter av din nettside. Pass på at de andre fargene som brukes i din nettside er ikke risting eller distraherende når de vises sammen med bildet.

3 Lagre bildet i samme mappe som websiden din. Pass på at det er en akseptabel format for HTML.

Den <img> Tag

4 Åpne din nettside i et tekstbehandlingsprogram. Bruk "Åpne med ..." -funksjonen når du finner din nettside i mappen; vanligvis, vil dobbeltklikke på en HTML-fil åpne den i din standard nettleser. Du ønsker ikke å gjøre dette ennå.

5 Finn koblingen i websiden din, og legger inn en <img> -taggen i <a href> tag. For eksempel:

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

Dette vil skape et bilde som fungerer som en link. Bruk denne fremgangsmåten hvis du ønsker å bruke bildet ditt for bare en link.

6 For å eliminere ramme rundt bildet, sette inn border = "0" i din <img> -taggen:

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

7 For å få teksten til å dukke opp når markøren svever over bildet, setter alt = "teksten" inn <img> -taggen:

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

bilde~~POS=TRUNC Maps

8 Hvis du ønsker å bruke ett bilde for flere forskjellige linker, vil du trenger for å lage et bildekart. Åpne din nettside i et tekstbehandlingsprogram.

9 Plasser bildet i ønsket sted i koden med <img> -taggen. Bruk usemap egenskap å utpeke kartet du skal bruke:

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

10 Lag en <map> tag med en identisk navn:

<Map name = yourmap>

11 Innenfor <map> tag, skape områder som tilsvarer de deler av bildet som vil være aktive lenker. Angi tilsvarende form av området og omfanget av xy-koordinater. Deretter angir den aktuelle linken. For eksempel:

<Map name = yourmap>
<area shape = rect coords = 0, 0, 50, 50 href = "link.html">

Koordinatene er oppført i den rekkefølgen x1, y1, x2, y2. Eksempelet ville skape en aktiv link i et firkantet område mellom x-verdier fra 0 til 50 og y-verdier fra 0 til 50. En webutvikler nettleser add-on eller et annet bilde kartleggingsverktøyet er nyttig for å bestemme de gjeldende koordinatene.

12 Lag så mange områder som nødvendig, med de ønskede former (rektangel, sirkel eller polygon), og deretter lukker <map> tag med </ kart>.

1. 3 Åpne din nettside i en nettleser, og sørg for at bildet ditt fungerer som ønsket. Hvis ikke, fortsetter å gjøre endringer i tekstbehandlingsprogrammet.