Client-Side maps ทำงานบนเว็ปเบลาเซอร์ของผู้ใช้ browsers end. มันทำงานได้ดีมาก, แต่ใน browser รุ่นเก่าๆ ไม่สามารถอ่านค่ามันได้ (like Netscape 1.0) ผู้เยี่ยมก็จะไม่สามารถ ใช้มันหรืออ่านค่าไม่ได้. คุณก็จะเสียฐานลูกค้าไป แต่ผู้เขียนคิดว่า, เป็นเทกนิคที่วิเศษมาก. คุณไม่ต้องกังวลกับการใช้ cgi-bin access เพื่อจะควบคุมมัน.

Server-Side ทำงานคล้าย client-side map, แต่จริงๆ แล้วก็คือโปรแกรม. เมื่อ map ถูกคลิก, โปรแกรมบน servers end จะเริ่ม runs และนำ URL ที่เหมาะสมมาให้ browser ทำการ load แสดงผล. สามารถทำงานได้บนเกือบทุก browser ที่ผู้เขียนทราบ. แต่ถ้าคุณไม่สามาร access ถึง cgi-bin directory ได้, ก็ไม่สามารถใช้มันได้.

Client-Side Image Maps
ต้วอย่างของ client-side map จะเป็น map บนเพจ main page ของเว็ปไซร์. ต่อไปนี้คือ Source code:

&ltmap name="MainMap"> &ltarea shape=rect coords="0,0,187,30" href="tags/">
&ltarea shape=rect coords="1,31,187,56" href="forms/">
&ltarea shape=rect coords="1,56,187,77" href="tables/">
&ltarea shape=rect coords="1,77,187,100" href="frames/">
&ltarea shape=rect coords="1,100,187,124" href="cgi/">
&ltarea shape=rect coords="1,124,187,148" href="javascript">
&ltarea shape=rect coords="1,148,187,170" href="java/">
&ltarea shape=rect coords="1,170,187,197" href="editors.html">
&ltarea shape=rect coords="1,198,187,239" href="links.html">
</map>
&ltimg src="picts/mainmap.gif" width=187 height=239 border=0 alt=The HTML Tutor main map - for HTML buffs everywhere" usemap="#MainMap">

แทก &ltmap></map> กำหนดว่านี้เป็น map อย่างแน่นอน, และ name เป็นการตั้งชื่อ map สำหรับใช้บนเบลาเซอร์. ซึ่งอ้างไว้ในแทก &ltimg src>. เป็นการกำหนดว่าเป็น map exists. ตอนนี้มาว่ากันถึงแทกต่างๆ ภายใน map กันบ้าง.
area shape=rect - กำหนดลักษณะรูปทรงหรือ shape ของพื้นที่ area ที่จะทำลิ้งก์. ซึ่งสามารถกำหนดเป็น สี่เหลี่ยมประเภทต่างๆ, วงกลม หรือรูปหลายๆ เหลี่ยมแปลกๆ ก็ได้.
coords="1,2,3,4" - กำหนดองค์ประกอบต่างๆ ของส่านวงกลม หรือรูปหลายๆ เหลี่ยม แปลกๆ ดังกล่าวข้างต้น.
href="file.html" - เป็นการบอกว่าเป็น hypertext link ซึ้งเป็นสิ่งที่พื้นที่ area ใน map จะโยง ไปถึง. ซึ่งสารถจะเป็นรูปภาพ image, หรือแม้นแต่จะเป็นแทก mailto: ก็ได้. ขึ้นอยูกับการ กำหนดของคุณ.

ตอนนี้, เราก็จะทำการจบหรือแทก end ทั้งหมดข้างบนด้วยแทก &ltimg>. คุณจะสังเกตุว่า มันจะเหมือนกันกับแทกอื่นๆ ทั้งหมด, มีเพียงแต่แทก usemap="#MainMap" เท่านั้น. ซึ่งถ้าปราศจากแทกนี้, map จะไม่สามารถทำงานได้. เพราะเป็นการบอกเบลาเซอร์ว่า รูปภาพ ที่กำลังจะทำการโหลด ควรจะเกี่ยวข้องกับ map และจะได้ใช้มันอย่างสอดล้องกกัน ได้อย่างถูกต้อง.

ใช้ครับ, นั้นเป็นวิธีที่ดี... แต่เราจะสามารถใช้วิธีใดกำหนด coordinates? Well, มีสองวิธีครับ. วิธีที่ง่าย ที่สุดคือ download Map this! image map editor ที่มีคุณภาพสำหรับ Windows 95. เป็นวิธีที่ง่าย ที่สุดในการสร้างมัน. ถ้าคุณไม่สามารถใช้วิธีนี้ได้, ให้ลองหา Paint Shop Pro. เป็นโปรแกรมที่ช่วยให้คุณเห็น coordinates ของรูปภาพ. เป็นโปรแกรมกราฟฟิกที่ดีเช่นกันI. เพียงแค่ใช้อุปกรณ์ eyedropper เป็นตัวกำหนด coordinates.

Server-Side Image Maps
Server-side image maps มีลักษณะ basic layout เหมือนกับของ client-side image maps, แต่มันสั่งงานต่างกันกว่าเล็กน้อย. เราจะใช้ coordinates from ควบคู่ไปกับ map ด้านบน. แต่ต่อไปนี้จะแสดงให้เห็นว่ามันจะ ปรากฏอย่างไรใน server-side map:

default http://206.156.15.206/html/
rect http://206.156.15.206/html/tags/	0,0	187,30
rect http://206.156.15.206/html/forms/	1,31	187,56
rect http://206.156.15.206/html/tables/	1,56	187,77
rect http://206.156.15.206/html/frames/	1,77	187,100
rect http://206.156.15.206/html/cgi/	1,100	187,124
rect http://206.156.15.206/html/javascript	1,124	187,148
rect http://206.156.15.206/html/java/	1,148	187,170
rect http://206.156.15.206/html/editors.html	1,170	187,197
rect http://206.156.15.206/html/links.html	1,198	187,239

ซึ้งจะเป็นการบอกเซฟเวอร์ ว่าส่วนทีทำการเลือก หรือ selection นั้นเป็นสี่เหลื่ยม, ซึ่งควรจะได้คล้ายๆ ดังต่อไปนี้ http://206.156.15.206/html/tags พร้อมกับโค๊ตต่างๆ ที่กำหนด ส่านประกอบต่างๆ ของ image map ที่จะตามมาด้านหลังเช่นในตัวอย่าง. ส่วน default เป็นการกำหนดว่า ควรจะให้รูปภาพลิ้งก์ ไปยังที่ไหน เมื่อถูกคลิก ซึ่งไม่ได้กำหนดไว้โดย coordinates. เพื่อให้สามารถทำงานได้ บนทุกๆ ระบบเท่าที่จะเป็นไปได้ คุณควรจะใช้ &lta href="/cgi-bin/imagemap/cgi-bin/maps/html.map">&ltimg src="picts/map.gif" ISMAP></a>. คำว่า ISMAP เป็นการบอกเซฟเวอร์ว่า รูปภาพนี้เป็นภาพ  image map, และ html.map เป็นการกำหนดองค์ประกอบต่างๆ ของ image map นั้น. แทก /cgi-bin/imagemap จะเป็นสคลิปร์ cgi บนเซฟเวอร์ที่กำลังจะใช้, ส่วนแทก /cgi-bin/maps/html.map จะบอกสคริปร์ imagemap ว่าที่ไฟล์ไหนจะเป็นตัวกำหนดองค์ประกอบต่างๆ ของ image map.

ผู้เขียนทราบว่าอาจทำให้คุณสับสนบ้าง. ดังนั้นถ้าคุณต้องการใช้ server-side image maps, ควรสอบถามขอความช่วยเหลือ ผู้ดูแลเซฟเวอร์ local webmaster ของคุณ. และถ้าไม่ได้ผลจริงๆ ใส่ลงในเว็ปบอดก็ได้ หรือลองถามผู้เขียนมาเป็นทางสุดท้าย...

ถ้าต้องการทราบรายละเอียดของ image maps ทั้งสองชนิดเพิ่มเติม, หาเวลาว่าง ลองเซ็กดูในไซร์ต่างๆ ที่มีบทเรียน tutorials ดูน๊ะครับ:

 

Return Home

All Artwork & Design ฉ 1997-1999 Krit Spooker