مثال تصليح مشكلة IE6 لشفافية صور PNG - باستخدام IE7.js

إدراج صورة

النتيجة: نجاح

صورة بصيغة PNG شفافة 
					<img src="png-trans.png" width="165" height="165" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" />

إدراج صورة بدون تحديد الطول والعرض

النتيجة: فشل

ملاحظة: سيحدث سلوك غير متوقع، ففي بعض الأحيان تظهر الصورة بشكل صحيح، وأحيان أخرى يظهر العكس!
صورة بصيغة PNG شفافة 
					<img src="png-trans.png" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" />

إدراج صورة تتمدد بواسطة HTML

النتيجة: نجاح

صورة بصيغة PNG شفافة 
					<img src="png-trans.png" width="400" height="200" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" />

إدراج صورة مع نمط داخل رابط

النتيجة: فشل

ملاحظة: تمددت الصورة، على عكس المتوقع!
صورة بصيغة PNG شفافة 
					<a href="#" onclick="return false;">
						<img src="png-trans.png" width="165" height="165" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" style="border:2px dashed #090;padding:10px;margin:10px;" />
					</a>

إدراج صورة خلفية لرابط تتغير بمجرد مرور الفأرة

النتيجة: نجاح

ملاحظة: لا يتغير شكل الفأرة عند المرور على الصورة، حلها بسيط باستخدام cursor:pointer.
رابط لا يؤدي إلى أي مكان 
				<style type="text/css">
					.link-image-background-hover a
					{
						display:block;
						width: 165px;
						height: 165px;
						background: transparent url(png-trans.png) no-repeat;
					}
					.link-image-background-hover a:hover
					{
						background-color: red;
					}
				</style>
				<a dir="ltr" href="#" onclick="return false;">رابط لا يؤدي إلى أي مكان</a>

إدراج صورة كخلفية متكررة

النتيجة: فشل

ملاحظة: لم يتم تطبيق الشفافية على الصورة!
هذه تقسيمة div تكون صورة PNG شفافة خلفية متكررة لها.
					<div style="height:340px;background: transparent url(png-trans.png) repeat;">هذه تقسيمة div تكون صورة PNG شفافة خلفية متكررة لها.</div>

إدراج صورة كخلفية في أسفل اليمين

النتيجة: فشل

ملاحظة: لم يتم تطبيق الشفافية على الصورة!
هذه تقسيمة div تكون صورة PNG شفافة خلفية لها في أسفل اليمين.
					<div style="height:200px;background: transparent url(png-trans.png) no-repeat bottom right;">هذه تقسيمة div تكون صورة PNG شفافة خلفية لها في أسفل اليمين.</div>

إدراج صورة كعنصر إدخال في نموذج

النتيجة: نجاح



				<form action="" onsubmit="return false;">
					<div>
						<input type="text" class="text" value="مدخل نصي" />
						<br />
						<select>
							<option>قائمة اختيارية 1!</option>
							<option>قائمة اختيارية 2!</option>
						</select>
						<br />
						<input type="image" src="png-trans.png" width="165" height="165" />
					</div>
				</form>

« الرجوع إلى المقال