ประเภทของ image maps มีสองชนิด ดือ, server-side และ client-side.

Server-side image maps คือที่ที่ HTML ของคุณเรียก map file ภายใน directory ของคุณใน server แล้วเรียก mapping program บน server ที่รู้วิธี แบ่งรูปภาพออกเป็นส่วนๆภายในรูปเดียวกันที่ค้นพบใน map file. 

Client-side image maps จะรวดเร็วกว่ามากเพราะว่าทุกสิ่งที่จำเป็นได้ถูกฝังลงใน html ของคุณแล้ว. คุณจึงไม่จำเป็นต้องติดต่อ server. แต่มีเพียงขัอเสียเดียวเท่านั้นที่, คือมีเพียง Netscape 2.0+ และ Internet Explorer 3.0 หรีอ version ที่ใหม่กว่าขึ้นมาเท่านั้นที่สามารถอ่าน client-side image maps ได้.

วิธีทำ image map, คุณต้องสร้างรูปที่คุณต้องการใช้ขึ้นมา. เสร็จแล้วคุณจำเป็นจะต้องมี program ที่สามารถแบ่งภาพของคุณออกเป็นส่วนๆได้แล้วสามารถที่จะ save ภาพแบ่งส่วนเหล่านั้นลงบน map file ได้. ซึ่งมีอยู่หลาย program, ผู้เขียนใช้ Map This, แต่คุณสามารถใช้ programs อะไรก็ได้สร้าง map file. อย่างเช่น Web Image, Map Edit, Image Ready, or MapMaker.

เมื่อคุณมี programs ที่สามารถสร้าง image map แล้ว. ทำการ save file. ตอนนี้คุณต้องตัดสินใจว่าต้องการทำ server-side หรือว่า client-side image map. ถ้าคุณต้องการความเร็ว speed, เลือก client-side. แต่ถ้าคุณต้องการทุกคนบน web สามารถใช้ image map ของคุณได้, เลือก server-side.

วิธีทำ server-side image map บน homepage:

1. Check กับ ISP ของคุณเพื่อขอ path ของ image map program.
2. เขียน path ลงบน html ของคุณ, ตั้งชื่อ map file ตามที่คุณชอบ.
3. Upload .map file ของคุณไปยัง server.
4. ทดลอง test image map ของคุณ เพื่อให้แน่ใจว่าทุกอย่าวทำงานถูกต้อง.

วิธีทำ client-side image map บน homepage:

1. เปิด .map file ที่คุณสร้างไว้ขึ้นมา.
2. Highlight แล้ว copy tag ลงใน html ของคุณ.
3. แล้วทำการแกัไข edit เล็กน้อย  แล้วจะได้คล้าย tag ข้างล่าง:

   <MAP NAME="CLIENTS">
   <AREA SHAPE="RECT" HREF="http://www.andyart.com/" COORDS="0,0,111,90">
   <AREA SHAPE="RECT" HREF="mystuff.html" COORDS="149,277,300,422">
   </MAP>
   
   <IMG border=0 SRC="images/clients.gif" USEMAP="#CLIENTS">
   
   ส่วนสีเขียวคือตัวอักษรที่คุณพิมพ์ลงไป. ส่วนสีขาวคือส่วนข้อมูลของคุณ.

4. ทดสอบ image map บน hard drive ของคุณ, และเมื่อแน่ใจว่ามันทำงาน, upload มันไปยัง server.

Note: เมื่อคุณสร้าง client-side image map, ควรจะมี links ของคุณใน text form บางแห่งบน page เพื่อว่าบางคนใช้ AOL จากตัวอย่างยังคงสามารถอ่าน links ของคุณได้.

April 20, 2000 last update!