الصور والخرائط التفاعلية (img, map, area)

img htmlصور htmlhtml imagemap area htmlimage map html

الشرح

<img> - عنصر الصورة: • عنصر فارغ (لا وسم ختامي) • src: مسار الصورة (إلزامي) • alt: النص البديل (إلزامي للـ SEO والوصولية) — وصف ما في الصورة • width/height: الأبعاد (يمنع Layout Shift) • loading="lazy": تحميل الصور عند الحاجة (يسرع الصفحة) • decoding="async": فك ترميز غير متزامن

<map> و <area> - خرائط الصور التفاعلية: تتيح ربط مناطق مختلفة من صورة واحدة بروابط مختلفة. مفيدة لخرائط جغرافية، مخططات، صور منتجات معقدة.

أشكال المنطقة: • shape="rect": مستطيل — coords="x1,y1,x2,y2" • shape="circle": دائرة — coords="cx,cy,radius" • shape="poly": مضلع — coords="x1,y1,x2,y2,..."

الصياغة (Syntax)

syntax

1	<!-- صورة أساسية مُحسَّنة -->
2	<img
3	src="/images/product.jpg"
4	alt="لابتوب احترافي للمبرمجين"
5	width="800"
6	height="600"
7	loading="lazy"
8	decoding="async"
9	>
10
11	<!-- خريطة صورة تفاعلية -->
12	<img src="/images/world-map.jpg" alt="خريطة العالم" usemap="#worldmap">
13
14	<map name="worldmap">
15	<area shape="rect" coords="100,50,200,150"
16	href="/africa" alt="أفريقيا" title="أفريقيا">
17	<area shape="circle" coords="350,200,80"
18	href="/europe" alt="أوروبا" title="أوروبا">
19	<area shape="poly" coords="400,100,500,100,480,200,420,200"
20	href="/asia" alt="آسيا" title="آسيا">
21	</map>

أمثلة عملية

مثال 1: معرض صور محسّن

معرض صور محسّن

1	<section class="gallery">
2	<h2>معرض المنتجات</h2>
3
4	<!-- صور محسّنة للـ SEO والأداء -->
5	<figure>
6	<img
7	src="/products/laptop.webp"
8	alt="لابتوب Dell XPS 15 - شاشة 15 بوصة عالية الدقة"
9	width="400"
10	height="300"
11	loading="lazy"
12	>
13	<figcaption>Dell XPS 15 — أفضل لابتوب للمبرمجين 2024</figcaption>
14	</figure>
15
16	<figure>
17	<img
18	src="/products/keyboard.webp"
19	alt="لوحة مفاتيح ميكانيكية RGB بالأحمر والأزرق"
20	width="400"
21	height="300"
22	loading="lazy"
23	>
24	<figcaption>لوحة مفاتيح ميكانيكية للمبرمجين</figcaption>
25	</figure>
26	</section>

نصائح احترافية

—دائماً حدد width وheight للصور — بدونها المتصفح لا يعرف حجمها قبل تحميلها مما يسبب Cumulative Layout Shift (CLS) ويضر بنتيجة Core Web Vitals وترتيب الموقع في جوجل.

الدرس السابق

الروابط التشعبية وصفاتها (a, target, download)

الدرس التالي

الصور المتجاوبة (picture, source)

الصور والخرائط التفاعلية (img, map, area)

img htmlصور htmlhtml imagemap area htmlimage map html

الشرح

أشكال المنطقة: • shape="rect": مستطيل — coords="x1,y1,x2,y2" • shape="circle": دائرة — coords="cx,cy,radius" • shape="poly": مضلع — coords="x1,y1,x2,y2,..."

الصياغة (Syntax)

syntax

1	<!-- صورة أساسية مُحسَّنة -->
2	<img
3	src="/images/product.jpg"
4	alt="لابتوب احترافي للمبرمجين"
5	width="800"
6	height="600"
7	loading="lazy"
8	decoding="async"
9	>
10
11	<!-- خريطة صورة تفاعلية -->
12	<img src="/images/world-map.jpg" alt="خريطة العالم" usemap="#worldmap">
13
14	<map name="worldmap">
15	<area shape="rect" coords="100,50,200,150"
16	href="/africa" alt="أفريقيا" title="أفريقيا">
17	<area shape="circle" coords="350,200,80"
18	href="/europe" alt="أوروبا" title="أوروبا">
19	<area shape="poly" coords="400,100,500,100,480,200,420,200"
20	href="/asia" alt="آسيا" title="آسيا">
21	</map>

أمثلة عملية

مثال 1: معرض صور محسّن

معرض صور محسّن

1	<section class="gallery">
2	<h2>معرض المنتجات</h2>
3
4	<!-- صور محسّنة للـ SEO والأداء -->
5	<figure>
6	<img
7	src="/products/laptop.webp"
8	alt="لابتوب Dell XPS 15 - شاشة 15 بوصة عالية الدقة"
9	width="400"
10	height="300"
11	loading="lazy"
12	>
13	<figcaption>Dell XPS 15 — أفضل لابتوب للمبرمجين 2024</figcaption>
14	</figure>
15
16	<figure>
17	<img
18	src="/products/keyboard.webp"
19	alt="لوحة مفاتيح ميكانيكية RGB بالأحمر والأزرق"
20	width="400"
21	height="300"
22	loading="lazy"
23	>
24	<figcaption>لوحة مفاتيح ميكانيكية للمبرمجين</figcaption>
25	</figure>
26	</section>

نصائح احترافية

—دائماً حدد width وheight للصور — بدونها المتصفح لا يعرف حجمها قبل تحميلها مما يسبب Cumulative Layout Shift (CLS) ويضر بنتيجة Core Web Vitals وترتيب الموقع في جوجل.

الدرس السابق

الروابط التشعبية وصفاتها (a, target, download)

الدرس التالي

الصور المتجاوبة (picture, source)