الصور Images

إدراج الصور في صفحات الويب

تعزز الصور المظهر المرئي لصفحات الويب من خلال جعلها مشوقة أكثر وملونة.
يتم استخدام الوسم <img> لإدراج الصور في صفحات HTML. وكما ذكر سابقا فإن العنصر <img> عنصر فارغ (Empty element) ويحتوي على سمات فقط. دعنا نلقي نظرة على بنية جملة العنصر <img> :

بناء الجملة
  1. <img src="url" alt="some_text">

في المثال التالي سيتم إدراج ثلاث صور في صفحة الويب:

مثال
تشغيل
  1. <img src="images/kites.jpg" alt="Flying Kites">
  2. <img src="images/sky.jpg" alt="Cloudy Sky">
  3. <img src="images/balloons.jpg" alt="Balloons">

يجب أن تحمل كل صورة سمتين على الأقل: سمة src وسمة alt.
تخبر سمة src المتصفح بمكان العثور على الصورة. قيمته هي عنوان URL لملف الصورة.
بينما توفر السمة alt نصًا بديلاً للصورة ، إذا كانت الصورة غير متاحة أو لا يمكن عرضها لسبب ما. يجب أن تكون قيمته بديلاً مفيدًا للصورة.

نصيحة:

يجب استخدام السمة alt لانها توفر وصفاً نصياً بديلاً للصورة إذا لم يتمكن المستخدم لسبب ما من عرض الصورة بسبب بطء الاتصال ، أو عدم توفر الصورة على عنوان URL المحدد ، أو إذا كان المستخدم يستخدم قارئ شاشة أو متصفح ويب غير رسومي .

تحديد عرض (Width) وارتفاع (Height) الصورة

يتم استخدام سمات width و height لتحديد عرض وارتفاع الصورة.
يتم تفسير قيم هذه السمات بالبكسل افتراضيًا.

مثال
تشغيل
  1. <img src="images/kites.jpg" alt="Flying Kites" width="300" height="300">
  2. <img src="images/sky.jpg" alt="Cloudy Sky" width="250" height="150">
  3. <img src="images/balloons.jpg" alt="Balloons" width="200" height="200">

يمكننا أيضًا استخدام السمة style لتحديد العرض والارتفاع للصور. وتكمن ميزة استخدامها في انها ستقوم بمنع أوراق الأنماط (style sheets) من تغيير حجم الصورة عن طريق الخطأ ، لأن النمط المضمن داخل العنصر له الأولوية القصوى.

مثال
تشغيل
  1. <img src="images/kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
  2. <img src="images/sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
  3. <img src="images/balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

استخدام عنصر Picture (HTML5)

في بعض الأحيان ، لا يعمل تغيير حجم الصورة لأعلى أو لأسفل لتناسب الأجهزة المختلفة (أو أحجام الشاشة) كما هو متوقع. أيضًا ، لا يؤدي تقليل بُعد الصورة باستخدام خاصية العرض والارتفاع أو خواص الانماط إلى تقليل حجم الملف الأصلي. لمعالجة هذه المشاكل ، أدخلت HTML5 وسم <picture> التي تسمح لك بتعريف إصدارات متعددة من الصورة لاستهداف أنواع مختلفة من الأجهزة.
يحتوي عنصر <picture> على صفر أو أكثر من عناصر <source> ، يشير كل منها إلى مصدر صورة مختلف ، ويجب ان يحتوي على عنصر <img> واحد في النهاية. يحتوي كل عنصر <source> أيضًا على سمة media التي تحدد حالة الوسائط (مشابهة لاستعلام الوسائط(media query) ) التي يستخدمها متصفح الويب لتحديد متى يجب استخدام مصدر معين. لنجرب مثالاً:

مثال
تشغيل
  1. <picture>
  2. <source media="(min-width: 1000px)" srcset="logo-large.png">
  3. <source media="(max-width: 500px)" srcset="logo-small.png">
  4. <img src="logo-default.png" alt="My logo">
  5. </picture>
ملاحظة:

سيقوم متصفح الويب بتقييم كل عنصر <source> إبن واختيار أفضل تطابق بينها ؛ إذا لم يتم العثور على تطابقات ، فسيتم استخدام عنوان URL الخاص بالعنصر <img> الموجود كقيمة للسمة src . أيضًا ، يجب ان يكون العنصر <img> آخر عنصر إبن للعنصر <picture>.

خرائط الصور (Image Maps)

تتيح لك خريطة الصورة (image map) تحديد نقاط فعالة على الصورة تعمل تمامًا مثل الرابط التشعبي (hyperlink).
الفكرة الأساسية وراء إنشاء خريطة الصورة هي توفير طريقة سهلة لربط أجزاء مختلفة من الصورة دون تقسيمها إلى ملفات صور منفصلة. على سبيل المثال ، قد تحتوي خريطة العالم على ارتباط تشعبي لكل بلد لمزيد من المعلومات حول هذا البلد.
دعنا نجرب مثالًا بسيطًا لفهم كيفية عملها:

مثال
تشغيل
  1. <img src="examples/traffic-signs/3-traffic-signs.png" usemap="#image-map" alt="traffic-signs">
  2. <map name="image-map">
  3. <area shape="circle" coords="118, 130, 112" href="examples/traffic-signs/No-overtaking.html">
  4. <area shape="poly" coords="250, 80, 251, 173, 314, 241, 410, 240, 473, 173, 474, 82, 407, 15, 314, 18" href="examples/traffic-signs/Stop.html">
  5. <area shape="poly" coords="495, 231, 605, 23, 724, 231" href="examples/traffic-signs/other-dangers.html">
  6. </map>

تُستخدم السمة name الموجودة داخل الوسم <map> لربط الخريطة بالعنصر <img> باستخدام سمة usemap الخاصة بالعنصر <img>.
كما يتم استخدام الوسم <area> داخل عنصر <map> لتحديد المناطق القابلة للنقر في الصورة. يمكنك تحديد أي عدد من المناطق القابلة للنقر داخل الصورة.

ملاحظة:

لا يجب استخدام خريطة الصور في ربط صفحات الموقع بديلا للعنصر <a>. لان ذلك سيؤدي إلى الاضرار بنتائج البحث الخاصة بموقعك في محركات البحث
الاستخدام الصحيح لخريطة الصور هو مع خريطة جغرافية فقط .

نصيحة:

هناك العديد من الأدوات عبر الإنترنت المتاحة لإنشاء خرائط الصور.

« التالي السابق »