WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— Add-on เพื่อ WorldWideScripts.net

สมัครสมาชิกฟีด ของเรา จะอยู่ถึง วันที่ !

ใหม่! ติดตามเรา ตามที่คุณต้องการ!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

นี่คือการทำแผนที่ภาพ html ที่ออกแบบมาสำหรับนักพัฒนาเว็บ

เครื่องมือที่ได้รับการพัฒนาโดยใช้ผ้าใบ HTML5 เพื่อให้การใช้งานจะถูก จำกัด ให้เบราว์เซอร์ที่สนับสนุนผ้าใบ แต่ยัง API ของไฟล์:

IE10 + FF3.6 + FF14-, FF18 + (FF15 มีปัญหากับบางฟังก์ชันผ้าใบ Bug 787,623 ที่จะได้รับการแก้ไขใน FF18) Chrome6 + Safari6 + + Opera11.1

ตั้งแต่นี้เป็นเครื่องมือสำหรับนักพัฒนาที่ผมคิดว่านี้ไม่ได้เป็นข้อ จำกัด ใหญ่เพราะผมคิดว่านักพัฒนาเว็บมีปัญหาในการเลือกเบราว์เซอร์ที่เหมาะสมไม่มี

ฉันได้ใช้ FF14 การพัฒนาเครื่องมือเพื่อให้เป็น choise ที่ดีที่สุด แต่เครื่องมือที่ได้รับการทดสอบใน Chrome22 และ Opera12


หมายเหตุ: รุ่นของเครื่องมือที่คุณสามารถเห็นในตัวอย่างแบบสดเชื่อมโยงเป็นรุ่นที่ จำกัด ของเครื่องมือ กับรุ่นนี้คุณสามารถโหลดเฉพาะชุดของภาพที่ระบุไว้ในหน้าแรก หลังจากโหลดภาพที่คุณสามารถวาดรูปทรงทั้งหมด แต่เพียงครั้งแรก 6 รูปทรงจะถูกสร้างขึ้นในรหัส HTML ข้อ จำกัด นี้ไม่ได้ป้องกันไม่ให้คุณสามารถทดสอบฟังก์ชันทั้งหมดของเครื่องมือ


คือแผนที่ภาพอะไร?

เป็นแผนที่ภาพเป็นโค้ด HTML ที่ทำให้พื้นที่ต่างๆที่ผู้ใช้คลิกของภาพ ใช้ HTML ประกอบด้วยแท็กแผนที่ร่วมกับแท็กพื้นที่ที่ช่วยให้คุณสามารถกำหนดพื้นที่ที่มีรูปสี่เหลี่ยมรูปทรงเหลี่ยมและกลม
ตัวอย่างเช่นถ้าคุณมีภาพ image1.png ในเพจ HTML ของคุณคุณสามารถเขียนโค้ดต่อไปนี้:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

ในขณะที่คุณสามารถดูคุณต้องตั้งค่าแอตทริบิวต์ usemap ในแท็ก img ที่จะมีค่าเดียวกันของแอตทริบิวต์ชื่อในแท็กแผนที่ ระหว่าง <แผนที่> และ </ แผนที่> คุณสามารถกำหนดเป็นจำนวนมาก <พื้นที่> แท็กที่คุณต้องการแต่ละคนเป็นตัวแทนของพื้นที่ที่ผู้ใช้คลิกที่ภาพที่เกี่ยวข้อง แต่ละพื้นที่ต้องมีแอตทริบิวต์รูปร่างที่สามารถมีหนึ่งในค่า 3: ดูแลรักษาโพลีและวงกลม ดูแลรักษารูปร่างที่กำหนดไว้อย่างสมบูรณ์โดย 2 จุด, รูปร่างโพลีถูกกำหนดโดยลำดับของจุดและรูปร่างเป็นวงกลมจะถูกกำหนดโดยจุดที่แสดงถึงศูนย์และรัศมี ทุกจุดจะถูกกำหนดโดยคู่ของพิกัดแสดงพิกเซลญาติไปที่มุมบนซ้ายของภาพ แอตทริบิวต์รูปร่างยังสามารถมี "เริ่มต้น" มูลค่าที่อ้างถึงชิ้นส่วนของภาพที่ไม่ได้แมปกับใด ๆ ของรูปทรงที่ก่อนหน้านี้ คำนึงแทนว่าคำสั่งที่ในรูปทรงที่มีการกำหนดไว้ในแผนที่ที่มีความสำคัญมาก: ถ้าคุณกำหนด "เริ่มต้น" รูปร่างเป็นรูปแรกในแผนที่ก็จะแทนที่ทุกรูปทรงที่ตามมาเพราะ "เริ่มต้น" รูปร่างหมายถึงภาพทั้งหมด นี่คือความจริงยังมีรูปร่างที่ทับซ้อนกัน: คุณสามารถกำหนดรูปร่างเล็ก ๆ น้อย ๆ เป็นรูปร่างที่ใหญ่กว่า แต่คุณต้องกำหนดครั้งแรกรูปร่างเล็ก ๆ น้อย ๆ แล้วหนึ่งที่ใหญ่กว่า ถ้า 2 รูปทรงร่วมเป็นส่วนหนึ่งของภาพรูปร่างที่กำหนดไว้ครั้งแรกชนะ

หากคุณต้องการที่จะตั้งค่าด้วยตนเองแผนที่ภาพคุณต้องรู้พิกัดของจุดทั้งหมดที่จำเป็นในการกำหนดรูปทรงที่แตกต่างกัน อาจนี้ไม่ได้เป็นปัญหาใหญ่ถ้าคุณมีพื้นที่ไม่กี่แมปโดยเฉพาะอย่างยิ่งถ้าคุณมีพื้นที่กลมหรือรูปสี่เหลี่ยม แต่ถ้าคุณมีหลายพื้นที่ที่มีรูปร่างเหลี่ยมตั้งด้วยตนเองไม่ได้เป็นงานที่ง่าย

ภาพ mapper เครื่องมือช่วยให้คุณสามารถวาดรูปทรงสี่เหลี่ยมมุมฉากเช่นโพลีและวงกลมบนภาพที่เลือกที่จะได้รับการแปลโดยอัตโนมัติในโค้ด HTML ที่สอดคล้องกันที่ทำให้พื้นที่ของภาพที่ใช้สามารถคลิกได้

หลังจากวาดรูปทรงที่ภาพได้รับคุณสามารถสร้างรหัส HTML เพียงคลิกที่ปุ่มและรหัสจะ displayied ใน textarea คุณสามารถคัดลอกรหัส HTML และใช้ในหน้า HTML ของคุณ (s) คุณยังสามารถทำกระบวนการย้อนกลับ: วางโค้ด HTML ใน textarea ที่คุณสามารถโหลดรหัสนี้เพียงแค่คลิกปุ่ม; นี้จะถูกแปลในรูปทรงที่ภาพและคุณสามารถปรับเปลี่ยนได้เพิ่มรูปทรงใหม่และกลับมาสร้างรหัส HTML กลไกนี้กลับเป็นประโยชน์ที่จะช่วยให้คุณประหยัดกระบวนการทำแผนที่บางส่วนและจะยังคงแผนที่ภาพในภายหลัง นอกจากนี้ยังเป็นประโยชน์ในการปรับแต่ง "ด้วยตนเอง" รูปทรงการออกแบบ / ตำแหน่ง: หลังจากสร้างรหัสใน textarea ที่คุณสามารถปรับเปลี่ยนพิกัดใน textarea ในการบินและอีกครั้งโหลด

คุณสมบัติหลัก:

  • คุณสามารถเลือกภาพท้องถิ่นหรือระยะไกล
  • คุณสามารถตั้งค่าขนาดภาพเป้าหมายเหล่านี้เป็นขนาดที่ภาพจะมีในหน้า HTML ของคุณ
  • คุณสามารถซูมเข้าและออกภาพในช่วงเวลาใด ๆ และจะไม่ยุ่งเกี่ยวกับพิกัดจริงที่จะถูกสร้างขึ้นที่ขึ้นอยู่กับขนาดของเป้าหมายของภาพ ซูมคุณสมบัติเป็นประโยชน์เท่านั้นที่จะช่วยให้คุณวาดรูปทรง
  • คุณสามารถตั้งค่าพารามิเตอร์ต่างๆสำหรับแต่ละรูปร่างเช่น "href" คุณลักษณะที่ "alt" คุณลักษณะที่ "id" และ "ระดับ" คุณลักษณะและในที่สุด "เป้าหมาย" แอตทริบิวต์ การตั้งค่าพารามิเตอร์ที่คุณต้องเลือกรูปร่าง: เพื่อเลือกรูปที่คุณต้องเลือกลูกศรบนซ้ายในแถบเครื่องมือแล้วคลิกที่รูปทรง
  • คุณสามารถตั้งค่าพารามิเตอร์บางอย่างสำหรับแผนที่: แผนที่ "ชื่อ" สมาชิกเริ่มต้นและเป้าหมาย
  • คุณสามารถวาดรูปทรงเลือกรูปจากแถบเครื่องมือที่
  • การวาดรูปหลังจากเลือกจากแถบเครื่องมือให้คุณสามารถคลิกเมาส์บนภาพที่คุณต้องการเริ่มต้นรูปร่าง
  • ถ้ารูปร่างเป็นวงกลมจุด firts เป็นศูนย์: เลื่อนเมาส์ (คลิกหรือปล่อยตัว) คุณจะเห็นวงกลมที่เป็นไปตามเคอร์เซอร์ คลิกเมาส์อีกครั้งจะหยุดการวาดวงกลม
  • ถ้าเป็นรูปทรงสี่เหลี่ยมมุมฉาก จุดแรกเป็นหนึ่งในมุม เลื่อนเมาส์ (คลิกหรือปล่อยออกมา) จะวาดดูแลรักษา คลิกเมาส์อีกครั้งจะหยุดการวาดภาพ
  • ถ้ารูปร่างเป็นโพลีกระบวนการที่แตกต่างกันเล็ก ๆ น้อย ๆ : คลิกของแต่ละเมาส์จะตั้งจุด; จุดปัจจุบันมีการเชื่อมต่อเสมอกับหนึ่งภาคเรียนทำให้โพลีมักจะมีรูปร่างปิด; ที่จะหยุดการวาดโพลี (เพื่อกำหนดจุดสุดท้าย) คุณต้องดับเบิลคลิกเมาส์
  • สำหรับรูปร่างทั้งหมดที่คุณสามารถหยุดที่จะวาดพวกเขาคลิกที่ปุ่ม "หยุด" (ลูกศรบนซ้ายในแถบเครื่องมือ)
  • คุณสามารถดูเมาส์พิกัดเมื่อคุณย้ายไปที่ภาพ
  • คุณสามารถใช้เส้นขอบสีเทาประรอบภาพเพื่อกำหนดพิกัดขอบของภาพเพื่อให้คุณสามารถใช้ชายแดนในขณะที่มันเป็นส่วนหนึ่งของภาพ: เพื่อให้คุณสามารถคลิกที่ชายแดนระหว่างการวาดภาพรูปร่าง jus เป็นมัน เป็นส่วนหนึ่งของภาพ ตัวอย่างเช่นถ้าคุณคลิกที่มุมบนซ้ายของเส้นขอบที่คุณจะกำหนดจุดที่ (0, 0) พิกัด หากคุณคลิกชายแดนซ้ายในจุดใด ๆ คุณจะกำหนดจุดที่ (0, y) พิกัด ฯลฯ
  • คุณสามารถเลือกรูปวาดแล้วและแก้ไข / ปรับขนาด / ลบออก จะลบออกไปคุณจะต้องใช้ "ยาง" ในแถบเครื่องมือที่จะปรากฏเป็นดินสอหันมาเพียงเลือกรูปร่าง
  • คุณสามารถเลือกสีของเส้นของรูปทรงที่มาจากชุด 5 สี (นี้ไม่ได้เป็นเครื่องมือการออกแบบเพื่อให้ฉันได้ จำกัด จำนวนของสีและคุณไม่สามารถเลือกสีที่แตกต่างกันสำหรับแต่ละรูปร่าง)
  • คุณสามารถคลิกที่ "แผนที่" ปุ่มที่สามารถมองเห็นเฉพาะเมื่อคุณเลือก "หยุด" ปุ่มบนแถบเครื่องมือและรูปร่างไม่ได้เลือก: ถ้าคุณมีรูปทรงบางวาดบนภาพที่คุณจะเห็นรหัส HTML ใน textarea ที่ ถ้าคุณยังไม่ได้วาดรูปคุณจะเห็นหนึ่ง textarea ว่างเปล่า แต่คุณสามารถที่ผ่านมาในบางโค้ด HTML และโหลด
  • คลิกที่ปุ่ม "โหลด" (ที่คุณสามารถเห็นเฉพาะหลังจากคลิกที่ปุ่ม "แผนที่") ปัจจุบันโค้ด HTML ใน textarea จะได้รับการแปลในรูปทรงที่ภาพ

คุณสามารถปรึกษาคู่มือที่สมบูรณ์ของเครื่องมือที่ลิงค์ต่อไปนี้: คู่มือการใช้งานออนไลน์

หากคุณมีคำถามใด ๆ เพียงแค่แสดงความคิดเห็นหรือวางฉันอีเมล!


ดาวน์โหลด
ส่วนประกอบอื่น ๆ ในประเภทนี้ส่วนประกอบทั้งหมดของ ผู้เขียนคนนี้
ความเห็นคำถามที่พบบ่อย และคำตอบ

คุณสมบัติ

ที่สร้าง:
10 ตุลาคม 12

การปรับปรุงครั้งล่าสุด:
N / A

ความละเอียดสูง:
ไม่มี

เบราว์เซอร์ที่เข้ากันได้:
Firefox, Opera, Chrome

รวมไฟล์:
JS JavaScript, HTML, CSS

ซอฟแวร์เวอร์ชั่น:
HTML5

คำหลัก

อีคอมเมิร์ซ, อีคอมเมิร์ซ, ทุกรายการ, แอพพลิเค, พื้นที่, ผ้าใบ, วงกลม, ประสานงาน, html5, ภาพ, แผนที่, mapper, โรงเรียนสารพัดช่าง, ดูแลรักษา, รูปร่าง, เป้าหมาย, เครื่องมือ, ซูม