يسمح لنا عنصر IMG بتضمين الصور في مستندات HTML.
لتضمين صورة ، تحتاج إلى استخدام سمات SRC و ALT ، الرمز هو كما يلي:
<img src = "../ img/example/img-map.jpg"/>
تأثير العرض:
1 تضمين الصورة في الارتباط التشعبي
يتمثل أحد الاستخدامات الشائعة لعنصر IMG في إنشاء ارتباط تشعبي قائم على الصورة مع العنصر A ، والرمز هو كما يلي:
<a href = "otherspage.html"> <img src = "../ img/example/img-map.jpg" isMap/> </a>
الطريقة التي يعرض بها المتصفح هذه الصورة لا تختلف. لذلك ، من المهم تزويد المستخدمين بإشارات مرئية أن صورة معينة تمثل ارتباطًا تشعبيًا. يمكن أن يكون النهج المحدد هو استخدام CSS ، وهو أمر أفضل للتعبير عنه في محتوى الصورة.
إذا قمت بالنقر فوق هذه الصورة ، فسوف ينتقل المستعرض إلى عنوان URL المحدد بواسطة سمة HREF للعنصر الأصل A. ينشئ تطبيق سمة 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-coordinate هو <b> <span id = "yco" window.location.href.split ('؟') [1] .Split ('،') ؛ document.getElementById ("xco"). innerhtml = الإحداثيات [0] ؛ document.getElementById ("YCO"). innerhtml = الإحداثيات [1] ؛ </script> </body>الطريقة التي يعرض بها المتصفح هذه الصورة لا تختلف. لذلك ، من المهم تزويد المستخدمين بإشارات مرئية أن صورة معينة تمثل ارتباطًا تشعبيًا. يمكن أن يكون النهج المحدد هو استخدام CSS ، وهو أمر أفضل للتعبير عنه في محتوى الصورة.
إذا قمت بالنقر فوق هذه الصورة ، فسوف ينتقل المستعرض إلى عنوان URL المحدد بواسطة سمة HREF للعنصر الأصل A. ينشئ تطبيق سمة 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-coordinate هو <b> <span id = "yco" window.location.href.split ('؟') [1] .Split ('،') ؛ document.getElementById ("xco"). innerhtml = الإحداثيات [0] ؛ document.getElementById ("YCO"). innerhtml = الإحداثيات [1] ؛ </script> </body>يمكنك رؤية تأثير النقر فوق الماوس:
يعني الرسم البياني للاستجابة من جانب الخادم عادةً أن الخادم سيستجيب بشكل مختلف وفقًا لمنطقة النقر للمستخدم على الصورة ، مثل إرجاع معلومات الاستجابة المختلفة. إذا تم حذف سمة ISMAP على عنصر IMG ، فلن يتم تضمين إحداثيات النقر على الماوس في عنوان URL للطلب.
2 إنشاء مخطط استجابة قسم العميل
يمكننا إنشاء خريطة استجابة قسم العميل ، والسماح للمتصفح بالانتقال إلى عناوين URL مختلفة من خلال النقر على مناطق مختلفة على صورة ما. لا تتطلب هذه العملية التمهيد عبر الخادم ، لذلك يتم استخدام العناصر لتحديد المناطق الفردية على الصورة والسلوك الذي يمثلونه. العنصر الرئيسي في رسم بياني استجابة قسم العميل هو خريطة تحتوي على عنصر أو أكثر من عناصر المنطقة ، كل منها يمثل منطقة على الصورة التي يمكن النقر عليها.
يمكن تقسيم خصائص عنصر المنطقة إلى فئتين. تتناول الفئة الأولى عنوان URL الذي سينتقل إليه المستعرض بعد أن يتم النقر على منطقة الصورة التي يمثلها المستخدم. يقدم الشكل التالي هذا النوع من السمة ، وهو ما يشبه السمات المقابلة التي شوهدت على عناصر أخرى.
تحتوي الفئة الثانية على سمات أكثر إثارة للاهتمام: سمات الشكل والمنسق. يمكن استخدام هذه الخصائص للإشارة إلى كل منطقة صورة يمكن للمستخدم النقر عليها. خصائص الشكل والمنسق تعمل معًا. يعتمد معنى سمة التنسيق على قيمة سمة الشكل ، كما هو موضح في الشكل أدناه:
بعد تقديم هذه العناصر ، أعط مثالاً ، الرمز هو كما يلي:
<Body> <img src = "../ img/example/img-map.jpg" isMap usemap = "#mymap"/> <map name = "mymap"> <area href = "javaScript: show_page (1)" form = "rect" coords = "34،60،196،230"/> شكل = "rect" coords = "'' 210،60،370،230" /> <المنطقة href = "javaScript: show_page (3) تنبيه ("هذا هو المنتج"+num) ؛ } </script> </body>تأثير العرض هو نفسه ، إلا أنه عند النقر فوق صورة المنتج المقابلة ، سيظهر اسم المنتج المقابل ، مما يشير إلى صفحة المنتج القفز.
المقالة أعلاه JavaScript Basics_simple تنفيذ الصور المدمجة هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.