الويب العربي - [4Images] طريقة تعديل حجم الصورة ليتناسب مع المتصفح + زر تصغير وتكبير الصورة بالجافا

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

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

أقدم لكم اليوم درس عن سكريبت مكتبة الصور الشهير 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

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

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

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