fef

1

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

** مثال:

صورة برابط

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

2- إضافة صورة كرابط:
رأينا في الدرس السابق الخاص بالروابط أن النصية أن الكود أو التركيبة الخاصة بالرابط النصي تبدو بهذا الشكل:

<a href="عنوان url ">نص الرابط</a>

الرابط النصي:

 .   هذا الكود يعطينا    مدونة فلفلاي      <a href="http://www.folfoly.com/ ">مدونة فلفلاي</a>

ولدمج الصورة مع الرابط يكفي تعويض النص برابط الصورة والذي ليصبح بهذا الشكل:

<a href="http://www.folfoly.com/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2T8JCNhild61kZCRAlk8uRqPQNoMIiuXbTHKdsSuYXGPWDhnkTR7bbDerHJihPWiBzgEDoh8eGB77nltCJ1X3ZQMPG4WvBUXgzQ4dEcn9hajnbi5R6B21FMxXsYFjE16L4-ckxTAh-k/s1600/logo-small.png"></a>

ليعطينا :

وكل ما فعلناه هو تعويض نص "مدونة فلفلاي" برابط الصورة: 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2T8JCNhild61kZCRAlk8uRqPQNoMIiuXbTHKdsSuYXGPWDhnkTR7bbDerHJihPWiBzgEDoh8eGB77nltCJ1X3ZQMPG4WvBUXgzQ4dEcn9hajnbi5R6B21FMxXsYFjE16L4-ckxTAh-k/s1600/logo-small.png">

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

** فتح الرابط في نافذة جديدة:  يتم ذلك بإضافة عنصر أخر مع رابط الصورة وهو  target="_blank" ليصبح الرابط:

<a href="http://www.folfoly.com/ " target="_blank"><img src="http://3.bp.blogspot.com/-

Fm_DqakyngE/U5l3qmxxDgI/AAAAAAAACGs/yFcxtb1QzXw/s1600/logo-small.png"></a>

** إضافة معلومات عن الصورة:  يتم إضافة معلومات عن الصورة حيث بمجرد المرور عليها بفأرة الحاسوب حتى تظهر هذه المعلومات على شكل نص. للقيام بذلك نضيف هذا الوسم alt="نص" لكن هذه المرة داخل رابط الصورة ليصبح:

<a href="http://www.folfoly.com/ " target="_blank"><img src="http://3.bp.blogspot.com/-

Fm_DqakyngE/U5l3qmxxDgI/AAAAAAAACGs/yFcxtb1QzXw/s1600/logo-small.png" alt="وصف الصورة" ></a>

شاهدوا المثال هنا مع الوصف، قوموا بالمرور من فوق الصور دون النقر بفارة الحاسوب:

رابط بصورة مع الوصف

a