องค์ประกอบ IMG ช่วยให้เราสามารถฝังภาพในเอกสาร HTML
ในการฝังอิมเมจคุณต้องใช้แอตทริบิวต์ SRC และ ALT, รหัสมีดังนี้:
<img src = "../ img/example/img-map.jpg"/> >>
ผลการแสดงผล:
1 ฝังภาพในไฮเปอร์ลิงก์
การใช้งานทั่วไปขององค์ประกอบ IMG คือการสร้างไฮเปอร์ลิงก์ที่ใช้รูปภาพร่วมกับองค์ประกอบ A รหัสดังต่อไปนี้:
<a href = "otherpage.html"> <img src = "../ img/example/img-map.jpg" ismap/> </a>
วิธีที่เบราว์เซอร์แสดงภาพนี้ไม่แตกต่างกัน ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องให้ผู้ใช้ด้วยตัวชี้นำภาพที่ภาพเฉพาะแสดงถึงการเชื่อมโยงหลายมิติ วิธีการเฉพาะสามารถใช้ CSS ซึ่งดีกว่าที่จะแสดงในเนื้อหาภาพ
หากคุณคลิกที่ภาพนี้เบราว์เซอร์จะนำทางไปยัง URL ที่ระบุโดยแอตทริบิวต์ HREF ขององค์ประกอบหลัก การใช้แอตทริบิวต์ ISMAP กับองค์ประกอบ IMG สร้างแผนที่การตอบสนองสาขาฝั่งเซิร์ฟเวอร์ซึ่งหมายความว่าตำแหน่งที่คลิกบนภาพจะถูกแนบกับ URL ตัวอย่างเช่นหากตำแหน่งคลิกคือ 8 พิกเซลจากด้านบนของภาพและ 10 พิกเซลที่ขอบซ้ายเบราว์เซอร์จะนำทางไปยังที่อยู่ต่อไปนี้:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
รหัสต่อไปนี้แสดงเนื้อหาใน otherpage.html ซึ่งมีสคริปต์ง่าย ๆ เพื่อแสดงพิกัดของตำแหน่งคลิก:
<body> <p> พิกัด x คือ <b> <span id = "xco"> ?? </span> </b> </p> <p> พิกัด y คือ <b> <span id = "yco"> ?? </span> </b> </p> window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerhtml = พิกัด [0]; document.getElementById ("yco"). innerhtml = พิกัด [1]; </script> </body>วิธีที่เบราว์เซอร์แสดงภาพนี้ไม่แตกต่างกัน ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องให้ผู้ใช้ด้วยตัวชี้นำภาพที่ภาพเฉพาะแสดงถึงการเชื่อมโยงหลายมิติ วิธีการเฉพาะสามารถใช้ CSS ซึ่งดีกว่าที่จะแสดงในเนื้อหาภาพ
หากคุณคลิกที่ภาพนี้เบราว์เซอร์จะนำทางไปยัง URL ที่ระบุโดยแอตทริบิวต์ HREF ขององค์ประกอบหลัก การใช้แอตทริบิวต์ ISMAP กับองค์ประกอบ IMG สร้างแผนที่การตอบสนองสาขาฝั่งเซิร์ฟเวอร์ซึ่งหมายความว่าตำแหน่งที่คลิกบนภาพจะถูกแนบกับ URL ตัวอย่างเช่นหากตำแหน่งคลิกคือ 8 พิกเซลจากด้านบนของภาพและ 10 พิกเซลที่ขอบซ้ายเบราว์เซอร์จะนำทางไปยังที่อยู่ต่อไปนี้:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
รหัสต่อไปนี้แสดงเนื้อหาใน otherpage.html ซึ่งมีสคริปต์ง่าย ๆ เพื่อแสดงพิกัดของตำแหน่งคลิก:
<body> <p> พิกัด x คือ <b> <span id = "xco"> ?? </span> </b> </p> <p> พิกัด y คือ <b> <span id = "yco"> ?? </span> </b> </p> window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerhtml = พิกัด [0]; document.getElementById ("yco"). innerhtml = พิกัด [1]; </script> </body>คุณสามารถดูเอฟเฟกต์ของการคลิกเมาส์:
กราฟการตอบสนองพาร์ติชันฝั่งเซิร์ฟเวอร์มักจะหมายความว่าเซิร์ฟเวอร์จะตอบสนองแตกต่างกันไปตามพื้นที่คลิกของผู้ใช้บนรูปภาพเช่นการส่งคืนข้อมูลการตอบกลับที่แตกต่างกัน หากแอตทริบิวต์ ISMAP ในองค์ประกอบ IMG ถูกละเว้นพิกัดของการคลิกเมาส์จะไม่รวมอยู่ใน URL คำขอ
2 สร้างไดอะแกรมการตอบสนองพาร์ติชันไคลเอนต์
เราสามารถสร้างแผนที่ตอบสนองพาร์ติชันไคลเอนต์และให้เบราว์เซอร์นำทางไปยัง URL ที่แตกต่างกันโดยคลิกที่พื้นที่ต่าง ๆ บนภาพ กระบวนการนี้ไม่จำเป็นต้องมีการบูตผ่านเซิร์ฟเวอร์ดังนั้นองค์ประกอบจึงใช้เพื่อกำหนดพื้นที่แต่ละส่วนในภาพและพฤติกรรมที่เป็นตัวแทน องค์ประกอบสำคัญของกราฟการตอบสนองพาร์ติชันไคลเอนต์คือแผนที่ซึ่งมีองค์ประกอบพื้นที่หนึ่งหรือมากกว่านั้นแต่ละองค์ประกอบแสดงถึงพื้นที่บนภาพที่สามารถคลิกได้
คุณสมบัติขององค์ประกอบพื้นที่สามารถแบ่งออกเป็นสองประเภท หมวดหมู่แรกเกี่ยวข้องกับ URL ที่เบราว์เซอร์จะนำทางไปหลังจากพื้นที่ภาพที่แสดงโดยพื้นที่จะถูกคลิกโดยผู้ใช้ รูปต่อไปนี้แนะนำแอตทริบิวต์ประเภทนี้ซึ่งคล้ายกับแอตทริบิวต์ที่สอดคล้องกันที่เห็นในองค์ประกอบอื่น ๆ
หมวดหมู่ที่สองมีคุณลักษณะที่น่าสนใจมากขึ้น: คุณลักษณะรูปร่างและ coords คุณสมบัติเหล่านี้สามารถใช้เพื่อระบุแต่ละพื้นที่ภาพที่ผู้ใช้สามารถคลิกได้ คุณสมบัติรูปร่างและ Coords ทำงานร่วมกัน ความหมายของแอตทริบิวต์ Coords ขึ้นอยู่กับค่าของแอตทริบิวต์รูปร่างดังแสดงในรูปด้านล่าง:
หลังจากแนะนำองค์ประกอบเหล่านี้ให้ตัวอย่างรหัสมีดังนี้:
<body> <img src = "../ img/example/img-map.jpg" ismap usemap = "#mymap"/> <map name = "mymap"> <area href = "javascript: show_page (1)" shape = "rect" href = "JavaScript: show_page (2)" shape = "rect" coords = "'210,60,370,230" /> <area href = "javascript: show_page (3)" shape = "rect" coords = "383,60,545,230" /> show_page (num) {// แสดงผลิตภัณฑ์ผ่านกล่องโต้ตอบเพื่อระบุการแจ้งเตือนการกระโดดหน้าข้ามที่สอดคล้องกัน ("นี่คือผลิตภัณฑ์"+num); } </script> </body>เอฟเฟกต์การแสดงผลจะเหมือนกันยกเว้นว่าเมื่อคุณคลิกที่รูปภาพผลิตภัณฑ์ที่เกี่ยวข้องชื่อผลิตภัณฑ์ที่เกี่ยวข้องจะปรากฏขึ้นเพื่อระบุหน้าผลิตภัณฑ์ที่เพิ่มขึ้น
บทความข้างต้น JavaScript Basics_Simple การใช้งานภาพฝังอยู่เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น