[sowtrig]

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


أخوانى الكرام أعضاء الويب وزواره,

أقدم لكم اليوم درس عن سكريبت مكتبة الصور الشهير 4Images

الدرس مقسم إلى قسمين:

تم إرفاق الملفات المعدلة فى المرفقات :) ,

القسم الأول: طريقة تعديل حجم الصورة ليتناسب مع المتصفح, مع منح المتصفح إمكانية مشاهدة الصورة فى حجمها الطبيعى

صعوبة الدرس: معدومة ,

وقت التنفيذ : دقيقتين ,

الملفات المعدلة:
1-gallery/templates/default/media/gif.html
2-gallery/templates/default/media/jpg.html
3-gallery/templates/default/media/png.html

الشرح:
جميع الملفات يتم حذف ما بداخلها ويتم إدراج الكود التالى بكل منها:

<!-- Template file for GIF Files -->
<a target="_blank" alt="{image_name}" href="{media_src}"><img src="{media_src}" border="1" alt="{image_name} {"width="800" height="600"}></a><br />

مع تعديل GIF إلى نوع الملف الذى يتم التعديل عليه وهذه الخطوة ليست مهمة أبدآ.

القسم الثانى:
زر تصغير وتكبير الصورة بالجافا السكريبت,
صعوبة الدرس : معدومة
وقت التنفيذ : دقيقتين ,

الملفات المعدلة:
1-gallery/templates/default/media/gif.html
2-gallery/templates/default/media/jpg.html
3-gallery/templates/default/media/png.html

الشرح:
لإستخدام هذا الزر مع التعديل المدرج فى الأعلى يتم التعديل على الملفات فى الأعلى وحذف ما بداخلها ويتم إدراج الكود التالى:

<script type="text/javascript">
function changeSize()
{
document.getElementById("compman").height="250"
document.getElementById("compman").width="400"


}
</script>
<script type="text/javascript">
function changeSize1()
{
document.getElementById("compman").height="600"
document.getElementById("compman").width="800"


}
</script>
<a target="_blank" alt="{image_name}" href="{media_src}"><img id="compman" src="{media_src}" border="1" alt="{image_name} {"width="800" height="600"}></a><br />
<br />تم إعادة ضبط أبعاد الصورة, للإطلاع على حجم الصورة الحقيقى برجاء قم بالضغط عليها. <br /><br />

<input type="button" onclick="changeSize()" value="تصغير الصورة">

<input type="button" onclick="changeSize1()" value="تكبير الصورة"><br />

لإستخدام الزر بدون خاصية تعديل حجم وأبعاد الصورة يتم حذف محتوى الملفات وإدراج الكود التالى:

<script type="text/javascript">
function changeSize()
{
document.getElementById("compman").height="250"
document.getElementById("compman").width="400"


}
</script>
<script type="text/javascript">
function changeSize1()
{
document.getElementById("compman").height="600"
document.getElementById("compman").width="800"


}
</script>
<img id="compman" src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
  <br /><br />

<input type="button" onclick="changeSize()" value="تصغير الصورة">

<input type="button" onclick="changeSize1()" value="تكبير الصورة"><br />

المثال:
http://www.apcen.com/r----56506.htm

إنتهى الدرس والحمد لله,

ملحوظة: تعمدت عدم وضع حقوق أو خلافه حتى لا تشوب هديتى إليكم بمناسبة شهر رمضان الكريم آى عيوب, أتمنى منكم خالص الدعاء بالهداية والثبات وأن يغفر الله لى ولوالدى وللمسلمين جميعآ.
كما أننى لا أسمح بإستخدام التعديلات فى ما يخالف الشريعة الإسلامية.

تقبلوا خالص تحياتى;

[l3bxl3b]

موضوع جميل وشرح مبسط وسهل ..

جزاك الله عنه خيرا

تقبل مرورى

[sowtrig]

أهلآ بك أخى l3bxl3b ,

وجزاك الله خيرآ على المرور الطيب,

ويسعدنى أن التعديلات نالت إعجابك,

ومرحبآ بك ومبروك علينا إعادة فتح موضوعك وتقديمك الخدمات المجانية لأعضاء الويب.

تحياتى;

[Dooem]

شكرا لك 10 على 10 يامهندس

[sowtrig]

جزاك الله خيرآ اخى سيف على المرور الطيب,

ويسعدنى كثيرآ تقييمك وكنت أنتظره صراحةً,

وعن لقبى الذى ينادونى به هو دكتور نظرآ لإرتباطه بمجال دراستى وعملى ,

وجزاك الله خيرآ على المرور الطيب,

تحياتى;