Hvordan Tildele webadresser til grafikk i HTML

Hvordan Tildele webadresser til grafikk i HTML


I HTML tar <img> -taggen en egenskap av "src" for å definere nettadressen til bildet. Koden må denne nettadressen for å finne bilde og vise det på en side. Du kan også vikle <a> tag rundt en <img> -taggen for å snu bildet inn i en klikkbar lenke til en annen side eller nettside. I dette tilfellet er de <a> kodene brukes på samme måte som det er brukt for tekstlenker, og teksten er erstattet med <img> -taggen.

Bruksanvisning

1 Tildele en URL til en <img> -taggen er "src" -attributtet for å fortelle leseren hvor du finner det bildet på Internett. Bildet tag med en "src" -attributtet ser slik ut:

<Img />

Bruk bare "image.png" i stedet for den fullstendige URL hvis bildet og nettsiden begge finnes i samme mappe på serveren din. Sett i nettleseren, vil bildet på http://yoursite.com/image.png vises på siden.

2 Pakk <img> -taggen med ankerkoder for å skape et bilde link. Som i vanlige tekstlenker, tar <a> lappen for ankere en egenskap av "href" for å definere URL for bildets link. I et anker tag "href" er som "src", men du kan ikke mikse og matche disse. Et bilde koblingen ser ut som følgende:

<a href="&lt;img"> http://anothersite.com "> & lt; img /> </a>

3 Style bilde eller kobling ved hjelp av Cascading Style Sheet kode. Du kan legge til en ramme rundt bildet eller gi det en hover staten. Her er et eksempel:

en img {background: grå; padding: 5px; border: 1px solid black;}

a: hover img {background: white;}

I eksempelet ovenfor, blir det koblede bildet en grå bakgrunn med polstring av fem piksler rundt så bakgrunnen vises fra bak bildet. Det er en solid, en-pixel ramme rundt den grå bakgrunnen. Når en bruker svever musa over bildet, endrer bakgrunn til hvit.

Hint

  • Når du peker på <img> -taggen til et bilde på en annen server, sjekk siden din for å sørge for en alternativ bildet ikke lastes. Noen servere er satt til å betjene et alternativt bilde å holde folk fra å bruke sine bilder.