اخر الاخبار: --- البرامج التي تهدف إلى تعطيل عملية تشغيل الحاسب --- لم اجد حل سهل في حل مشكله من الهاكات ومني لكم هذا --- هل يمكن الحصول علي هاك الشكر --- هاك شكل جديد لحالة العضو --- هل يوجد --- هاك Theme Color Changer --- هاك الأحصائيات الشاملة --- هاك استايل للهاتف --- شرح اضافة كود ميتا تاغ لوصف المنتدى في محركات البحث --- وضع اعلانات ادسنس داخل المواضيع لمنتديات ماي بيبي mybb 1.8 --- طريقة اضافة بادئة للمواضيع بشكل انيق لمنتديات mybb --- شرح رفع وتفعيل هاك لمنتديات ماي بيبي mybb 1.8 --- مشكلة واريد حل في اسرع وقت --- ممكن هاك --- هاك DVZ Shoutbox 2.1. للنسخة 1.8 --- هاك انشاء صفحات اضافية (OUGC-Pages-1.0.0) --- هاك ايقونه حسابك بالفيس - Facebook profile link on Postbit 1.8 --- هاك القايمه الجانبيه المتحركه - sidebar mybb 1.8 --- هاك الطقس - weather for mybb 1.8 --- هاك اعضاء المجموعات - View Groups MYBB 1.8 ---

تحديث آخر نسخة 1.8.37

تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
درس إنشاء خرائط الصور
#1
إنشاء خرائط الصور
اول سؤال ممكن يخطر ببالكم ما معنى خرائط الصور؟
الجواب ببساطة هو ان نضع صورة واحده على صفحة الويب بحيث تحتوي على العديد من المناطق التي يمكن للمستخدم النقر عليها ولها اسم ثاني وهو البقع الساخنه.
طيب نجي الحين الى تطبيق صغير كمثال بسيط :-
1.قم بتحميل صورة في إيمدج ريدي باستخدام أمر openمن قائمة file . يجب أن تكون هذه الصورة ذات خلفية شفافة. بستخدم الصورة التالية الي قمت بتصميمها بخلفية شفافية عموما راح اترك لكم حرية اختيار الصورة الي تعجبكم.
[صورة: 10000770164766bfe238a67.gif]
2. أختر إحدى أدوات خرائط الصور من صندوق الأدوات ثم أنقر فوق الصورة وقم بإنشاء الخريطة . طبعا ملاحظين عدة اشكال الدائري والمضلع والمستطيل
لاحظوا الصورة
[صورة: 2768997824766c028dca87.gif]
انا اخترت الشكل الدائري وحددت المنطقة الي داخل كما هو موضح بالصورة
[صورة: 19760507454766c047a83f3.gif]
3.إذا أردت تحريك منطقة خريطة الصورة فانقر فوقها واسحب باستخدام أداة Image Map select . رمز الاداة موضح بالصورة
[صورة: 2402582814766c0840e402.gif]
4.افتح لوحة خريطة الصور باختيار أمر Show Image Map من قائمة Window . حدد عنوان URL الذي ستشير إليه خريطة الصورة. يمكنك أيضا إدخال اسم لخريطة الصورة ورسالة بديله بحيث يراها المستخدمون الذي لا يعرضون الرسومات. بيطلع البوكس الموضح بالصورة طبعا انا اكتفيت بتعبئة الاسم واليو ار ال تقدرون انتوا تملون الخانات المتبقية.
[صورة: 1251680514766c0aff1643.gif]

5. انا اعدت الخطوات 2 و3 و4 بنسبة للاجزاء الاخرى بالصورة وهي الثلاث اقسام المتبقية.
5. أحفظ الصورة باختيار أمر Save Optimized من قائمة File . وفي مربع الحوار، تأكد أن الخيار HTML & Image محدد من قائمة أنواع الملفات. سيؤدي هذا إلى إنشاء ملف HTML به الاوامر اللازمة لتحميل خريطة الصورة في صفحه الويب.

[صورة: 12523020494766c0ed7c0ab.gif]
6. لمشاهده النتيجة النهائية شوفوا الملف التالي .
[صورة: 9q9q.net.gif]


ملاحظة : سوف لن يتم إعادة رفع الصور لهذا الدرس في حال حذفها من الموقع الذي تم عليه الرفع ، فيمكنك عزيزي القارئ او القارئة ان تقرأ الدرس و تخبرني بالنقطة التي لم تفهمها وساقوم باعادة تلك النقطة فقط .
الصمــــــــــــــــــــــــــت سيد اللغات

بالصمت نقول كلمات كثيرة دون ان نتكلم
:f::f:
الرد
شكر من طرف :
#2
تسلم الأيادى وفى انتظار كل جديدك
الرد
شكر من طرف :
#3
الله يسلمك اخي الكريم،،
الصمــــــــــــــــــــــــــت سيد اللغات

بالصمت نقول كلمات كثيرة دون ان نتكلم
:f::f:
الرد
شكر من طرف :
#4
موضوع متميز مشكورة و بأنتظار كل جديد
الرد
شكر من طرف :
#5
شكرا على الموضوع والشرح الجميل اختى المتالقة............ودائما متألقة
[صورة: 942888743.gif]



الرد
شكر من طرف :
#6
العفو وشكرا لمروركم،،
الصمــــــــــــــــــــــــــت سيد اللغات

بالصمت نقول كلمات كثيرة دون ان نتكلم
:f::f:
الرد
شكر من طرف :
#7
شكراااااااااااااااااااا
الرد
شكر من طرف :
#8
فكرة انشاء خرائط صور باستخدام هذا البرنامج شيء جميل و مفيد خصوصا في تصميم الاستايلات
ان شاء الله اذا صارلي مجال اضع درس مصور ربما يختلف عن هذه الطريقة بعض الشيء
تحياتي
الرد
شكر من طرف :


التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 2 ) ضيف كريم