الويب العربي - شرح كود .. تكبير الصور .. بطريقة الأجاكس .. AJAX

الويب العربي (http://www.arabwebtalk.com/index.php)

- مجتمع ديموفنف (http://www.arabwebtalk.com/forumdisplay.php?f=73)

- - شرح كود .. تكبير الصور .. بطريقة الأجاكس .. AJAX (http://www.arabwebtalk.com/showthread.php?t=116517)

شرح كود .. تكبير الصور .. بطريقة الأجاكس .. AJAX

بسمـ الله الرحمن الرحيمـ

مساء النور ..

اخوي ..

ALERTKA.COM

استفسر عن الكود للتكبير و تصغير الصور تلقائي .. وحبيتـ اشرحه بالكامل هنا ..

مثال للدرس ..

http://www.dimof.com/dimofinf/page.p...w&act ion=3ml

عند مرور الماوس على صورة التصميم .. نلاحظ انها تكبر تلقائيا ...

بداية الشرح ..

بسم الله ..

اولا متطلبات الدرس ..

ملف expando.js

اضغط هنا للتحميل

اولا ..

قم برفع ملف expando.js الى رئيسية موقعك ليصبح ..

http://www.xxxx.com/expando.js

xxx = دومين موقعك

من ثم قم بدخول الى لوحة التحكمـ

من ثمـ الى

و نماذج العرض >> قائمة الأستايلات ..

من ثم اختر استايلكــ

واضغط تحرير ..

انا سأشرح على استايل ابعاد ...

نختار نموذج

headermain.htm

ونضغط عرض النموذج

بعد اول سطر

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/html1/DTD/html1-transitional.dtd">

نضع الكود التالي

كود:

<style type="text/css"> img.expando{ /*sample CSS for expando images. Not required but recommended*/ border: none; vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/ } </style> <script type="text/javascript" src="expando.js"> /* Expando Image Script ©2008 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use */ </script>

لاحظ الصورة التالية

من ثم نحفظ التعديل ونضغط تعديل النموذج

من ثم نقوم بانشاء .. بلوك جديد او قالب

و نقوم بملئ الفراغ من اسم و مكان

ونضع محتوى القالب الكود التالي

كود:

<p> <img class="expando" border="0" src="amster2.jpg" width="100" height="75"> <img class="expando vacation" border="0" src="amster3.jpg" width="100" height="66"> <img class="expando" border="0" src="amster4.jpg" width="100" height="75"> </p> <p> <img class="expando cat" border="0" src="cat.png" width="200" height="88"> </p>

ليصبح هكذا

من ثم نضغط على تنفيذ

ليصبح هكذا

ملاحظة الكود الي تضعه بالبلوكـ

تستطيع التحكم به بالكامل .. عن طريق ادراجه بالفرونت بيج

ووضع صور جديده و مختلفة ..

واي استفسار انا موجود هنا ..

تحياتي

الله يعطيك العآفية .. ~
جدا روعه من أول وانا ادور لها وكنت أفكر لايوجد زي كذا <_> .. ~
لاكن لقيته هنا الحمد لله .. ~
بس مشكلته لو يكون هو يختار تلقائي مش أنا يطلع أفضل وأريح .. ~
والله يوفقك
تحياتي لك
يوسف الغامدي

حياكــ

اخي ..

وان شاء الله اقوم بتطويرة ..

ليجلب عشوائي ..

الله يعطيك العافية

اقترح على ابعاد دمج مثل هذي الأفكار وتكريم المتميزين في تطوير الجمله

بالتوفيق للجميع

إقتباس:

اقتباس من مشاركة أبو طارق (المشاركة 645498)

الله يعطيك العافية

اقترح على ابعاد دمج مثل هذي الأفكار وتكريم المتميزين في تطوير الجمله

بالتوفيق للجميع

ويعافيكـ يالغالي ..

وبنسبة لأقتراحكـ انا معكــ

تحياتي

غفر الله لك ولوالديك واسكنكم الفردوس الاعلى
نعم كم نحن بحاجة لمثل هذه الابداعات المتميزة
دمت بخير

شكرا لك اخوي خلاص بسوي معقد عقد

انا اجيب لك الافكار وانت تشرحها انا غير متمرس على الاكواد بشكل قوي وفي كود لو تشرحه ممتاز

هذا كود شعار الموقع يكون بالزاوية يعني كانك تطلع قناة بالتلفزيون

http://www.dynamicdrive.com/dynamicindex4/logo.htm

إقتباس:

اقتباس من مشاركة بوابة مكة (المشاركة 645565)

غفر الله لك ولوالديك واسكنكم الفردوس الاعلى
نعم كم نحن بحاجة لمثل هذه الابداعات المتميزة
دمت بخير

بارك الله فيكــ

اخوي

صدقني اني سعيد جدا ... بدعاوتك النابعة من قلبكـ

تحياتي لكـ

إقتباس:

اقتباس من مشاركة ALERTKA.COM (المشاركة 645570)

شكرا لك اخوي خلاص بسوي معقد عقد

انا اجيب لك الافكار وانت تشرحها انا غير متمرس على الاكواد بشكل قوي وفي كود لو تشرحه ممتاز

هذا كود شعار الموقع يكون بالزاوية يعني كانك تطلع قناة بالتلفزيون

http://www.dynamicdrive.com/dynamicindex4/logo.htm

هههههههههههههههههههههه

حااااااااظر

جالس اشرحه الأن

إقتباس:

اقتباس من مشاركة ALERTKA.COM (المشاركة 645570)

شكرا لك اخوي خلاص بسوي معقد عقد

انا اجيب لك الافكار وانت تشرحها انا غير متمرس على الاكواد بشكل قوي وفي كود لو تشرحه ممتاز

هذا كود شعار الموقع يكون بالزاوية يعني كانك تطلع قناة بالتلفزيون

http://www.dynamicdrive.com/dynamicindex4/logo.htm

تفضل

http://www.arabwebtalk.com/showthread.php?p=645612

السلام عليكم ورحمة الله وبركاته

وجزاك الله كل الخير استاذي الكريم على الأكواد الجميلة هنا

وعلى الشرح الميسر والمتاح للجميع

فبارك الله لك في وقتك وجهدك

ولأستاذي ابو طارق والجميع

فمشكلة هذه الأكواد وعدم ادراجها بالقسم كثيرا انها يدوية والكثيرين لا يحبون اعتمادها

ولكن وضعنا منها مجموعة كبيرة واكثر هنا وتم شرحها تفصيلا وباللغة العربية لمن يريد الإستفادة منها

http://www.arabwebtalk.com/local_links.php?catid=1 7

وهذا مثال منهم بطريقة اخرى معتمدة على تقنيات الويب 2 باستخدام css

http://www.arabwebtalk.com/filestore...ss/p ic2.html

شرحه الكامل هنا

http://www.arabwebtalk.com/local_lin... 7&linkid=1024

ويوجد غيره الكثير ويمكنكم الإستفادة منها جميعا

اما بالنسبة لتمييز المتميزين

فان شاء الله يتم تمييزهم كما ميزناهم من قبل بوسام الابداع فى انفنيتي

فبارك الله لكم جميعا في حرصكم ووجودكم ومجهودك

وسيتم تقييم الموضوع استاذي

أطيب تحية

د.نجلاء أحمد

شكرا على المروور ..

والتوضيح ..

وشكرا على التقيم :D

فكرة حلوة تضفي حركية جميلة على المواقع , و شرح رائع ....

ان شاء الله الكل يستفيد منه ...

ملاحظة : أتحفظ على كلمة AJAX ..:n:

إقتباس:

اقتباس من مشاركة karakas (المشاركة 645934)

فكرة حلوة تضفي حركية جميلة على المواقع , و شرح رائع ....

ان شاء الله الكل يستفيد منه ...

ملاحظة : أتحفظ على كلمة AJAX ..:n:

يسلموا ...

حبيبي ..

بخصوص كلمة AJAX

نسخ ولصق هههههههههههههههههه