Het toewijzen van URL's naar afbeeldingen in HTML

Het toewijzen van URL's naar afbeeldingen in HTML


In HTML neemt de < img >-tag een kenmerk van "src" te definiëren van de URL van de afbeelding. De tag moet deze URL naar het beeld vindt en deze op een pagina weergeven. U kunt ook laten teruglopen van de < een > tag rond een < img >-tag om te zetten het beeld in een klikbare link naar een andere pagina of website. In dit geval wordt de < een > tags dezelfde manier gebruikt als het wordt gebruikt voor tekstlinks, en de tekst wordt vervangen door de < img >-tag.

Instructies

1

Een URL toewijzen aan een < img >-tag kenmerk van de "src" om te vertellen de browser waar om te vinden dat beeld op het Internet. De image-tag met een kenmerk "src" ziet er zo uit:

< img / >

Gebruik alleen "image.png" in plaats van de volledige URL als uw afbeelding en webpagina beide aanwezig zijn in dezelfde map op uw server. Wanneer bekeken binnen de browser, wordt de afbeelding op de http://yoursite.com/image.png weergegeven op de pagina.

2

Wikkel de < img >-tag met ankertags maken een afbeeldingslink. Net als in gewone tekstlinks duurt de < een > tag voor ankers een kenmerk van "href" te definiëren van de URL voor de afbeelding link. In een anker-tag, "href" is als "src", maar u kunt geen mix en match deze. Een koppeling naar afbeelding ziet er als volgt uit:

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

3

Stijl van de afbeelding of koppeling naar afbeelding met behulp van Cascading Style Sheet code. U kunt een rand rond de afbeelding toevoegen of geef het een met aanwijseffect staat. Hier is een voorbeeld:

een img {achtergrond: grijs; padding: 5px; rand: 1px effen zwart;}

een: Beweeg img {achtergrond: witte;}

In het bovenstaande voorbeeld wordt de gekoppelde afbeelding een grijze achtergrond met opvulling van vijf pixels rondom zodat de achtergrond achter de afbeelding worden weergegeven. Er is een solide, één pixel rand rond de grijze achtergrond. Wanneer een gebruiker de muis over de afbeelding beweegt, verandert de achtergrond wit.

Tips & waarschuwingen

  • Wanneer de tag < img > verwijst naar een afbeelding op een andere server, Controleer uw pagina om ervoor te zorgen dat er een alternatieve afbeelding niet wordt geladen. Sommige servers zijn ingesteld om te dienen een alternatieve afbeelding om te voorkomen dat mensen met behulp van hun beelden.