[uppkast] Myndir: <img />

Skrifað 19. ágúst 2003, kl. 11:21

Þegar myndskreyta skal texta kemur <img /> markið að góðum notum. Markið tekur tvær stillingar, src="" og alt="", en báðar stillingarnar eru nauðsynlegar. Líkt og er með <br /> markið, þá er <img /> stakt mark sem þýðir að </img> er einfaldlega ekki til.

"Source file" stillingin

src="" stillingin tekur vefslóðina að myndinni sem á að birta. Oftast er einfaldast og öruggast er að nota alltaf fulla vefslóð (dæmi: src="http://mar.anomy.net/files/2003/08/test.jpg") en ef myndin er hýst á sama vefþjóni og vefsíðan sem hún birtist á, þá má sleppa nafn vefþjónsins framan af vefslóðinni (dæmi: src="/files/2003/08/test.jpg").

"Alternate text" stillingin

alt="" stillingin tekur stutta lýsingu á innihaldi myndarinnar (dæmi: alt="Hólshyrnan á sólríku sumarkvöldi"), en textinn nýtist öllum lesendum sem af einhverjum ástæðum sjá ekki myndina (t.d. blindum lesendum) og hjálpar leitarvélum að flokka og skrásetja innihald síðunnar.

Hér er dæmi um HTML kóðann sem birtir fjallamyndina fremst í kaflanum:

<img src="/files/2003/08/test.jpg" alt="Hólshyrnan á sólríku sumarkvöldi" />

Myndir má setja næstum því hvar sem er inn í textann á síðunni, en almennt er best að hafa þær á eftirfarandi stöðum:

• Fremst í <p> efnisgrein.
• Á milli efnisgreina
• Í sér efnisgreinamarki, án annars texta.

Með einföldum skipunum í CSS stílblaði vefsvæðisins má svo tilgreina litaðan ramma, spássíur og aðra þætti sem varða útlit og framsetningu myndarinnar.

(Ath: til er úrelt stilling border="" en fólki er ráðlegt að forðast hana og nota einfaldar CSS stillingar í staðinn.)

Myndir sem tilvísanir

Stundum er nauðsynlegt að vísa á stærri útgáfu af myndinni, eða á síðu með meiri upplýsingum um það sem kemur fram á myndinni, og þá kemur tilvísanamarkið (<a href="">) að góðum notum. Það er notað á eftirfarandi hátt:

<a href="http://pics.mar.anomy.net/2003/06/16/02.drive-by-shooting/dcp_6426.jpg"> <img src="/files/2003/08/test.jpg" alt="Hólshyrnan á sólríku sumarkvöldi" /></a>

Sem birtist svona: (prófið að smella)

Venjulega nær tilvísunarmarkið utan um venjulegan texta, en þarna er myndin notuð í stað textans.

Hægri- og vinstristilltar myndir

Það hvort mynd færist út í vinstri eða hægri kant síðunnar og texti flæðir í kringum hana, er dæmi um framsetningu sem er skilgreind í CSS stílblaði vefsvæðisins. Til að virkja slíka sérhegðun myndarinnar er best að nota class="" stillinguna á <img /> markið.

Gefum okkur að "left" og "right" séu tvö mismunandi gildi sem class="" stillingin getur tekið, þá verður kóðinn fyrir hægri- eða vinstristilltar myndir svona:

• <img class="left" src="mynd.jpg" alt="lýsing" /> (vinstristillt mynd)
• <img class="right" src="mynd.jpg" alt="lýsing" /> (hægristillt mynd)

og í CSS stílblaðsskrá síðunnar þarf að bæta eftirfarandi línum:

img.left {
  float : left;
  margin : 0 .67em .33em 0;
}
img.right {
  float : right;
  margin : 0 0 .33em .67em;
}

...og þá byrja myndir og texti að flæða til hægri og vinstri.

---

Meira þessu líkt: HTML/CSS.