كيف تستعمل صورة كرابط

كيف تستعمل صورة كرابط

1- الصور والروابط:

رأينا في درس سابق طريقة إنشاء روابط html نصية ، وفي هذا الدرس سنحاول التطرق لكيفية استعمال صورة كرابط أو دمج صورة مع رابط بحيث تصبح الصورة هي العنصر الذي ننقر عليه عوض النص.
استعمال الصور كروابط له أهميته كجذب الإنتباه لأن الصورة تتميز بخاصية الالوان وتاثيرها على تركيز اي متصفح أكبر من النصوص. لكن هذا لا يعني أنه ينصح باستعمال الصور أكثر من النصوص كروابط. لأنه بكل بساطة لكل منهما مكانه ودوره المختلف.

** مثال:


صورة برابط
وصف الصورة
صورة عادية بدون رابط

2- إضافة صورة كرابط:

رأينا في الدرس السابق الخاص بالروابط أن النصية أن الكود أو التركيبة الخاصة بالرابط النصي تبدو بهذا الشكل:
<a href="عنوان url ">نص الرابط</a>
الرابط النصي:
 .   هذا الكود يعطينا    مدونة فلفلاي      <a href="https://www.folfoly.com/ ">مدونة فلفلاي</a>

ولدمج الصورة مع الرابط يكفي تعويض النص برابط الصورة (رفع صورة على بلوجر ونسخ رابطها؟) والذي ليصبح بهذا الشكل:
<a href="https://www.folfoly.com/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZ1H3r0V2WnsEjfyH5XgExUZhQMuIwBzccZ69dvCN-a0Ggxktxsx4STJNFPo8pQwNKEV2K22UFa3obfLW-8uimHH6kkGj9oCiOwMzcNEjr1KKZF5aXvZkNhqR0fhbyptuMX1KXVPhqVw/s1600/logo-small.png"></a>
ليعطينا :

وكل ما فعلناه هو تعويض نص "مدونة فلفلاي" برابط الصورة: 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZ1H3r0V2WnsEjfyH5XgExUZhQMuIwBzccZ69dvCN-a0Ggxktxsx4STJNFPo8pQwNKEV2K22UFa3obfLW-8uimHH6kkGj9oCiOwMzcNEjr1KKZF5aXvZkNhqR0fhbyptuMX1KXVPhqVw/s1600/logo-small.png">

الآن كلما نقر أحدهم على الصورة سيفتح الرابط ويمكن إضافة بعض العناصر الأخرى للتحكم اكثر بالرابط.

 3- عناصر أخرى لإغناء الرابط بالصورة:


 ** فتح الرابط في نافذة جديدة:  يتم ذلك بإضافة عنصر أخر مع رابط الصورة وهو  target="_blank" ليصبح الرابط:
<a href="https://www.folfoly.com/ " target="_blank"><img src="https://3.bp.blogspot.com/-
Fm_DqakyngE/U5l3qmxxDgI/AAAAAAAACGs/yFcxtb1QzXw/s1600/logo-small.png"></a>

** إضافة معلومات عن الصورة:  يتم إضافة معلومات عن الصورة حيث بمجرد المرور عليها بفأرة الحاسوب حتى تظهر هذه المعلومات على شكل نص. للقيام بذلك نضيف هذا الوسم alt="نص" لكن هذه المرة داخل رابط الصورة ليصبح:
<a href="https://www.folfoly.com/ " target="_blank"><img src="https://3.bp.blogspot.com/-
Fm_DqakyngE/U5l3qmxxDgI/AAAAAAAACGs/yFcxtb1QzXw/s1600/logo-small.png" alt="وصف الصورة" ></a>
أهمية الوصف تكمن في أمرين، الأول هو عندما لا يتم تحميل الصور وإظهارها فيتم إظهار النص. والأمر الثاني والمهم هو بالنسبة لمواقع البحث فهذا يساعدها لتصنيف صور مدونتك.

هذا ما يتعلق بدمج الصور مع الروابط، حيث تستطيعون من الآن فصاعدا استعمال الصور كروابط على مدوناتكم. إذا كانت لديكم أية أسئلة لا تترددوا في طرح أسئلتكم عبر التعليقات اسفله.

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله