2007-12-17, 07:58 PM
إنشاء خرائط الصور
اول سؤال ممكن يخطر ببالكم ما معنى خرائط الصور؟
الجواب ببساطة هو ان نضع صورة واحده على صفحة الويب بحيث تحتوي على العديد من المناطق التي يمكن للمستخدم النقر عليها ولها اسم ثاني وهو البقع الساخنه.
طيب نجي الحين الى تطبيق صغير كمثال بسيط :-
1.قم بتحميل صورة في إيمدج ريدي باستخدام أمر openمن قائمة file . يجب أن تكون هذه الصورة ذات خلفية شفافة. بستخدم الصورة التالية الي قمت بتصميمها بخلفية شفافية عموما راح اترك لكم حرية اختيار الصورة الي تعجبكم.
![[صورة: 10000770164766bfe238a67.gif]](http://www.openiu.com/upload/071217/10000770164766bfe238a67.gif)
2. أختر إحدى أدوات خرائط الصور من صندوق الأدوات ثم أنقر فوق الصورة وقم بإنشاء الخريطة . طبعا ملاحظين عدة اشكال الدائري والمضلع والمستطيل
لاحظوا الصورة
![[صورة: 2768997824766c028dca87.gif]](http://www.openiu.com/upload/071217/2768997824766c028dca87.gif)
انا اخترت الشكل الدائري وحددت المنطقة الي داخل كما هو موضح بالصورة
![[صورة: 19760507454766c047a83f3.gif]](http://www.openiu.com/upload/071217/19760507454766c047a83f3.gif)
3.إذا أردت تحريك منطقة خريطة الصورة فانقر فوقها واسحب باستخدام أداة Image Map select . رمز الاداة موضح بالصورة
![[صورة: 2402582814766c0840e402.gif]](http://www.openiu.com/upload/071217/2402582814766c0840e402.gif)
4.افتح لوحة خريطة الصور باختيار أمر Show Image Map من قائمة Window . حدد عنوان URL الذي ستشير إليه خريطة الصورة. يمكنك أيضا إدخال اسم لخريطة الصورة ورسالة بديله بحيث يراها المستخدمون الذي لا يعرضون الرسومات. بيطلع البوكس الموضح بالصورة طبعا انا اكتفيت بتعبئة الاسم واليو ار ال تقدرون انتوا تملون الخانات المتبقية.
![[صورة: 1251680514766c0aff1643.gif]](http://www.openiu.com/upload/071217/1251680514766c0aff1643.gif)
5. انا اعدت الخطوات 2 و3 و4 بنسبة للاجزاء الاخرى بالصورة وهي الثلاث اقسام المتبقية.
5. أحفظ الصورة باختيار أمر Save Optimized من قائمة File . وفي مربع الحوار، تأكد أن الخيار HTML & Image محدد من قائمة أنواع الملفات. سيؤدي هذا إلى إنشاء ملف HTML به الاوامر اللازمة لتحميل خريطة الصورة في صفحه الويب.
![[صورة: 12523020494766c0ed7c0ab.gif]](http://www.openiu.com/upload/071217/12523020494766c0ed7c0ab.gif)
6. لمشاهده النتيجة النهائية شوفوا الملف التالي .
![[صورة: 9q9q.net.gif]](http://9q9q.net/9q9q.net.gif)
ملاحظة : سوف لن يتم إعادة رفع الصور لهذا الدرس في حال حذفها من الموقع الذي تم عليه الرفع ، فيمكنك عزيزي القارئ او القارئة ان تقرأ الدرس و تخبرني بالنقطة التي لم تفهمها وساقوم باعادة تلك النقطة فقط .
اول سؤال ممكن يخطر ببالكم ما معنى خرائط الصور؟
الجواب ببساطة هو ان نضع صورة واحده على صفحة الويب بحيث تحتوي على العديد من المناطق التي يمكن للمستخدم النقر عليها ولها اسم ثاني وهو البقع الساخنه.
طيب نجي الحين الى تطبيق صغير كمثال بسيط :-
1.قم بتحميل صورة في إيمدج ريدي باستخدام أمر openمن قائمة file . يجب أن تكون هذه الصورة ذات خلفية شفافة. بستخدم الصورة التالية الي قمت بتصميمها بخلفية شفافية عموما راح اترك لكم حرية اختيار الصورة الي تعجبكم.
2. أختر إحدى أدوات خرائط الصور من صندوق الأدوات ثم أنقر فوق الصورة وقم بإنشاء الخريطة . طبعا ملاحظين عدة اشكال الدائري والمضلع والمستطيل
لاحظوا الصورة
انا اخترت الشكل الدائري وحددت المنطقة الي داخل كما هو موضح بالصورة
3.إذا أردت تحريك منطقة خريطة الصورة فانقر فوقها واسحب باستخدام أداة Image Map select . رمز الاداة موضح بالصورة
4.افتح لوحة خريطة الصور باختيار أمر Show Image Map من قائمة Window . حدد عنوان URL الذي ستشير إليه خريطة الصورة. يمكنك أيضا إدخال اسم لخريطة الصورة ورسالة بديله بحيث يراها المستخدمون الذي لا يعرضون الرسومات. بيطلع البوكس الموضح بالصورة طبعا انا اكتفيت بتعبئة الاسم واليو ار ال تقدرون انتوا تملون الخانات المتبقية.
5. انا اعدت الخطوات 2 و3 و4 بنسبة للاجزاء الاخرى بالصورة وهي الثلاث اقسام المتبقية.
5. أحفظ الصورة باختيار أمر Save Optimized من قائمة File . وفي مربع الحوار، تأكد أن الخيار HTML & Image محدد من قائمة أنواع الملفات. سيؤدي هذا إلى إنشاء ملف HTML به الاوامر اللازمة لتحميل خريطة الصورة في صفحه الويب.
6. لمشاهده النتيجة النهائية شوفوا الملف التالي .
ملاحظة : سوف لن يتم إعادة رفع الصور لهذا الدرس في حال حذفها من الموقع الذي تم عليه الرفع ، فيمكنك عزيزي القارئ او القارئة ان تقرأ الدرس و تخبرني بالنقطة التي لم تفهمها وساقوم باعادة تلك النقطة فقط .
الصمــــــــــــــــــــــــــت سيد اللغات
بالصمت نقول كلمات كثيرة دون ان نتكلم
:f::f:
بالصمت نقول كلمات كثيرة دون ان نتكلم
:f::f:
![[صورة: 942888743.gif]](http://www4.0zz0.com/2008/03/04/00/942888743.gif)
