Námsefnisgerð í HTML | Um | SOS | Nemendur | Hól | Tilvísanir | Skipanir | Lexíur | fyrri |

23. Kortlagðar snertimyndir

Gerðu ýmsa hluta vefmyndar að stiklulegg með því að kortleggja snertifleti í skjalinu sjálfu...

Markmið

Eftir þessa lexíu átt þú að kunna að:

Gera greinarmun á kortlagningu snertimynda í skjali og á vefþjóni.
Búa til vefmynd þar sem hlutar myndarinnar eru stikluleggir á mismunandi vefsíður, myndir og önnur gögn á internetinu.

Lexía

Athugaðu: Ef þú ert ekki með skjölin úr síðustu lexíu, þá getur þú sótt eintök af þeim núna. Þú vilt ef til vill líka skoða prufusíðu til að sjá hvort vefskoðarinn þinn skilur þær skipanir sem ræddar eru í þessari lexíu.

Í lexíu 7a lærðum við að skrifa HTML skipanir sem setja vefmynd á síðuna okkar og í lexíu 8e sáum við hvernig hægt er að gera alla myndina að stiklulegg á skyldar síður og myndir. Frá því í árdaga vefsins hefur verið til aðferð til að gera hluta myndar að stiklulegg -- þetta kallast á ensku „clickable image map“ og við ætlum að kalla kortlagða snertimynd.

En þartil nýlega hafa þessar snertimyndir krafist þess að þær væru þjónustaðar frá vefþjóninum sjálfum. Þetta virkar svona:

Notandinn sér síðu með snertimynd og ... smellir á neðra hornið hægra megin á myndinni.
Vefskoðarinn segir „Hey! Músin var notuð til að smella á myndina! Nú verð ég að senda skilaboð um það til vefþjónsins - Einhver smellti á þetta svæði á þessari mynd.“
Vefþjónninn segir „Hmmm. Ég er með hnit fyrir þessa mynd- HTML skjalið sem kallið kom frá segir skoðaðu hnitin í þessari skrá... Ókei, skráin segir, ef hnitin eu í þessu ferhyrnda svæði, þá á ég að senda vefskoðarann á þetta URL.“ Vefþjónninn sendir síðan þessar upplýsingar til vefskoðarans.
Vefskoðarinn segir „Ókei! Vefþjónnin segir mér að ég verði að fara á þetta URL - við þangað!“

Þetta er snertimynd kortlögð hjá vefþjóni (e. server-side image map); nokkuð skilvirk aðferð sem tók aðeins nokkur sekúndubrot. En þetta þýddi að til að geta búið til snertimyndir, þá þurfti aðgang að vefþjóni.

Spyglass var fyrsti vefskoðarinn sem búinn var hæfileikanum að geta reiknað út hnitin og senda rétta URL-ið eftir hnitakerfi sem geymt var í HTML skjalinu sjálfu. Þetta er snertimynd kortlögð í vefskjali (e. client-side image map). Allt samtalið fyrir ofan á sér nú stað á milli vefskoðarans og - vefskoðarns! Þú getur fengið frekari upplýsingar um snertimyndir á Imagemap Help Page (IHiP).

HTML skipanir sem þarf til að búa til snertimynd í skjali eru:

  <img src="mynd.gif" usemap="#kort_nafn">

þar sem mynd.gif er skjalnafnið á vefmynd og kort_nafn er akkeristengi (sjá lexíu 8d) á annan stað í sama HTML skjali:

  <map name="kort_nafn">
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
         :
         :
   </map>

Hver lína í <map>...</map> skipanasettinu skilgreinir sinn „snertiflöt“, svæði sem afmarkað er með hnitunum coords=. x1,y1 eru láréttu og lóðréttu pixelhnitin á efra hornið til vinstri (miðað við efra hornið vinstra megin á myndinni sjálfri) á meðan x2,y2 eru láréttu og lóðréttu pixelhnitin á neðra hornið til hægri. URL1, URL2, ... eru URL-in (eða skjalnöfn ef hoppað er í sama vef) sem kalla skal upp ef smellt er á flötinn.

ATHUGAÐU: Til að finna hnitin fyrir snertiflötinn verður þú að nota einhverskonar myndvinnsluforrit. Image Map Help Page eða Yahoo lista nokkur myndvinnsluforrit sem gera þetta verk auðveldara. Í þesari lexíu látum við þig fá nákvæm hnit.

Í þessari lexíu ætlum við að laga Hugtök í eldfjallafræði síðuna (skráin hugt.html) með því að setja á hana mynd sem sýnir ýmsar gerðir eldgosa. Hver gerð er síðan stikla á síðu á Internetinu sem gefur upplýsingar um hana. Þar að auki ætlum við að búa til tvo stikluleggi í viðbót sem tengjast síðum á okkar eigin vef.

Fyrst þarft þú að ná í eintak af myndinni sem þú ætlar að nota með því að fara á Lexía 23 myndvistunarmiðstöð. Vistaðu myndina sem volc.jpg og athugaðu að hún sé geymd í undirskránni/möppunni myndir.
Opnaðu skjalið hugt.html í textaritlinum.
Fyrir neðan síðustu efnisgreinina („...sögulega virku eldfjalli á eyjunni Martinique. “), skaltu bæta þessum texta við:
```
Það eru til margar mismunandi gerðir eldgosa. Þessar
gerðir eru flokkaðar eftir <A HREF="explode.html">mismunandi „sprengikrafti“</A>
og <A HREF="height.html">hæð</A> gossúlunnar:

<center>

Skoðaðu hverja gerð með því að smella á mynd
 
<img src="../myndir/volc.jpg" usemap="#eldkort" border=0>

</center>
```
ATHUGAÐU: Við vorum að setja inn vefmynd sem mun kalla í sett af hnitum í gegnum stiklunafnið „eldkort“. Skipanirnar <center>...</center> setja myndina á miðja síðun (sjá lexíu 20). Eigindin border=0 innan í <img> skipuninni kemur í veg fyrir að rammi myndist utanum myndina.

Við settum líka inn tvær stiklur í skjöl sem við búum til á eftir.

Næst ætlum við að bæta kortahnitunum í skjalið. Þau mega koma hvar sem er -- þetta er HTML texti sem sést ekki á vefskoðaranum. Við mælum með að þú setjir þetta bara næst á eftir textanum sem þú ritaðir áðan:


<map name="eldkort">
<area shape="rect"
 href="http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html"
   coords="48,46,204,153">
<area shape="rect" href="explode.html"
   coords="0,66,26,227">
<area shape="rect" href="height.html"
   coords="95,283,378,309">
<area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/"
   coords="321,154,468,261">
<area shape="rect" href="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html"
   coords="172,155,318,274">
<area shape="rect" href="http://www.soest.hawaii.edu/hvo/"
   coords="36,155,168,276">
<area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/"
   coords="90,3,343,123">
</map>

ATHUGAÐU: Þú ættir að sjá að 5 af 7 flötum sem skilgreindir eru tengjast öðrum síðum á Internetinu. Hinir tveir tengjast síðum á sama vef. Þessar tvær síður ætlum við nú að búa til.

Vistaðu skjalið hugt.html.

Við þurfum nú að búa til tvær vefsíður í viðbót sem verða tengdar með snertimynd. Búðu til nýtt skjal í textaritlinum þínum og setu þetta í það:


<html>
<head>
<title>Sprengikraftur</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#EEEEBB
LINK=#44DDFF VLINK=#00FF88>
<H5>Eldfjallavefurinn /
<A HREF="index.html">Heimasíða</A> /
<A HREF="hugt.html">Hugtök í eldfjallafræði</A> /
</H5>

<h1 align=center>Sprengikraftur</h1>
<b>Sprengikraftur</b> eldgosa sem fylgst
er með er metinn út frá útreiknuðu afli gossins.
Tilraunir hafa sýnt að þegar vatn kemst í samband
við bráðið hraun, þá er sprengikrafturinn mikið
meiri -- þetta er kallað <b>vatns-sprenging</b>.
<p>
Sprengikraftur forsögulegra eldgosa er metinn út frá
sundrungu smárra gosefna.  Tefra (gjóska) sundrast meira
í eldgosum með miklum sprengikrafti en í eldgosum með minni
sprengikrafti.
<p>
<a href="hugt.html">
<img src="../myndir/left.gif" alt="** " border=0>
Til baka á <i>Eldfjallavefinn</i></a>

<HR>
<ADDRESS>
<B><A HREF="index.html">Eldfjallavefurinn</A> :
<A HREF="hugt.html">Hugtök í eldfjallafræði</A> :
Sprengikraftur</B> <p>

Höfundur Gosi Hraundal,
<A HREF="mailto:gosi@vma.is">
gosi@vma.is</A><br>
Jarðfræðideild, <A HREF="http://www.vma.is/">
Framhaldsskóla Vestfjarða</A><p>
<TT>Síðast uppfærð 1. apríl 1995</TT>
</ADDRESS>
<p>
<tt>http://www.vma.is/vefur/explode.html</tt>
<p>
</body>
</html>

Vistaðu þetta skjal undir nafninu explode.html í sömu undirskrá og hin HTML skjölin þín eru í.

Búðu nú til annað tómt skjal og settu þetta í það:


<html>
<head>
<title>Hæð gossúlu</title>
</head>

<BODY BGCOLOR=#000000 TEXT=#EEEEBB
LINK=#44DDFF VLINK=#00FF88>
<H5>Eldfjallavefurinn /
<A HREF="index.html">Heimasíða</A> /
<A HREF="hugt.html">Hugtök í eldfjallafræði</A> /
</H5>

<h1 align=center>Hæð gossúlu</h1>
<b>Hæð</b> gossúlu úr eldfjalli
(í kílómetrum) er mæld beint eða metin eftir
frásögnum sjónarvotta.
<p>
Þegar um er að ræða forsöguleg gos er gossúlan
reiknuð eftir <b>dreifingu</b> gosefna --
þ.e. hversu lang og víða þau hafa dreifst.  Eldgos sem
hafa háa gossúlu dreifa tefrunni (gjóskunni) lengra
og um stærra svæði.
<p>
<a href="hugt.html">
<img src="../myndir/left.gif" alt="** " border=0>
Til baka á <i>Eldfjallavefinn</i></a>

<HR>
<ADDRESS>
<B><A HREF="index.html">Eldfjallavefurinn</A> :
<A HREF="hugt.html">Hugtök í eldfjallafræði</A> :
Hæð gossúlu</B> <p>

Höfundur Gosi Hraundal,
<A HREF="mailto:gosi@vma.is">
gosi@vma.is</A><br>
Jarðfræðideild, <A HREF="http://www.vma.is/">
Framhaldsskóla Vestfjarða</A><p>
<TT>Síðast uppfærð 1. apríl 1995</TT>
</ADDRESS>
<p>
<tt>http://www.vma.is/vefur/height.html</tt>
<p>
</body>
</html>

Vistaðu þetta skjal undir nafninu height.html í sömu undirskrá og hin HTML skjölin þín eru í.
Opnaðu nú skjalið hugt.html í vefskoðaranum þínum. Myndin af eldfjöllunum ætti nú að sjást og þegar þú færir músarbendilinn yfir hluta myndarinnar þá ætti hann að breytast í „hönd“ og einhvers staðar neðst í vefskoðaraglugganum ætti að sjást hvert þessi flötur í myndinni sendir þig ef þú smellir á hann.

Þú ættir að bera þína vefsíðu saman við þetta dæmi um hvernig snertimyndin á að virka.

Allir möguleikar teknir með

Ef við gefum okkur að þessar snertimyndir séu frekar nýlegt fyrirbæri í HTML forritun þá ættir þú að hugsa til þess að sumir notendur hafa ekki vefskoðara sem skilja kortlagðar snertimyndir í skjali. Í skjalasafni Netscape eru gefnir nokkrir möguleikar á því hvernig best er að ráða fram úr því. Ef þú getur sett hnitaskjal á vefþjóninn, þá getur þú komið því þannig fyrir að ef vefskoðarinn skilur ekki hnitakortið í skjalinu þá sæki hann það á vefþjóninn.

Þegar allt er skoðað, þá er betra að snertimyndir séu kortlagðar í vefskjali (e. client-side image maps) vegna þess að þá sparast óþarfa samskipti á milli vefskoðarans og vefþjónsins.

En að því slepptu, þá er hægt að setja upp sérstaka síðu eins og við ætlum að gera, sem opnast fyrir þá sem ekki skilja kortlagða snertimynd:

Fyrst verðum við að búa til nýtt HTML skjal sem við nefnum nomap.html. Opnaðu nýtt skjal í textaritlinum og settu þetta í það:


<html>
<head>
<title>Kortlög snertimynd ekki virk</title>
</head>
<BODY BGCOLOR = #000000 TEXT=#EEEEBB
LINK=#44DDFF VLINK=#00FF88>
<H5>Eldfjallavefurinn /
<A HREF="index.html">Heimasíða</A> /
<A HREF="hugt.html">Hugtök í eldfjallafræði</A> /
</H5>

<h1 align=center>Því miður!</h1>
vefskoðarinn þinn getur, að því er virðist, ekki
skilið kortlagðar snertimyndir í skjali.  En
þú getur nálgast upplýsingarnar með því að smella 
á eftirfarandi stikluleggi:
<ul>
<li><A HREF="explode.html">Sprengikraftur</A>
<li><A HREF="height.html">Hæð gossúlu</A>
<p>
<li><A HREF="http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html">Surtseyísk</A>
<li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">Freató-plinísk</A>
<li><A HREF="http://www.soest.hawaii.edu/hvo/">Hawaísk</A>
<li><A HREF="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html">Strombólísk</A>
<li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plinísk</A>
</ul>
<p>
<a href="hugt.html">
<img src="../myndir/left.gif" alt="** " border=0>
Til baka á <i>Eldfjallavefinn</i></a>

<HR>
<ADDRESS>
<B><A HREF="index.html">Eldfjallavefurinn</A> :
<A HREF="hugt.html">Hugtök í eldfjallafræði</A> :
Kortlög snertimynd ekki virk</B> <p>

Höfundur Gosi Hraundal,
<A HREF="mailto:gosi@vma.is">
gosi@vma.is</A><br>
Jarðfræðideild, <A HREF="http://www.vma.is/">
Framhaldsskóla Vestfjarða</A><p>
<TT>Síðast uppfærð 1. apríl 1995</TT>
</ADDRESS>
<p>
<tt>http://www.vma.is/vefur/nomap.html</tt>
<p>
</body>
</html>

Vistaðu þetta skjal undir nafninu nomap.html
ATHUGAÐU: Sjáðu hvernig við bjóðum notandanum afnot af sömu upplýsingum og hægt var að fá með snertimyndinni. Góð vefsíða takmarkar ekki notanda bara vegna þess að hann er með annan vefskoðara.
Opnaðu nú skjalið hugt.html í textaritlinum.
Finndu þessa línu:
```
 <img src="../myndir/volc.jpg" usemap="#eldkort" border=0>
```
og settu þetta í staðinn
```
 <a href="nomap.html">
 <img src="../myndir/volc.jpg" usemap="#eldkort" border=0>
 </a>
```
ATHUGAÐU: Þú ættir nú að geta skýrt þessar HTML skipanir -- ef vefskoðarinn skilur kortlagðar snertimyndir í skjali þá notar hann þær; annars er öll myndin stikluleggur í síðuna nomap.html.
Vistaðu skjalið og kallaðu það aftur upp í vefskoðaranum.

Gættu að hvað þú gerir

Berðu þínar síður saman við þessi dæmi um hvernig þær ættu að líta út. Ef þínar síður eru frábrugðnar dæmunum eða stikluleggir virka ekki, þá skaltu endurskoða textann sem þú ritaðir í textaritlinum.

Upprifjun

Upprifjunarefni fyrir þessa lexíu:

Hvaða munur er á kortlögðum snertimyndum þar sem hnitin eru geymd á vefþjóni og þar sem þau eru geymd í skjalinu sjálfu?
Hvað gerir <map>...</map> skipunin?
Hvað er hægt að gera ef vefskoðarin skilur ekki kortlagðar snertimyndir í skjali?

Frekari upplýsingar

Þú getur fengið frekari upplýsingar um snertimyndir á Image Map Help Page.

Æfingar

Finndu staði í vefsíðunum þínum þar sem snertimynd gæti bætt útlit og notagildi síðunnar. Ekki kasta einhverri mynd inn bara til að hafa mynd! Þú þarft að leggja dálítið á þig til að skilgreina snertifletina (þú gætir giskað ef þú ert verulega örvæntingarfullur). Skrifaðu síðan HTML texta svipaðan þeim sem sýndur er í þessari lexíu fyrir myndina.

Næst á dagskrá....

Bætum META skipun í HEAD á síðunum... Af hverju? Vertu í sambandi!

FARA Á.... | Efnisyfirlit | síðasta: „Töflur“ | næsta: „META skipanir“ |

Námsefnisgerð í HTML: Lexía 23: Kortlagðar snertimyndir
©1994 - 2000 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

Tengiliður MCLI er Alan Levine
Sendu athugasemdir til alan.levine@domail.maricopa.edu
eða gaui@mmedia.is

URL: http://www.vma.is/tut/tut23.html
Þýtt með leyfi höfundar