HTML Image Maps
خرائط الصور في لغة HTML
سوف تتعلم في هذا الدرس كيفية وضع أكثر من رابط link داخل صورة واحدة، ومن خلال استخدام خرائط الصور image maps في لغة HTML.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Image Maps
خرائط الصور في لغة HTML
</>
HTML Image Maps
خرائط الصور في لغة HTML
يمكنك في لغة HTML وضع أكثر من link رابط داخل صورة واحدة، ويتم ذلك باستخدام [image maps] خرائط الصور، وهي عبارة عن صورة واحدة مقسمة إلى عدّة مناطق، حيث يتم تحديد مناطق معينة في الصورة لتصبح links روابط، كل رابط يمكن النقر عليه، ويؤدي إلى صفحة معينة أو صورة معينة ومختلفة.
- عن طريق image maps يمكنك إنشاء صور مربوطة بعدّة صفحات ويب، كل جزء في الصورة له رابط صفحة ويب مختلف أو رابط صورة مختلفة.
- عنصر <map> هو الذي يصنع صور ذات روابط متعددة، ويحتوي بداخله على عنصر <area> لجعل كل نقرة على أي جزء من أجزاء الصورة تنقلك لصفحات مختلفة أو صور مختلفة.
</>
Image Map Syntax In HTML
طريقة كتابة عنصر Map Syntax في لغة HTML
- لتقسيم image الصورة إلى عدّة مناطق نستخدم [ العنصر <map>].
- ولتحديد المناطق القابلة للضغط نستخدم العنصر <area> بداخل العنصر <map>.
- ولإضافة الصورة نستخدم العنصر <img> بحيث نربطه بالعنصر <map>.
خطوات كتابة image map:
- نقوم بإنشاء صورة باستخدام عنصر <img> ونضع مسار الصورة، حيث يجب اختيار صورة تحتوي أكثر من عنصر، كما في الصورة العلوية لأنها تحتوي على جهاز [كمبيوتر + هاتف + قهوة].
- نقوم بإنشاء عنصر <map> من نوع [nested elements] العناصر المُتداخلة، له open tag علامة بداية وله close tag علامة إغلاق.
- نستخدم خاصية name لعنصر map ونقوم بإضافة اسم، مثل: image-map لتصبح بهذا الشكل: <map name="image-map"></map>.
- نربط الصورة <img> بالخريطة عن طريق خاصية [usemap] ونكتب اسم القيمة التي قمنا بتحديدها داخل map لتصبح بهذا الشكل: "usemap="#image-map
- نقوم بإضافة ثلاث مناطق، للثلاث عناصر داخل الصورة، عن طريق استخدام عنصر <area> حيث يكون كل عنصر مرسوم في الصورة له area منفصل.
- يحمل عنصر area خاصية [coords] التي نكتب بداخلها الإحداثيات الخاصة بمكان العنصر المرسوم على الصورة، كما يمكنك استخدام موقع [www.image-map.net] لحساب الإحداثيات تلقائياً.
- ويحمل عنصر area أيضاً خاصية href التي نضع بداخلها رابط صفحة الويب أو الصورة التي سيتم الذهاب إليها عند النقر على أي عنصر.
</>
Img Element In HTML
عنصر الصورة في لغة HTML
نقوم بإنشاء صورة باستخدام عنصر <img> ونضع مسار الصورة، حيث يجب اختيار صورة تحتوي أكثر من عنصر، مثل الصورة العلوية التي تحتوي على: [جهاز كمبيوتر + هاتف + قهوة].
خطوات بناء عنصر الصورة مع image map:
- إضافة عنصر img.
- إضافة خاصية src لإضافة مسار الصورة.
- إضافة خاصية usemap لنربط الصورة بالمناطق areas الموجودة داخل عنصر map وهو الاسم الذي يُحدد داخل خاصية name لعنصر map.
Img Element
طريقة إضافة عنصر img.
<img>
src attribute
إضافة خاصية src لإضافة مسار الصورة.
<img src="https://www.closetag.com/images/place.jpg">
Usemap Attribute
إضافة خاصية usemap لربط الصورة بـ areas المناطق الموجودة داخل عنصر map وهو الاسم الذي يُحدد داخل خاصية name لعنصر map.
<img src="https://www.closetag.com/images/place.jpg" usemap="#image-map">
ملاحظة
</>
Map Element In HTML
عنصر map في لغة HTML
- نقوم بإنشاء عنصر map عن طريق علامة <map>.
- عنصر <map> من النوع [nested element] له open tag علامة بداية وله close tag علامة نهاية.
- إضافة خاصية "name="image-map التي تضاف بعد علامة # في خاصية usemap لعنصر img.
Interactive Image Map Using `<map>` Element
نقوم بإنشاء عنصر خريطة تفاعلية باستخدام علامة `<map>` في HTML لربط مناطق تفاعلية بصورة معينة.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map"> <map> <map>
Name Attribute With Map Element
استخدام خاصية name مع عنصر <map> لكي يتم الربط مع عنصر img.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map"> <map name="image-map"> <map>
لاحظ أن
</>
Area Element In HTML
عنصر Area في لغة HTML
خطوات إضافة عنصر area:
- نقوم بإضافة ثلاث عناصر من area بناء على عدد العناصر أو المناطق الموجودة في الصورة.
- نقوم بإضافة خاصية coords لكل عنصر من العناصر الثلاثة area كلاً حسب منطقته على الصورة، ليصبح بهذا الشكل ["coords="74,165,446,584].
- نقوم بإضافة خاصية href لكي نربط المنطقة بصفحة ويب أو صورة ثم نضيف بداخل الخاصية المسار.
- إضافة عنصر shape لتحديد نوع الشكل إما [rect يحدد شكل مستطيل أو poly يحدد منطقة متعددة الأضلاع أو circle يحدد شكل دائري].
- اختياري يمكن إضافة ثلاث خصائص اختيارية وهي [title و alt و target] لفتح الصورة في نافذة جديدة.
Area Element
إضافة عنصر area لكل منطقة محدّدة على الصورة.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map"> <map name="image-map"> <area></area> <area></area> <area></area> <map>
Href Attribute
يوجد لكل منطقة أو عنصر داخل الصورة رابط لصفحة ويب أو صورة ثانية، وذلك لكي يقوم المتصفح بنقل المستخدم عند النقر عليها.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map"> <map name="image-map"> <area href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584"></area> <area href="https://www.closetag.com/images/cellphone.jpg" coords="477,400,562,574"></area> <area href="https://www.closetag.com/images/coffeehouse2.jpg" coords="554,288,90"></area> <map>
Final Interactive Image Map Example
المثال كامل بجميع العناصر وبجميع الخصائص.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="mac" title="mac" href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584" shape="rect">
<area target="_blank" alt="cellphone" title="cellphone" href="https://www.closetag.com/images/cellphone.jpg" coords="477,400,562,574" shape="rect">
<area target="_blank" alt="coffee" title="coffee" href="https://www.closetag.com/images/coffeehouse2.jpg" coords="554,288,90" shape="circle">
</map>
</>
?How Are The Coordinates Of The Rectangle Calculated
كيف يتم حساب إحداثيات المستطيل؟
طريقة احتساب أبعاد العناصر المستطيلة على الصور:
تأتي إحداثيات الشكل = "rect" في أزواج ، أحدهما للمحور x والآخر للمحور y. إحداثيات الخاصية shape من النوع rect يتم إضافة [قيميتين] بداخلها.
القيمة الأولى تنقسم إلى جزءين، هما:
- الجزء الأول: يكون بعد بداية العنصر من الصورة من جهة اليسار + بعد بداية العنصر من أعلى الصورة 74,165.
- الجزء الثاني: يكون بعد نهاية العنصر من جهة اليسار + بعد نهاية العنصر من أعلى الصورة 446,584.
لتصبح في النهاية بهذا الشكل ["coords="74,165,446,584].
?How To Define Rectangle Shape Coordinates In Images Using HTML
احتساب قيمة x وقيمة y للصور المستطيلة.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="mac" title="mac" href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584" shape="rect">
</map>
</>
?How Are The Coordinates Of The Circle Calculated
كيف يتم حساب إحداثيات الدائرة؟
احتساب أبعاد العناصر الدائرية على الصور:
يتم احتساب الشكل الدائري عن طريق تحديد نقطة مركز الدائرة أولاً، ثم تحديد نصف قطر الدائرة.
وسيكون موقع نقطة مركز الدائرة في هذا المثال:
- على بعد [554 بيكسل px]، من الجانب الأيسر للصورة.
- على بعد [288 بيكسلpx]، من الجانب العلوي للصورة.
وتكون قيمة نصف قطر الدائرة هي [90 بيكسل px].
Circle Shape
احتساب قيمة x وقيمة y للصور الدائرية.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="mac" title="mac" href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584" shape="rect">
</map>
</>
?How Are The Coordinates Of The Polygon Calculated
كيف يتم حساب إحداثيات المضلع؟
- الرقم الأول هو إحداثي المحور الأفقي [ x ].
- الرقم الثاني هو إحداثي المحور الرأسي [ Y ].
Polygon Shape Usage In Image Maps
احتساب قيمة x و y لنقاط الصورة باستخدام الشكل المضلع متعدد الأضلاع.
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="mac" title="mac" href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584" shape="rect">
</map>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
