HTML Image Maps ยังคงใช้อยู่หรือไม่

113

ผู้คนยังคงใช้แผนที่รูปภาพ HTML แบบเก่าอยู่หรือไม่ คนที่มี:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

หรือมีทางเลือกใหม่ที่ดีกว่านี้หรือไม่?

html imagemap

— ss888
แหล่งที่มา

1

เมื่อคุณถามว่ามีอะไรที่ดีกว่าหรือไม่คุณควรหาวิธีเปรียบเทียบ ดีกว่าในทางใดหรือเพื่อจุดประสงค์ใด? มีเครื่องมือที่ทรงพลังกว่าแผนที่ภาพในการกำจัดของเราซับซ้อนกว่าด้วย ...

— Jeff Parker

2

จุดดี - ฉันไม่ได้ใช้แผนที่รูปภาพมาเป็นเวลานานและคิดว่ามันอาจถูกแทนที่ด้วยวิธีการเข้ารหัสที่ดีขึ้น

— ss888

1

ฟังก์ชันการทำงานตาม Javascript / เลเยอร์และแฟลชได้แทนที่แผนที่รูปภาพในทุกสิ่งที่ฉันเจอ ... ฉันจำครั้งสุดท้ายที่ฉันเห็นหนึ่งในประจำการไม่ได้ หากคุณมีจุดประสงค์เฉพาะในใจคำตอบที่เฉพาะเจาะจงมากขึ้นอาจพร้อมใช้งานมากขึ้น :)

— Jeff Parker

21

ฉันควรหลีกเลี่ยง Flash ในวันนี้และอายุฮ่า ๆ

— ss888

4

หากคุณกำลังมองหาสิ่งที่ต้องทำอย่างรวดเร็ววิ่งเร็วและชั่วร้ายเพียงเล็กน้อยแผนที่ภาพจะทำงานได้ ไม่มีการเปลี่ยนทดแทนที่รองรับอย่างกว้างขวางซึ่งจะทำงานด้วยความเร็วเดียวกันกับที่ฉันคิด ตอนนี้ถ้าคุณมีเวลาสำหรับ SVG, Canvas และไม่คิดที่จะยกเว้น IE จากรายการเบราว์เซอร์ที่คุณรองรับ ...

— Jeff Parker

53

ใช่ผู้คนยังคงใช้แผนที่ภาพ อีกทางเลือกหนึ่งคือการวางตำแหน่งองค์ประกอบโดยใช้การกำหนดตำแหน่งที่แน่นอนและ CSS แต่ก็ไม่จำเป็นต้องดีกว่า นอกจากนี้ยังไม่อนุญาตให้คุณมีรูปร่างเหมือนในแผนที่รูปภาพ

— JohnP
แหล่งที่มา

ตกลงแผนที่ภาพ html ยังดีอยู่ไหม วิธีการเพิ่มเอฟเฟกต์โฮเวอร์ / โรลโอเวอร์

— ss888

ปัญหาหลักของฉันเกี่ยวกับแผนที่รูปภาพคือไม่เหมือนกับรูปภาพที่เชื่อมโยงกับรูปภาพที่ไม่ได้ปรับขนาดเป็นเบราว์เซอร์หรือขนาดหน้าจอ ฉันหวังว่า OP จะค้นคว้ารูปแบบ SVG

— Martin

2

คุณต้องปรับขนาดตามขนาดของภาพ ทำให้ขนาดภาพของคุณสัมพันธ์กับขนาดของหน้าต่าง จากนั้นเปรียบเทียบอัตราส่วนความกว้าง / ความสูงกับอัตราส่วนแผนที่รูปภาพเสมอจากนั้นใช้จาวาสคริปต์เพื่อเขียนทับพิกัด ตัวจัดการเหตุการณ์ขนาดภาพตาม jquery คือ $ (window) .resize (function () {.... yourcode ... });

— skidadon

46

พวกเขาอยู่ในข้อกำหนด HTML5ดังนั้นจึงไม่ถูกเลิกใช้

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

— Kapa
แหล่งที่มา

19

อีกทางเลือกหนึ่งในการใช้ CSS หรือแผนที่รูปภาพคือการใช้กราฟิก SVG ที่ฝังอยู่ในโดเมน HTML

บทช่วยสอนเกี่ยวกับวิธีการใช้เทคนิคนี้ได้รับการอธิบายไว้ในบทช่วยสอนนี้: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Takeaway ที่สำคัญการที่องค์ประกอบ SVG ยังเรียกกิจกรรม Dom แบบดั้งเดิมรวมทั้งonmouseoverและMV โดน

— นอร์แมน H.
แหล่งที่มา

1

+1 SVG เป็นทางเลือกโดยตรงที่ดีที่สุดสำหรับ Imagemaps เนื่องจากการโต้ตอบสามารถเป็นรูปแบบใดก็ได้โดยพลการ บางสิ่งบางอย่างคล้ายกับ imagemaps สามารถสร้างที่เวกเตอร์พิกัดสับขึ้นภาพพิกเซลแรสเตอร์โดยให้องค์ประกอบ SVG กรอกภาพ แต่ถึงอย่างนั้นแผนที่พื้นที่อาจดีกว่าในบางกรณี (ง่ายกว่าและอย่าครอบตัดภาพซึ่งบางครั้งอาจเป็นที่ต้องการ)

— user56reinstatemonica8

18

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

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
แหล่งที่มา

8

+1 - แม้ว่าคุณจะสามารถใช้ CSS และการวางตำแหน่งแบบสัมบูรณ์ได้มากมาย แต่แผนที่รูปภาพยังคงเป็นวิธีเดียวในการตรวจจับการวางเมาส์บนพื้นที่รูปหลายเหลี่ยมที่ไม่ใช่สี่เหลี่ยม

— Blazemonger

10

Image Maps ยังคงอยู่ในข้อกำหนด HTML5 ซึ่งสนับสนุนโดยเบราว์เซอร์ทั้งหมด

สามารถปรับให้เข้ากับการออกแบบที่ตอบสนองได้โดยใช้ jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps

ตรวจจับและปรับขนาดพิกัดแผนที่ภาพโดยอัตโนมัติ

นอกจากนี้ยังมีให้สำหรับนักพัฒนา Wordpress เป็นปลั๊กอิน: http://wordpress.org/plugins/responsive-image-maps/

วิธีแก้ปัญหาที่ง่ายและมีประสิทธิภาพ

— ดานิเอเล่บี
แหล่งที่มา

9

ใช่ฉันยังคงใช้แผนที่ภาพ แต่โครงการล่าสุดของฉันใช้Raphaël มันค่อนข้างง่ายที่จะเริ่มต้นใช้งาน

http://dmitrybaranovskiy.github.io/raphael/

จากเว็บไซต์ของพวกเขา:

Raphaël ['ræfeɪəl] ใช้ SVG W3C Recommendation และ VML เป็นฐานในการสร้างกราฟิก ซึ่งหมายความว่าออบเจ็กต์กราฟิกทุกชิ้นที่คุณสร้างเป็นออบเจ็กต์ DOM ด้วยดังนั้นคุณสามารถแนบตัวจัดการเหตุการณ์ JavaScript หรือแก้ไขได้ในภายหลัง เป้าหมายของRaphaëlคือการจัดหาอะแดปเตอร์ที่จะทำให้การวาดภาพเวกเตอร์ข้ามเบราว์เซอร์ที่เข้ากันได้และง่ายดาย

ตัวอย่างแผนที่ภาพเรียบง่ายที่ดี:

http://dmitrybaranovskiy.github.io/raphael/australia.html

— เดวิดนิวคอมบ์
แหล่งที่มา

2

มันคงไม่ต้องใช้เวลามากสำหรับคุณในการแก้ไขลิงค์ด้วยตัวเองแทนที่จะครางและลงคะแนน :(

— David Newcomb

2

เรียนเดวิดฉันลบการโหวตลงคะแนน คุณต้องการให้ฉันแก้ไขลิงก์ที่เพิ่งเสียได้อย่างไร ฉันจะลบhttp://raphaeljs.com/ตัวอย่าง Github ทั้งหมดและให้เท่านั้น

— orschiro

6

จุดของสแต็กไซต์คือการทำงานร่วมกัน หากคุณเห็นลิงก์เสียให้แก้ไขหากทำได้ อย่าคิดในแง่ของลิงก์ที่ใช้งานไม่ได้เนื่องจากเป็นตัวชี้แหล่งข้อมูลที่ใช้งานไม่ได้ หากทรัพยากรถูกย้ายให้อัปเดตลิงก์เพื่อให้ชี้ไปที่ตำแหน่งใหม่ของทรัพยากรนั่นคือสิ่งสำคัญ Raphaeljs เคยมีไซต์ของตัวเอง แต่เห็นได้ชัดว่าย้ายไปที่ GitHub แล้ว เราส่งผู้คนกลับไปที่ Google เพื่อค้นหาว่าตอนนี้อยู่ที่ไหน? หรือเราช่วยพวกเขาไปจากที่นี่? ตัวอย่างของออสเตรเลียเป็นตัวอย่างเดียวกันกับที่อาศัยอยู่ที่อื่น

— David Newcomb

http://raphaeljs.com/การเชื่อมโยงในที่สุดจะทำลายเมื่อการลงทะเบียนโดเมนหมดอายุ แต่มีใหม่โดยตรงกับมันในขณะนี้เพื่อให้ทุกคน (ในโลก) มีโอกาสที่จะปรับปรุงการเชื่อมโยงของพวกเขา บางที @orschiro คุณสามารถเริ่มต้นด้วยบทความในบทความและเพิ่มความพยายามในการทำงานร่วมกันที่ SO

— David Newcomb

1

เข้าใจแล้วขอบคุณเดวิด! ฉันอัปเดตการตอบกลับและแก้ไขลิงก์แล้ว :-)

— orschiro

4

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

** ฉันรู้ว่าเธรดนี้เก่าแล้วฉันเพิ่งทำการค้นคว้าเพิ่มเติมเกี่ยวกับเรื่องนี้สำหรับปัญหาแคมเปญอีเมลล่าสุดและคิดว่ามันอาจช่วยคนอื่นได้

บุคคลที่สามแก้ไข

คำถามใน litmus.com เกี่ยวกับการสนับสนุนแผนที่ภาพมาจาก 04/2014

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

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

และที่สำคัญที่สุด iOS (iphone / ipad) จะไม่ปรับขนาดพิกัดลิงก์แผนที่รูปภาพเมื่อรูปภาพถูกปรับขนาดซึ่งทำให้ลิงก์แตก เนื่องจาก iOS เป็นตัวแทนของอีเมลส่วนใหญ่ที่เปิดขึ้น (iPhone + iPad = 38% ผ่านhttp://emailclientmarketshare.com/ ) สิ่งนี้สำคัญ

— spindle79
แหล่งที่มา

0

ใช่มันยังคงใช้อยู่

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

มากกว่า

— Srikrushna
แหล่งที่มา

-2

แผนที่รูปภาพเป็นตัวเลือกที่น่าสนใจทีเดียวใน html และ html5 ที่พวกเขายังคงใช้งานอยู่และฉันชอบมันเป็นการส่วนตัวฉันจึงพบว่ามีการใช้งานในอุปกรณ์มือถือปัญหาของฉันเกี่ยวข้องกับการปรับขนาด

ใช่ฉันมีประสบการณ์ด้วยตัวเอง แต่ฉันเป็นนักเรียนที่ลงทะเบียนใน html html5 และสำหรับผู้เริ่มต้นฉันต้องการไปที่ลิงค์ w3chools

http://www.w3schools.com/html/html_images.asp

คุณจะได้รับประโยชน์มากมายจาก [หน้านี้

— Shoua Iqbal
แหล่งที่มา