|
|
Sau baøi hoïc naøy baïn coù theå:
Trong baøi 7a chuùng ta ñaõ bieát laøm theá naøo ñeå vieát HTML cho vieäc ñaët moät hình aûnh inline trong trang Web, vaø trong baøi 8e chuùng ta cuõng ñaõ bieát raèng coù theå laøm cho toaøn boä hình aûnh hoaït ñoäng nhö laø moät sieâu lieân keát ñeán moät muïc coù lieân quan khaùc. Töø nhöõng ngaøy ñaàu tieân cuûa Web, ñaõ coù moät caùch ñeå nhöõng phaàn khaùc nhau trong moät hình aûnh inline trôû thaønh sieâu lieân keát -- ñöôïc bieát döôùi teân goïi laø "Baûn ñoà hình aûnh lieân keát" (clickable image map).
Nhöng maõi cho ñeán thôøi gian gaàn ñaây, baûn ñoà hình aûnh lieân keát vaãn ñoøi hoûi moät vaøi thöù ñöôïc xöû lyù töø treân web server. Ñaây laø caùch hoaït ñoäng cuûa noù:
Ñaây laø moät tieán trình veà phía server; moät tieán trình khaù hieäu quaû vaø server coù theå xöû lyù noù trong vaøi phaàn giaây. Nhöng noù cuõng coù nghóa laø söû duïng moät baûn ñoà hình aûnh lieân keát luoân luoân phaûi truy xuaát vaøo server.
Spyglass laø browser ñaàu tieân coù khaû naêng xöû lyù vieäc tính toaùn vaø truyeàn chính xaùc URL döïa treân caùc toïa ñoä maø vieäc naøy ñöôïc thöïc hieän ngay beân trong phaàn HTML cuûa trang. Ñaây laø moät tieán trình veà phía client. Taát caû vieäc laøm chuùng ta vöøa noùi ôû treân baây giôø chæ ñöôïc giaûi quyeát nhôø vaøo browser vaø phaàn HTML cuûa trang! Ñeå bieát theâm chi tieát veà baûn ñoà hình aûnh, haõy xem Imagemap Help Page (IHiP).
Daïng HTML cho moät baûn ñoà hình aûnh lieân keát veà phía client (client-side clickable image map) laø:
<img src="image.gif" usemap="#map_name">
trong ñoù image.gif laø teân taäp tin hình aûnh vaø map_name laø moät lieân keát anchor (xem baøi 8d) ôû ñaâu ñoù trong cuøng taäp tin HTML vaø coù daïng:
<map name="map_name">
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
:
:
</map>
Moãi doøng trong tag <map>...</map> xaùc ñònh moät vuøng "noùng" khaùc nhau döïa treân caùc toaï ñoä ñöôïc chæ ñònh baèng coords=. Trò x1,y1 cho bieát toïa ñoä tính theo chieàu ngang vaø chieàu cao cuûa ñieåm ôû goùc treân beân traùi (tính töông ñoái so vôùi goùc treân beân traùi cuûa toaøn hình aûnh), coøn x2,y2 cho bieát toïa ñoä tính theo chieàu ngang vaø chieàu cao cuûa ñieåm ôû goùc döôùi beân phaûi. URL1, URL2, ... laø caùc URL (hoaëc teân taäp tin cuïc boä) cho vuøng töông öùng khi ñöôïc click.
Chuù yù: Ñeå chæ ñònh caùc toïa ñoä cho vuøng noùng, baïn caàn söû duïng moät vaøi loaïi chöông trình ñoà hoïa. Yahoo coù vaøi trình tieän ích khaùc giuùp baïn laøm vieäc naøy deã daøng hôn. Vôùi baøi naøy, chuùng toâi seõ cung caáp saün caùc toïa ñoä chính xaùc cho baïn.
Trong baøi naøy chuùng ta seõ theâm vaøo trang Volcano Terminology (taäp tin term.htm) moät hình aûnh chæ ra caùc caùc nuùi löûa khaùc nhau ñaõ hoaït ñoäng laïi. Moãi vò trí trong hình seõ taïo sieâu lieân keát ñeán moät web site beân ngoaøi. Ngoaøi ra chuùng ta seõ taïo theâm hai lieân keát nöõa ñeán caùc taäp tin rieâng (cuïc boä).
There are many different types of volcanic eruptions and landforms. They can be classified according to the degree of "explosiveness" and the height of the eruption column: <p> <center> <font size=+2> Investigate each type by clicking on a picture </font><br> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> <p> </center>
Chuù yù: Chuùng ta ñaõ theâm vaøo moät hình aûnh inline cuøng vôùi vieäc tham khaûo moät taäp caùc toïa ñoä keát hôïp vôùi teân "volcmap". Tag <center>...</center> ñöa hình aûnh vaøo giöõa trang (xem baøi 20). Thuoäc tính border=0 beân trong tag <img> huûy boû vieäc theå hieän hoäp bao quanh hình aûnh sieâu lieân keát.
<map name="volcmap"> <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>
Chuù yù: Baïn neân bieát raèng 5 trong 7 vuøng ñöôïc ñònh nghóa keát noái ñeán caùc site internet ôû xa. Hai caùi coøn laïi ñeán caùc taøi lieäu cuïc boä maø chuùng ta seõ taïo ra trong böôùc keá tieáp.
<html> <head> <title>Explosiveness</title> </head> <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5> <h1 align=center>Explosiveness</h1> The <b>explosiveness</b> of an observed volcanic eruption is estimated by the calculated force of the eruption. Experiments have shown that when water comes in contact with hot magma, the eruption is much stronger- this is known as <b>hydro-volcanism</b>. <p> For pre-historic eruptions, the explosiveness is estimated by the degree of fragmentation of small volcanic particles. A more explosive eruption will "shatter" volcanic tephra much more then a less explosive eruption. <p> <a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a> <HR> <ADDRESS> <B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : Explosiveness</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/explode.htm</tt> <p> </body> </html>
Caát laïi taøi lieäu naøy trong cuøng thö muïc vôùi caùc taäp tin HTML khaùc vaø goïi noù laø explode.htm
<html> <head> <title>Height of Eruption Column</title> </head> <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5> <h1 align=center>Height of Eruption Column</h1> The <b>height</b> of a volcanic eruption cloud (in kilometers) is taken from direct observation or from estimates based upon historic accounts. <p> For pre-historic eruptions, this scale is calculated based upon the <b>dispersal</b> of the volcanic products- i.e how far and wide they are scattered. Volcanic eruptions that have very tall columns will spread tephra far and wide. <p> <a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a> <HR> <ADDRESS> <B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : Height of Eruption Column</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/height.htm</tt> <p> </body> </html>
Caát laïi taøi lieäu naøy trong cuøng thö muïc vôùi caùc taäp tin HTML vaø goïi noù laø height.htm
Baïn neân kieåm tra trang web cuûa baïn vôùi ví duï maãu ñeå bieát trang baûn ñoà hình aûnh lieân keát neân ñöôïc thaáy nhö theá naøo.
Caàn nhôù raèng ñaây khoâng phaûi laø söï phaùt trieån môùi cuûa HTML, baïn neân nghó ñeán vieäc coù nhöõng ngöôøi xem söû duïng moät web browser khoâng hoå trôï client-side image maps. Taøi lieäu cuûa NetScape cho vaøi ví duï ñeå xöû lyù tröôøng hôïp naøy. Neáu baïn söû duïng baûn ñoà hình aûnh lieân keát veà phía server, baïn coù theå duøng noù cho caùc browser khoâng hoå trôï vieäc thoâng dòch veà phía client, khi ñoù noù phaûi tham khaûo ñeán server. Chuùng toâi ñaõ söû duïng caùch naøy cho baûn ñoà hình aûnh lieân keát cuûa chuùng toâi taïi Maricopa Community Colleges.
Vôùi tröôøng hôïp cuûa chuùng ta, chuùng ta coù theå taïo moät trang ñaëc bieät ñeå thoâng baùo cho caùc web browser khoâng coù hoå trôï baûn ñoà hình aûnh lieân keát veà phía client:
<html> <head> <title>No Image Map Available</title> </head> <BODY BGCOLOR = #000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5> <h1 align=center>Sorry!</h1> Apparently your web browser does not support client-side image maps. You can still reach the i nformation by following these links: <ul> <li><A HREF="explode.htm">Explosiveness</A> <li><A HREF="height.htm">Height of Eruption Column</A> <p> <li><A HREF=" http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html" >Surtseyan</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">Phreato-Plinian</A> <li><A HREF="http://www.soest.hawaii.edu/hvo/">Hawaiian</A> <li><A HREF="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html">Strombolian</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plinian</A> </ul> <p> <a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to<i>Volcano Web</i></a> <HR> <ADDRESS> <B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : No Image Map</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/">Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/nomap.htm</tt> <p> </body> </html>
Caát laïi taäp tin naøy vôùi teân nomap.htm
Chuù yù: Haõy xem caùch chuùng ta cung caáp cho ngöôøi xem cuøng moät loaïi thoâng tin nhö trong baûn ñoà hình aûnh lieân keát. Moät trang web toát khoâng giôùi haïn bôùt thoâng tin ñoái vôùi moät ngöôøi naøo caû vì hoï coù quyeàn söû duïng caùc loaïi browser khaùc nhau.
<img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
vaø thay noù thaønh
<a href="nomap.htm"> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> </a>
Chuù yù: Baïn coù theå phaân tích theâm veà HTML naøy - neáu web browser coù theå hieåu baûn ñoà hình aûnh lieân keát veà phía client, noù seõ thöïc hieän ñieàu ñoù. Ngöôïc laïi, toaøn boä hình aûnh laø moät sieâu lieân keát ñeán trang nomap.htm page.
So saùnh caùc trang web cuûa baïn vôùi ví duï maãu ñeå bieát noù neân xuaát hieän nhö theá naøo. Neáu caùc trang cuûa baïn khaùc vôùi trang maãu hay caùc lieân keát sieâu vaên baûn hoaït ñoäng khoâng ñuùng, haõy xem laïi caùc vaên baûn baïn ñaõ ñaùnh vaøo trong trình soaïn thaûo.
Caùc vaán ñeà neân xem laïi cho baøi naøy:
Chuù yù raèng söï tham khaûo caùc thoâng tin toïa ñoä trong tag <map>...</map> khoâng nhaát thieát phaûi ôû trong cuøng moät taøi lieäu HTML. Thuoäc tính usemap= coù theå lieân keát ñeán moät taäp tin HTML khaùc - ví duï nhö:
<img src="../pictures/buttonbar.gif" usemap="maps.htm#bmap3">
trong ñoù maps.htm coù theå laø moät taäp tin chöùa caùc tag <map>...</map> cho moät vaøi taäp tin. Baïn coù theå laøm ñöôïc ñieàu naøy khoâng?
Haõy xeùt tröôøng hôïp baïn taïo ra vaøi (hay nhieàu) trang maø ôû treân ñænh cuûa trang coù moät hình vôùi vaøi button lieân keát ñeán caùc trang khaùc. Neáu baïn söû duïng caùch naøy, baïn coù theå tham khaûo ñeán chæ moät hình vaø moät taäp tin coù caùc toïa ñoä. Khi baïn phaûi thay ñoåi thanh hoa tieâu cuûa baïn (moät hình môùi? moät söï thay ñoåi URL cho moät button?) baïn chæ caàn ñieàu chænh moät taäp tin! (so saùnh vôùi vieäc thay ñoåi caùc tag <map>...</map> neáu chuùng ñöôïc theâm vaøo moãi trang web).
Tìm choã trong trang web cuûa baïn coù theå theâm vaøo moät clickable image map trong baøi hay trong phaàn hoa tieâu. Ñöøng bao giôø vöùt boû ngay baûn cuõ! Baïn phaûi laøm thöû vaøi laàn ñeå xaùc ñònh ñöôïc caùc vuøng "noùng" (baïn coù theå phoûng ñoaùn neáu baïn thaät söï lieàu maïng). Theo caùc ví duï trong baøi naøy ñeå vieát HTML cho baûn ñoà hình aûnh lieân keát.
Ñuû roài! Ñeán doøng cuoái cuøng roài!
The Internet Connection at MCLI is Alan
Levine --}
Comments to levine@maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut23.html