Image map

Dreamwerver

image map เป็นการสร้างจุด (hot spot) บนรูปภาพ และให้จุดเหล่านั้นเป็นลิงค์ โดยเราจะสร้างกี่จุดในรูปก็ได้ ตัวอย่างการใช้งาน เช่น รูปการตูนที่มีหลายตัวละครในภาพเดียว เราจะทำ hot spot ให้กับรูปตัวละครแต่ละตัวแล้วให้ลิงค์ไปยังรายละเอียดของตัวละครนั้น

สร้าง Image Map

    การสร้าง image map ด้วย dreamweaver โดยจะมีเครื่องมือที่เตรียมไว้ให้สำหรับทำ Hot spot อยู่แล้ว ดังขั้นตอนด้านล่าง

    1.ใส่รูปของเราในเว็บเพจ

    2.เลือกรูปที่ต้องการทำ Image map จากนั้นไปที่ Property inspector จะเป็นดังรูปด้านล่าง



    3.คลิกเครื่องมือในการสร้าง Hot spot จะมีหน้าต่างขึ้นมาบอกว่าให้เราใส่ Alt text ให้เรา คลิก ok นำไปวาดที่รูปที่เราต้องการได้ทันที ดังรูปด้านบนใช้ Hot spot แบบวงกลม วาดบนหน้าของโดเรมอน

    4.เมื่อวาด hot spot เสร็จแล้ว Property inspector จะเปลี่ยนไปดังรูปด้านล่าง



การเขียน Alt text ให้กับ image map นั้นเป็นเรื่องจำเป็นเพราะผู้ชมจะทราบได้ว่าตรงนี้เป็น Hot spot สามารถลิงค์ไปได้ และรู้ข้อมูลคร่าวๆว่า Hot spot นี้จะลิงค์ไปที่ใด ดังตัวอย่างจะเขียน Alt text ว่า ข้อมูลของโดเรมอน

    5.เครื่องมือที่ใช้สร้าง hot spot มี 3 แบบคือ

        1.แบบสีเหลี่ยมใช้สร้างรูปสี่เหลี่ยม วิธีใช้คือให้คลิกที่รูปค้างไว้แล้วลากให้เป็นขนาดที่ต้องการ เราสามารถใช้ pointer แก้ไขขนาดของ hot spot ได้โดยคลิกที่มุมของ Hot spot ทีวาดไว้

        2.แบบวงกลมใช้สร้างรูปวงกลม วิธีใช้คือให้คลิกที่รูปค้างไว้แล้วลากให้เป็นขนาดที่ต้องการ เราสามารถใช้ pointer แก้ไขขนาดของ hot spot ได้โดยคลิกที่จุด 4 จุดรอบ Hot spot ที่สร้างไว้

        3.แบบโพลีกอน ใช้สร้าง Hot spot แบบไม่มีรูปทรงแน่นอน วิธีใช้ให้เราคลิกไปตามจุดของรูปที่เราต้องการ การแก้ไขตำแหน่งของจุดก็ให้ใช้ pointer คลิกจุดที่ต้องการแก้ไข

6.เราสามารถสร้าง Hot spot กี่อันในรูปก็ได้โดยทำตามขั้นตอน 3 - 4

7.เราสามารถกลับมาแก้ไข Hot spot กี่ครั้งก็ได้โดยการ คลิกที่ pointer จากนั้นคลิกที่ hot spot ที่ต้องการแก้ไข