 |
 |
المحادئة عبر المسنجر |
|
 |
|
 للمحادثة عبر مسنجر الـ msnأو التحدث عبر برنامج Skypeيمكنكم تحديد موعد عبر إرسال رسالة إلى العنوان البريدي info@rfaah.comأو إرسال تذكرة عن طريق صفحة تذكرة جديدة للإضافة إلى مسنجر الهوتميل : info@rfaah.comللإضافة إلى برنامج سكايبي : waseem.haidar |
|
 |
|
 |
|
|
|
الدرس الثامن - الصور |
|
|
|
مقال رقم 18 الصورة غير موجودة | القسم | قسم الدروس والتعليم - لغة HTML | | أضيف بواسطة | tiger | | عدد المشاهدات | 929 | | تاريخ الإضافة | 14/12/2008 - 04:45 | | آخـر تحديــث | 06/09/2010 - 13:00 |
مؤثر الصورة <img> :
عرض صورة ما عبر المتصفح
خياراته :
1. src
يحدد مكان تواجد الصورة عبر كتابة مسارها المطلق أو النسبي وهو خيار إلزامي
مثال :
<img src="504.jpg">
عرض الصورة 504.jpg الموجودة بالمستوى الحالي للملف
في حال أخطأنا بمسار الصورة أو بإسمها يظهر لنا المتصفح شكل يعبر عن هذا الخطأ وهو في متصفح الإكسبلورر مستطيل بداخله علامة X حمراء
2. border
يحدد حجم إطار الصورة بالبيكسل وهو بشكل إفتراضي يأخذ القيمة 0 ولونه أسود
مثال :
<img src="504.jpg" border=1>
صورة بإطار عرضه 1 بيكسل لونه أسود
3. align
خيار الرصف وهو يحدد طريقة رصف الصورة مع النص أو الصور أو المعطيات الأخرى التي تليها ولهذا الخيار القيم التالية :
right رصف الصورة إلى يمين النص أو الصورة التالية لها مع ترك فراغ واحد بينهما
left رصف الصورة إلى يسار النص أو الصورة التالية لها مع ترك فراغ واحد بينهما
top رصف النص أو الصورة التالية بأعلى الصورة من غير فراغ
middle رصف النص أو الصورة التالية بمنتصف الصورة من غير فراغ
bottom رصف النص أو الصورة التالية بأسفل الصورة من غير فراغ وهو الإفتراضي
في الخيارات الثلاث الأخيرة يتم تطبيق الرصف على سطر واحد فقط والأسطر التالية تنزل تحت الصورة
بالتالي تطبق هذه الخيارات عادة لتكوين تعليق أو شرح مصغر على الصورة في حين يتم تطبيق الخيارين right left لرصف الصورة إلى جانب فقرة كاملة من النص
أمثلة :
<img src="dir/1.gif" align=top border=0>نص بأعلى الصورة
<img src="pctr.jpg" align=right>نص على يسار الصورة
4. alt
يحدد النص البديل وهو النص الذي سيظهر في حالة عرض الصفحة بدون عرض الصور
وهذا النص يظهر أيضاً كلافتة منبثقة عند الوقوف بالمؤشر فوق الصورة لمدة معينة بشكل مشابه لخيار title في مؤثر الإرتباط التشعبي <a>
مثال :
<img src="pctr.gif" alt='نص وصفي' border=3>
5. width height
يحددان عرض وإرتفاع الصورة بطريقتين : رقم بالبيكسل - نسبة مئوية من نافذة المتصفح
بشكل إفتراضي وعند عدم تحديد هذين الخيارين يتم عرض الصورة بحجمها الطبيعي
يجب الإنتباه عند إستخدام هذين الخيارين من تشوه الصورة وخصوصاً عند تكبيرها لكن يفضل القيام بتحديد الأبعاد ليتمكن المتصفح من إعداد الصفحة بسرعة ووضوح
عند إستخدام النسبة المئوية يتم تحديد أحد البعدين فقط ويقوم المتصفح بشكل آلي بحساب البعد الثاني للحفاظ على النسبة الصحيحة بين البعدين وعدم تشوه الصورة
مثال :
<img src="pctr.gif" width=200 height=100>
<img src="pctr.gif" width=50% align=middle>
6. hspace vspace
يحدد هذين الخيارين مسافة التباعد الفارغة بين الصورة وماحولها بالبيكسل حيث hspace هو مسافة التباعد الأفقي أي على يمين ويسار الصورة في حين أن vspace هو مسافة التباعد العامودي أي فوق وتحت الصورة
مثال :
<img src="pctr.gif" height=20% hspace=30 vspace=60>
ملاحظة هامة :
لجعل صورة تشكل إرتباط تشعبي نحيط مؤثر الصورة بمؤثر الإرتباط التشعبي
مثال :
<a href="link.htm"><img src=map.gif></a>
---------------------------------
عودة للمؤثر <body> :
يمكن جعل صورة ما تظهر كخلفية للصفحة بشكل كامل عن طريق الخيار :
7. background
مثال :
<body background="2.jpg"> ... </body>
في حال كانت الصورة أصغر من نافذة المتصفح يتم تكرار الصورة على كامل الخلفية بشكل أفقي وعامودي
---------------------------------
خرائط الصورة Image maps :
هي عبارة عن مناطق محددة من الصورة ( غير مرئية ) تشكل إرتباطات تشعبية
لإعلام المتصفح أن الصورة تستخدم خريطة نستخدم الخيار :
7. usemap
والذي يأخذ قيمة هي إسم الخريطة ( نختاره حسب مانريد ) وقبلها المحرف #
مثال :
<img src='1.gif' usemap=#map1>
لتعريف خريطة الصورة التي حددنا إسمها ضمن الخيار usemap نستخدم المؤثر المزدوج :
<map></map>
خياراته :
name
تحديد إسم الخريطة التي سنعمل لها الإرتباطات التشعبية
مثال :
<map name=map1></map>
لتحديد مناطق الإرتباطات نستخدم المؤثر المفرد <area> وهو تابع للمؤثر <map>
خيارات المؤثر <area> :
1. shape
يحدد شكل منطقة الإرتباط وهي أربعة أشكال :
rect مستطيل
circle دائرة
polygon مضلع
default المساحة المتبقية من الصورة وهي أي جزء من الصورة لم يتم تحديده كإرتباط تشعبي بأي من الأشكال السابقة
2. coords
إحداثيات شكل منطقة الإرتباط
إحداثيات نقطة ما على الصورة تكتب بالشكل : x,y
حيث x هو المسافة الأفقية بين النقطة والحافة اليسرى للصورة وأما y فهو المسافة العامودية بين النقطة والحافة العليا للصورة
تكتب الإحداثيات حسب شكل منطقة الإرتباط
فإذا كان الشكل مستطيل نكتب فقط إحداثيات الزاوية العليا اليسرى وإحداثيات الزواية اليمنى السفلى بالأسلوب : x1,y1,x2,y2
وإذا كان الشكل دائرة نكتب إحداثيات نقطة مركز الدائرة ومسافة نصف القطر بالبيكسل بالأسلوب : x,y,radius
وإذا كان الشكل مضلع نكتب إحداثيات كل رأس من رؤووسه بالترتيب بالأسلوب : x1,y1,x2,y2,x3,y3.....
3. href
وجهة الإرتباط التشعبي بمسار مطلق أو نسبي
4. title
النص الوصفي للإرتباط
مثال :
<img src=1.gif border=0 usemap=#map2>
<map name=map2>
<area shape=rect coords="10,10,60,60" href="index.htm">
<area shape=circle coords="120,150,50" href="http://yahoo.com" title='Yahoo site'>
</map>
ملاحظة هامة :
يمكن أن نصنع خريطة لصورة بطريقة سهلة جداً عن طريق إستخدام أي من محررات لغة html مثل برنامج Microsoft Office FrontPage عوضاً عن الطريقة اليدوية
يجب أن ننتبه أن لاتخرج الإحداثيات خارج حدود الصورة في حال كنا نستخدم الطريقة اليدوية لتعيين الإحداثيات
|
|
|
|
|
|
|
