HTML Image Maps
خرائط الصور في لغة HTML
سوف تتعلم في هذا الدرس كيفية وضع أكثر من link رابط داخل image صورة واحدة، ومن خلال استخدام image maps خرائط الصور في لغة HTML.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Image Maps
خرائط الصور في لغة HTML
</>
HTML image maps
خرائط الصور في لغة HTML
يمكنك في لغة HTML وضع أكثر من link رابط داخل image صورة واحدة، ويتم ذلك باستخدام image maps خرائط الصور، وهي عبارة عن صورة واحدة مقسمة إلى عدّة مناطق، حيث يتم تحديد مناطق معينة في الصورة لتصبح links روابط، كل رابط يمكن النقر عليه، ويؤدي إلى صفحة معينة أو صورة معينة ومختلفة.
- عن طريق image maps يمكنك إنشاء صور مربوطة بعدّة صفحات ويب، كل جزء في الصورة له رابط صفحة ويب مختلف أو رابط صورة مختلفة.
- عنصر <map> هو الذي يصنع صور ذات روابط متعددة، ويحتوي بداخله على عنصر <area> لجعل كل نقرة على أي جزء من أجزاء الصورة تنقلك لصفحات مختلفة أو صور مختلفة.
</>
Image map syntax in HTML
طريقة كتابة عنصر image map في لغة 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.
map element
نقوم بإنشاء عنصر map عن طريق علامة <map>.
<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 image maps
المثال كامل بجميع العناصر وبجميع الخصائص.
<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 coords rect values calculated ؟
كيف يتم احتساب قيمة rect coords احداثيات المستطيل ؟
طريقة احتساب أبعاد العناصر المستطيلة على الصور:
تأتي إحداثيات الشكل = "rect" في أزواج ، أحدهما للمحور x والآخر للمحور y. إحداثيات الخاصية shape من النوع rect يتم إضافة قيميتين بداخلها.
القيمة الأولى تنقسم إلى جزءين، هما:
- الجزء الأول يكون بعد بداية العنصر من الصورة من جهة اليسار + بعد بداية العنصر من أعلى الصورة 74,165.
- الجزء الثاني يكون بعد نهاية العنصر من جهة اليسار + بعد نهاية العنصر من أعلى الصورة 446,584.
لتصبح في النهاية بهذا الشكل "coords="74,165,446,584
React shape
احتساب قيمة x وقيمة y للصور react shape المستطيلة.
<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 coords circle values calculated
كيف يتم احتساب قيمة circle coords الدائرة ؟
احتساب أبعاد circle shape العناصر الدائرية على الصور:
يتم احتساب الشكل الدائري عن طريق تحديد نقطة مركز الدائرة أولاً، ثم تحديد نصف قطر الدائرة.
وسيكون موقع نقطة مركز الدائرة في هذا المثال:
- على بعد 554 ( px ) بيكسل، من الجانب الأيسر للصورة.
- على بعد 288 ( px ) بيكسل، من الجانب العلوي للصورة.
وتكون قيمة نصف قطر الدائرة هي 90 ( px ) بيكسل.
Circle shape
احتساب قيمة x وقيمة y للصور circle shape الدائرية.
<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 coords poly values calculated
كيف يتم احتساب قيمة poly coords متعدد الأضلاع ؟
- الرقم الأول هو إحداثي المحور الأفقي ( x ) .
- الرقم الثاني هو إحداثي المحور الرأسي ( Y ) .
Poly shape
احتساب قيمة x وقيمة y للصور poly shape متعددة الأضلاع.
<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
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
