عرض مشاركة مفردة
 
  #1  
قديم 28-07-2009, 03:55 PM
حاتم عبدالله حاتم عبدالله غير متصل
عضو
 
تاريخ التسجيل: Dec 2007
مشاركة: 661
مستوى تقييم العضوية: 0
حاتم عبدالله is an unknown quantity at this point
وسام انفنتي 
عدد الأوسمة: 1 (المزيد ...)
الافتراضي شرح كود .. تكبير الصور .. بطريقة الأجاكس .. 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>
ليصبح هكذا



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



ليصبح هكذا



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

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

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

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



تحياتي






التوقيع
  • أسم الشركة : مؤسسة لحظة لخدمات التصميم والدعم الفني
  • خدمات الشركة : تصميم - دعم فني - إرشفة - تطوير- إستضافة
  • مقر الشركة : مصر - مدينة نصر - مكرم عبيد خلف مفكو حلوان
  • هاتف الشركة : من خارج السعوديه / 0020105503919 - 0020121419429
  • بريد الشركة : MSN@l7zaa.com
  • الدعم الفني : www.l7zaa.net
  • روابط الشركة : www.l7zaa.net | .com
  • حسابات الشركة : الأهلي - الراجحي - ويسترن نيون
  • سجل تجاري رقم : 16659753