การเชื่อมโยงข้อมูล ตอนที่3

การแมปรูปภาพ (Image Maps)

การแมปภาพหรือ Image Maps เป็นวิธีการนำรูปภาพมากทำเป็นจุดเชื่อมโยงข้อมูล หลายจุดในรูปเดียวกัน ลักษณะการทำงานของ Image Maps จะมีการกำหนดจุดโคออดิเนต ณ ตำแหน่งใดๆ ของรูปภาพ โดยตำแหน่งซ้ายมือบน สุดจะมีจุดโคออติเนตเป็น (0,0) เป็นต้น

เมื่อก่อนนั้น การแมปรูปภาพเป็นเรื่องที่ค่อนข้างยุ่งยาก เพราะต้องใช้ Cgi และยังต้องขออนุญาติ Servers ของผู้ให้บริการก่อน เพราะแมปรูปภาพนั้นต้องเขียนเป็นโปรแกรมหรือสคริปเก็บไว้ที่เซิร์ฟเวอร์ และโปรแกรมที่เขียนนั้นต้องใช้คุณสมบัติที่เรียกว่า Cgi (Common Getway Interface) และการแก้ไขโปรแกรมในเซิร์ฟเวอร์นั้นเป็นเรื่องที่ค่อนข้างยุ่งยาก เพราะจะเกี่ยวข้องการการรักษาความปลอดภัยของเซิร์ฟเวอร์

แต่ในปัจจุบัน เราสามารถแมปรูปภาพได้จากไฟล์ HTML โดยการเขียนคำสั่งสำหรับ การกำหนดจุดต่างๆได้ใน HTML ได้โดยตรง ทำให้ไม่ต้องไปยุ่งกับเซิร์ฟเวอร์อีกต่อไป เราเรียกวิธีการนี้ว่า Client Side Image Maps หรือ CSIM

วิธีการแมปรูปภาพ (Image Maps)
คำสั่งในการแมปรูปภาพจะมีอยู่ด้วยกัน 3 คำสั่ง ดังนี้

<Map>..</Map>
<Area Shape=รูปทรง Coords=x,y href=เป้าหมาย>
<img src=รูปภาพ UseMap=#MapName>

1. <Map>..</Map>

เป็นคำสั่งสำหรับการกำหนดจุดเริ่มต้นและสิ้นสุดการแมปรูปภาพ มีแอตทริบิวต์ Name สำหรับการกำหนดชื่อของการแมป เช่น <Map name=Service1> เป็นการกำหนดให้ Map นี้มีชื่อว่า Service1

2. <Area Shape=รูปทรง Coords=x,y href=เป้าหมาย>

Shape=รูปทรง เป็นการกำหนดรุปทรงของพื้นที่ที่ใช้กำหนดให้เชื่อมโยงข้อมูล มีด้วยกัน 3 รูปทรงคือ Rect, Circle, PolyGon
Coords=x,y เป็นการกำหนดจุดโคออดิเนตสำหรับรูปทรงแต่ละแบบ
Href=เป้าหมาย กำหนดเป้าหมายในการเชื่อมโยงข้อมูล

รุปทรงของจุดโคออดิเนต
Rect รูปทรงสี่หลี่ยม x1, y1, x2, y2

เมื่อ x1, y1 เป็นจุดโคออดิเนตมุมซ้ายบน และ x2, y2 เป็นจุดโคออดิเนตของมุมขวาล่าง
Circle รูปวงกลม x, y, r

เมื่อ x1, y1 เป็นจุดศูนย์กลองของวงกลม และ r เป็นรัศมีของวงกลม
Polygon รูปทรงหลายเหลี่ยม x1, y1 , x2, y2, x3 ,y3.......

เมื่อ x,y เป็นจุดโคออดิเนตของแต่ละจุด

วิธีการเชื่อมโยงข้อมูล
ยังแบ่งออกเป็น 3 วิธีคือ

วิธีการ NCSA : National Center for Supercomputing Applications

rect URL x1, y1, x2, y2

circle URL cx, cy, x1, y1

Poly URL x1, y1, x2, x3, x3

วิธีการ CREN : European Laboratory for Particle Phyics

rect (x1, y1) (x2, y2) URL หรือ rectangle (x1, y1) (x2, y2) URL

Circ (cx, cy) r URL หรือ circle (cy, cy) r URL

Poly (x1, y1) (x2,y2) URL หรือ Polygon (x1, y1) ( x2, x3) .... URL

วิธีการ CSIM : Client Side Image Maps, HTML 3.0

<MAP NAME="refname">
<AREA SHAPE=method COORDS="positiondata" HREF="link" ALT="comment">
...
...
...
</MAP>

วิธีการนี้เป็นวิธีที่ง่ายที่สุด เนื่องจากคำสั่งจะถุกรวมไว้กับเอกสาร HTML ดังนั้น เมื่อต้องการแก้ไข ก็สามารถแก้ไขได้อย่างรวดเร็ว
วิธีการของ CSIM จะเริ่มด้วย เครื่องหมายเปิด < Map และ </Map> และมีการตั้งชื่อ (Name) เพื่อเอาไว้ใช้อ้างอิง กับคำสั่ง<img>

3. <IMG src=รูปภาพ UserMap=#MapName>
เป็นคำสั่งที่ใช้แสดงรูปภาพ และอ้างอิงชื่อที่ใช้ในการแมปภาพ

สำหรับพื้นที่ที่ไม่ได้ถูกเลือกให้ใช้ < Area sharpe=default href=nohref>

NOTE & TIP !!
เราสามารถสร้างแมปไฟล์รวมกับไฟล์ HTML ได้ หรือเขียนแยกออกมาเป็นไฟล์อิสระจาก .HTML ได้ เราควรเปลี่ยนนามสกุลของไฟล์ MAP ให้มีส่วนขยายเป็น .MAP หรืออย่างอื่นๆตามความเหมาะสมก็ได้

ISMAP
ISMAP เป็นแอตทริบิวต์หนึ่งใน Tag <img> ใช้เพื่อระบุให้เวบบราวเซอร์เชื้มโยงรูปภาพที่กำหนดในไฟล์ HTML ติดต่อกับสคริปต์ตามจุดโคอออิเนตที่ผู้ใช้เลือก ใช้สำหรับโปรแกรมเว็บบราวเซอร์ที่ยังไม่สนับสนุนวิธีการแมปภาพแบบ Client Side Image Maps
เมื่อมีการใช้กคำสั่ง ISMAP ให้สังเกตุที่แถบสถานะด้านล่าง (Status Bar) จะเห็นว่าเมื่อมีการเคลื่อนย้าย Mouse ในรูปภาพที่มีการแมป จะมีตัวเลขแสดงตำแหน่งจุดโคออดิเน็ตให้เห็น

Source View

<html>
<head>
<title>Link </title>
</head>
<body>
<a href=indexhtml.htm><img src=picture.jpg border=0 ismap></a>
</body>
</html>

NOTE & TIP !!
การใช้แอตทริบิวต์ ISMAP ทำให้เราสามารถรู้จุดโคออดิเนตในตำแหน่งต่างๆขอูงรูปภาพได้ ทำให้เราสามารถนำข้อมูลนี้ มาใช้กำหนดตำแหน่งในการทำ Image Map ได้

ตัวอย่าง

Source

<Html>
<head>
<title>Web Builder</title>
</head>
<BODY bgcolor="#000000">
<MAP NAME="Service1">

<AREA SHAPE=RECT COORDS="78,0,116,10" HREF="http://www.geocities.com/Baja/7481/frame3.htm"TARGET="frame3" ALT="Home">

<AREA SHAPE=RECT COORDS="135,0,194,10" HREF="http://www.geocities.com/Baja/7481/member.htm"TARGET="frame3" ALT="Register">

<AREA SHAPE=RECT COORDS="212,0,251,10" REF="http://www.geocities.com/Baja/Canyon/1186/indexhtml.htm"TARGET="frame3" ALT="Learning HTML :Road to the @WebMaster">

<AREA SHAPE=RECT COORDS="266,0,298,10" HREF="http://www.geocities.com/Pipeline/4488/indexjava.htm"TARGET="frame3" ALT="Java">

<AREA SHAPE=RECT COORDS="315,0,380,10" HREF="http://www.geocities.com/Pipeline/5773/indexjavascript.htm"TARGET="frame3" ALT="JavaScript">

<AREA SHAPE=RECT COORDS="438,0,467,10" HREF="http://www.geocities.com/Baja/Canyon/2502/mp3.htm"TARGET="frame3" ALT="Free MP3 for you!">

<AREA SHAPE=RECT COORDS="498,0,556,10" HREF="menu2.htm"TARGET="frame4" ALT="More Service Click here !">

<AREA SHAPE=RECT COORDS="392,0,426,10" HREF="http://www.geocities.com/Baja/Canyon/2503/indexcgi.htm"TARGET="frame3">

<AREA SHAPE=default HREF="menu1.htm"> </MAP>

<align=left>
<img src="menuline1.jpg" usemap="#Service1" border=0 ismap>
</BODY>
</html>

View

Source	View
<html> <head> <title>Link </title> </head> <body> <a href=indexhtml.htm><img src=picture.jpg border=0 ismap></a> </body> </html>