تقرير: وكالات الانباء الرقمية: مكتب مخابرات السيوسورسية : سوالف سوفت
في القرائة الاولية للموضوع يبدوا كأن الكود أتى بما لم تأتي به مايكروسوفت وكأنها ضربة خاطفة لها، أكدتها و عززتها بعض الردود التي تعود لأصحابها في هذا الموضوع
وفي الحقيقة يوجد تشويش او سوء الفهم..
فميكروسوفت قدمت الحل من خلال فلترات css او مايسمى بالانماط الافتراضية
والرابط الذي وضعه بشار العائد لميكروسوفت يوجد به الحل عن طريق
كود PHP:
style="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"
والكود الذي أدرجه بيشو انما يعتمد هذه التقنية اي أنه لم يأتي بجديد من عنده بل تحتسب له البرمجة فقط اما التأتير فيوجد في المتصفح ، واي كود js انما يعتمد على الدوال المخزنة في المتصفح و للإشارة هذه المشكلة متجاوزة في متصفحات موزيلا
المشرف fuga وان بدا في البداية راضيا لكنه أبدى تحفضا في الأخير اتجاها الكود لسبب ابطائه الصفحة ومعه الحق في ذالك لأن الكود يستخرج وسوم جديدة في الصفحة فمثلا هذه الصورة و سمها هو :
كود PHP:
<img border="0" src="logo2.png" width="136" height="63">
عند تفعيل الكود عليها فإن الكود يأخد امتداد الصورة لوضعها كخلفية لكن من خلال فلترات الخاصة لمساحة جديدة يحجزها ضمن الوسم span و أيضا يأخد قيم طول وعرض الصورة ليعطي تلك القيمة ل span ضمن style ويعود للصورة فيغير امتدادها الى صورة افتراضية transparentpixel.gif لتكون النتيجة :
كود PHP:
<span title='' style="width:136px; height:63px;display:inline-block;;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo2.png', sizingMethod='scale');"></span>
<img style="position:relative; left:-136px;height:63px;width:136" src="transparentpixel.gif" usemap="" border="0">
يعني اعتمو على تقنية مايكروسوفت وطبقوها تماما على كل صورة
الآن تخيل كم سيكون الناتج اذا زادت الصور عن خمسة مثلا .. !
هذا من جهة من جهة أخر أكد لنا المبعوت الرسمي لمقاهي الأنترنيت الليلية أن المبرمج الزايكونيزوارقام بعمل كود مماثل وكان حديثه لنا كالتالي :
--
شكرا شكرا اولا احب أن انوه بال png لأنها صورة و اية صورة.. في ظاهرها تقارن بال gif وفي باطنها تقارن بال psd وتعلمون ماهو ال psd ظاهرها صورة وباطنها يعلم به الله، لذا أحب كثيرا التصميم بال Macromedia fireworks لأنه أحسن واحد في نظري يتعامل مع ال png
وصورة ال png تكون صغيرة جدا الا اذا كانت تحمل اشياء أخرى غير تلك الصورة او انها تحمل طبقات من الصور في الفايروركس تنجز تصميما او template به أكواد جافا سكريبت و عدة صور و وسوم الهتمل، عندما تريد أن تحفظ عملك لتكمله فيما بعد فإنك في الفوتوشوب تحفظه بصيغة psd و هنا تحفظه بصيغة png فإن فتحت هذه الصورة في المتصفح فإنها تظهر كصورة واحدة(طبقة واحدة) لكن كما قلنا فإن باطنها يكون فيه أشياء أخرى غير تلك الصورة التي تظهر.. لذا تلزم بعض الشطارة في التعامل مع هذه الصيغة حتى يكون الحجم صغيرا .. لذا قلت انها تقارن بال psd ان لم تكن أفضل
نعود للكود .. فعلا قمت بعمل سكريبت صغير و خفيف لا يتقل الصفحة له نفس الدوروهذا الكود شبيه الى حد كبير بكودي الأول jss (تجد رابطه في التوقيع)
حيث انه لا يخرج لك وسم جديد ، بل في نفس وسم صورة ال png تجري الترتيبات و الأعمال الازمة ، فليس بالضرورة أن ندرج الوسم اولكود بالطريقة التي تراها مايكروسوفت خصوصا أن المسئلة لها علاقة بال css التي لا حدود لها يكفي فقط هذا الوسم لإدراج صورة png شفافة في متصفح IE
كود PHP:
<img width="1" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo2.png')">
لا ضرورة ل div او span او الطول أو العرض .. يكفي أن تعطي width="1" قيمة واحد ورابط الصورة وسط دالة AlphaImageLoader
وكود ي يبحث في جميع الصور الموجودة في الصفحة ويستكشف صيغة الصورة اذا كانت png فيجري عليها التعديل فإذا كان الوسم بهذا الشكل :
كود PHP:
<img src="logo2.png" width="136" height="63">
نفس الوسم بعد اجراء التعديلات عليه بالكود يصبح
كود PHP:
<img src="" width="1" height="1" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo2.png')">
وذا هو الكود:
كود PHP:
<SCRIPT LANGUAGE="JavaScript">
<!--
var i,Src,PngL,tagAllImg;
window.onload = function(){
/*
Png Alpha
for Swalif Soft
Javascript@hotmail.co.uk
*/
if(!document.all)return;
tagAllImg = document.getElementsByTagName("img");
for(i=0;i<tagAllImg.length;i++){
Src = tagAllImg[i].src.toUpperCase();
PngL = Src.substring(Src.length-4,Src.length);
if(PngL == ".PNG"){
tagAllImg[i].style.filter
=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+tagAllImg[i].src+"')";
tagAllImg[i].src = "";
tagAllImg[i].width = "1";
tagAllImg[i].height = "1";
}
}
}
//-->
</SCRIPT>
و المثال في المرفقات جربوه و ردوا علينا
و السلام
--
انتهى كلامه
يمكننا الآن التأكد أن المسألة لها علاقة بالمتصفح كما أشرنا سابقا و ليس بالكود
وقد يتجاوز هذا الأمر في الاصدار السابع (IE7)والتي حينها قد يبدأ التنافس الحقيقي بين المتصفحات هذا ان لم تفاجأنا Google كعادتها في اصدار متصفح خاص بها و يظهر ذالك جليا من خلال استقطابهم ل Gecko صاحب Firefox سنة 2006 ستكون سنة المتصفحات بدون منازع فانتظرو فإني معكم من النتظرين
انتهى التقرير
اللي بعدي لك الخط
انتبه الى خيط الميكرو
المشاركة الأصلية كتبت بواسطة Fuga
( يعني ملفي المرفق هو التوضيح والتطبيق الحي على الهاك )
ضوابط المشاركة
رد مع اقتباس