درس كيفية اضافة الروابط على الصور فى لغة HTML – الدرس الثانى عشر
السلام عليكم ورحمة الله وبركاته
فى الدرس السابق قمنا بالتعرف على كيفية اضافة صورة فى صفحة HTML وكيفية التحكم بها وفى الدرس الذى قبله قمنا بالتعرف على كيفية اضافة الروابط على النصوص وفى هذا الدرس سوف نتعرف ان شاء الله على كيفية اضافة رابط على الصورة
كيفية اضافة رابط على الصورة فى لغة HTML
انظر الكود التالى
1 | <a href="http://2lex.info"><img src="http://2lex.info/wp-content/uploads/2010/05/planets.gif"></a> |
نلاحظ هنا اننا قمنا بكتابة نفس الكود الذى قمنا بكتابته لعمل رابط على النص مع حذف النص ووضع مكانة كود اضافة الصورة
وتكون بهذا الشكل
ويمكننا ان نضيف مكان رابط مدونة اليكس http://2lex.info اى رابط صورة لكى ندل عليها
كيف نضع اكثر من رابط على صورة واحدة فى لغة HTML
شاهد الكود التالى
1 2 3 4 5 6 7 | <object data="http://2lex.info/wp-content/uploads/2010/05/planets.gif" alt="Planets" type="image/gif" usemap="#Map1"> <map name="Map1"> <a href="http://2lex.info/wp-content/uploads/2010/05/sun.gif" shape="rect" coords="0,0,82,126"></a> <a href="http://2lex.info/wp-content/uploads/2010/05/merglobe.gif"shape="circle" coords="90,58,3"></a> <a href="http://2lex.info/wp-content/uploads/2010/05/venglobe.gif" shape="circle" coords="124,58,8"></a> </map> </object> |
ولشرح الكود
قمنا هنا باستخدام الوسم object لاضافة الصورة التى سوف يكون عليها الروابط
وهذا الوسم يستخدم ايضا لاضافة ملفات الصوت والفيديو وتطبيقات الجافا والفلاش والاكتيفكس
ثم العنصر data لاضافة رابط الصورة او عنوان الصورة
ثم العنصر alt لاضافة النص البديل
ثم العنصر type لاضافة نوع الملف الذى قمنا باضافته فى الوسم object وامتداده
ثم العنصر usemap لنحدد ما اسم الخريطة التى سوف نستخدمها وجعلناها Map1
ثم استخدمنا الوسم map لنبدا فى رسم الخريطه على الصورة او بالمعنى ان نقوم بوضع الروابط فى الاماكن الذى نريدها على الصورة
ثم استخدمنا العنصر name لنحدد اسم الخريطة التى سنعمل بها وهنا نقوم كتابة القيمة التى كتبناها فى العنصر usemap لكى يكون العمل على الصورة المضافة فى الوسم object
ثم بعد ذلك قمنا باستخدام الوسم a والعنصر href لاضافة الرابط الذى نريد الانتقال اليه
ثم استخدمنا العنصر shape لتحديد الشكل الذى سيكون عليه الرابط وهذا يستخدم معه القيم التالية
default : وهذا لتحديد الصورة باكملها
rect : وهذا لتحديد شكل مستطيل
circle : تحديد دائرة
poly : تحديد شكل مضلع
ثم استخدمنا العنصر coords لتحديد ابعاد الشكل او الاحداثيات لتحديد حجم الشكل ومكانه على الصورة
وبكدا تكون النتيجة بهذا الشكل ان شاء الله
ولكن تنبيه العنصر coords يدعمه متصفح فايرفوكس واوبرا فقط
ولمعالجة هذا سوف نستخدم الوسم area
انظر الكود التالى
1 2 3 4 5 6 | <img src="http://2lex.info/wp-content/uploads/2010/05/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://2lex.info/wp-content/uploads/2010/05/sun.gif" /> <area shape="circle" coords="90,58,3" alt="Mercury" href="http://2lex.info/wp-content/uploads/2010/05/merglobe.gif" /> <area shape="circle" coords="124,58,8" alt="Venus" href="http://2lex.info/wp-content/uploads/2010/05/venglobe.gif" /> </map> |
وهنا قمنا باستخدام الوسم img بدلا من object
وجعنا اسم usemap هو planetmap وهذا يمكنك تغييره بالاسم الذى تريده
ثم استخدمنا الوسم area بدلا من a
وسيكون هذا هو الشكل الاخير فى النهاية ان شاء الله
وبهذا نكون قد انتهينا من هذا الدرس بحمد الله
وفى الدرس القادم ان شاء الله سوف نتعرف على كيفية عمل الجداول فى لغة HTML
