Skip to main content

ฉันจะสร้างแผนที่รูปภาพ HTML ได้อย่างไร

เมื่อมีการเพิ่มลิงก์ลงในรูปภาพใน Hypertext Markup Language (HTML) ลิงก์นั้นจะถูกเพิ่มเข้าไปในภาพทั้งหมดนี่อาจเป็นปัญหาได้หากโปรแกรมเมอร์ต้องการสร้างภาพเดียวที่มีหลายพื้นที่หรือปุ่มและแต่ละพื้นที่จะใช้สำหรับลิงค์อื่นแผนที่รูปภาพ HTML ช่วยให้โปรแกรมเมอร์ระบุบางพื้นที่ที่ลิงค์จะไปทำให้เขาหรือเธอฝังลิงก์หลายรายการลงในภาพเดียวสิ่งนี้ทำได้โดยการระบุรูปร่างสำหรับลิงก์และบอก HTML ว่าจะใช้พิกัดอะไรสำหรับลิงก์

รูปภาพที่ใช้สำหรับอินเทอร์เน็ตถูกวัดเป็นพิกเซลการรู้ว่ามีพิกเซลกี่ตัวในภาพเป็นขั้นตอนแรกที่สำคัญในการสร้างแผนที่ภาพตัวอย่างเช่นมีการใช้ภาพสี่เหลี่ยมที่มีความสูง 400 พิกเซลและความกว้าง 250 พิกเซลถัดไปโปรแกรมเมอร์จะต้องรู้วิธีการวัดรูปร่างในพิกัดอย่างแม่นยำสำหรับแผนที่ภาพ HTML เพื่อทำงานอย่างถูกต้อง

มุมซ้ายบนเรียกว่า 0,0 เมื่อใช้แผนที่ภาพ HTMLมุมล่างขวาในกรณีนี้จะเป็น 250,400การวัดจะทำด้วยความกว้างก่อนจากนั้นความสูงวิธีที่ง่ายในการคิดคือการวัดครั้งแรกคือการบอก HTML ว่าไปทางขวาไปทางขวาจากขอบซ้ายและที่สองคือวิธีที่บอกว่ามีพิกเซลไปกี่พิกเซลหากโปรแกรมเมอร์ต้องการจุดบนแผนที่เป็น 10 พิกเซลจากขอบซ้ายและ 50 พิกเซลลงพิกัดจะเป็น 10,50

มีสามรูปร่างที่แตกต่างกันและรูปหลายเหลี่ยมrect ย่อมาจากสี่เหลี่ยมผืนผ้าและโปรแกรมเมอร์ต้องพิมพ์พิกัดก่อนสำหรับมุมซ้ายบนจากนั้นด้านล่างขวาวงกลมถูกระบุโดยการพิมพ์พิกัดที่วงกลมเริ่มต้นแล้วรัศมีของวงกลมรูปหลายเหลี่ยมถูกสร้างขึ้นโดยการพิมพ์ในทั้งห้าพิกัดจากด้านบนไปทางขวา

html ภาพแผนที่การเข้ารหัสเป็นเช่นนี้:

lt; แผนที่ชื่อ ' test gt;
lt; พื้นที่ href ' url.html รูปร่าง ' rect coords ' rect coords '10,50,20,60 gt;
lt; พื้นที่ href ' url.html รูปร่าง ' วงกลม coords ' 10,50,4 gt;
lt; พื้นที่ href ' url.html รูปร่าง ' รูปหลายเหลี่ยม ' 10,50,12,55,15,60,13,65,8,55 gt;

แผนที่รูปภาพ HTML แต่ละตัวจะต้องมีชื่อและส่วน url.html เป็นลิงค์ที่ส่วนของแผนที่ภาพนั้นจะนำไปสู่ผู้ใช้เมื่อเขาหรือเธอคลิกมัน.เมื่อภาพถูกวางไว้บนเว็บไซต์ด้วย HTML โปรแกรมเมอร์จะต้องเขียน: usemap ' ทดสอบสิ่งนี้จะบอกภาพว่าแผนที่ภาพ HTML ใช้อะไร