PNG Transparent در IE6 ؟

[raravaice]

سلام

هدف : جای گزاری یک تصویر PNG به عنوان BackGround
من مشکل عکسهای PNG شفاف رو با کد زیر تو CSS حل میکنم :



.Err
{
background-image: url( '../img/desk/Err.png' );
background-repeat: no-repeat;
/filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='img/desk/Err.png', sizingMethod='crop');
/background-image:none;
height:15px;
width :15px;
float :right;
margin-left:5px;
}


نکته مبهم :
اگر من بخوام احیانا از repeat و position استفاده کنم توی filter های IE چطور این عمل انجام میشه؟

مشکل :
کلیه تگهایی که داخل تگ مذکور قرار میگیرند عملا کار نمیکنن و غیر فعال هستند انگار این فیلتر به صورت شفاف اومده روی اونا قرار گرفته و غیر فعالشون کرده!!!!

راه حل ؟...

[ehsan2007]

عکس png روی مرورگر میکروسافتrepeat نمیشه
مثلا این کدو ببین

style="
position:absolute;left:0;z-index:-1;width:100%;height:100%;filter:progid:DXImageTran sform.Microsoft.AlphaImageLoader(src='image/overlay_25x25.png',sizingMethod="scale");
"></div></div>
sizingMethod=&quot;scale&quot
این کدکاری میکنه که عکس شما هم به صورت عمودی و هم افقی repeat میشه ولی اگه کد بالارو بگزارید توی هیچ مرورگر دیگه ای به جز ie کار نمیکنه عکستونو یعنی نشونش نمیده
ولی دو را هست که نشونش بده
یکیشو میگم برات این کد پایینو نگاه کن

if (window.attachEvent) {window.attachEvent("onload", alphaBackgrounds);}function alphaBackgrounds(){var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);for (i=0; i<document.all.length; i++){var bg = document.all[i].currentStyle.backgroundImage;if (itsAllGood && bg){if (bg.match(/\.png/i) != null){var mypng = bg.substring(5,bg.length-2);document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='"+mypng+"', sizingMethod='crop')";document.all[i].style.backgroundImage = "url('')";}}}}

این کد جاوا توی صفحه شما میگرده و عکسهای png شمارو دارای فیلتر میکنه برای مرورگر ie و همچنین دیگه مشکلی برای مرورگرهای دیگه پیش نمیاد
یعنی شما بکگراند جدول خودت به همون صورتی که عکسهای دیگه رو میگزاری عکس png رو میگزاری و سپس کد جاوای بالا اون عکسهارو خودش دارای فیلتر میکنه
تمامیه اون عکسهایی که میخوای با فیلتر میکروسافت کار کنن رو هم توی خود صفحه میگزاری یعنی با فایل css الحاق نمیکنی به صفحه
موفق باشی دوست عزیز

[raravaice]

خوب این مشکل اول که مشخص شد من نمیتونم از position و repeat برای بک گراند المانهام استفاده کنم.
اما میمونه مشکل دوم که :



کلیه تگهایی که داخل المان مذکور قرار میگیرند عملا کار نمیکنن و غیر فعال هستند انگار این فیلتر به صورت شفاف اومده روی اونا قرار گرفته و غیر فعالشون کرده!!!!
آیا این راه حلی داره؟

موفق باشید

[ehsan2007]

اگه از کد جاوایی که گذاشتم استفاده کنید دیگه نیازی به فیلتر نیست
یعنی کدتون میشه این

.Err
{
background-image: url( '../img/desk/Err.png' );
height:15px;
width :15px;
float :right;
margin-left:5px;
}

[raravaice]

if (window.attachEvent)
{
window.attachEvent("onload", alphaBackgrounds);
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++)
{
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){if (bg.match(/\.png/i) != null)
{
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='"+mypng+"', sizingMethod='crop')";
document.all[i].style.backgroundImage = "url('')";
}
}
}
}


سلام

احسان جان شما توی کد جاوا اسکریپت داری از filter استفاده میکنی پس به هر حال داری فیلتر رو اعمال میکنی پس مشکل دوم همچنان به قوت خودش باقیه ولی من میخوام یه جوری به مشکل دوم قلبه کنم آیا امکانش هست؟

این سورس فقط تنها کاری که میکنه اینه که کار رو راحت میکنه و PNG هارو خودش تشخیص میده و صورت فیلترش رو برای IE پیاده میکنه.

موفق باشید

[ehsan2007]

مشکل :
کلیه تگهایی که داخل تگ مذکور قرار میگیرند عملا کار نمیکنن و غیر فعال هستند انگار این فیلتر به صورت شفاف اومده روی اونا قرار گرفته و غیر فعالشون کرده!!!!


مگه مشکل دوم شما اینکه نیست که وقتی فیلترو میگذارید بقیه کدها کار نمیکنه
و برای رفع این مشکل همون طوری که گفته بودم
این شکلی کدرو میگذاری یعنی همون طوری که بقیه عکسهارو میگذاری برای پشت زمینه


.Err
{
background-image: url( '../img/desk/Err.png' );
height:15px;
width :15px;
float :right;
margin-left:5px;
}

و در اخر هم اون کدجاوارو قرار میدی
توی صفحه تمامیه کدهای شیوه نامه شما که عکسpng داره باید توی خود صفحه کد باشه نه اینکه بهش الحاق بشه
موفق باشی اگه بازم حل نشد ایدیم پیام بده

[raravaice]

آها.
پس من مسئله رو بد بیان کردم چون مشکل با Css نیست و همونطوری که گفتم مسئله بک گراند رو با Css بدون هیچ درد سر و سورس اضافه حل کردم.

شما یه div در نظر بگیر.
BackGround این div رو با فیلتر با یه عکس Png پر کردی.

حالا شما داخل این Div و اون قسمتی که با عکس پر شده هر چیزی که قرار بدی کار نمیکنه مثلا یه لینک ، شما دیگه نمیتونی روی اون لینک یا هر یک از عناصر Input کاری انجام بدی.

مثلا :



<div style="filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='1.png', sizingMethod='crop')"><a href="test.htm">test</a></div>


فکر کنم حالا موضوع روشن شد

موفق باشید

[ehsan2007]

اینم از دردسرهای مرورگر میکروسافته شما هر جا از تگ <a></a> استفاده کنید روی عکس png که شیشه ای باشه کار نمیکنه و برای رفع این مشکل اینکارارو باید با تگ <a>
بکنید یک مثال پایین میزنم بقیشو خود شما باید انجامش بدید


#MainMenua:link
{
display: block;text-decoration: none;font-family: Tahoma;font-size: 11px;color: #666666;
}
#MainMenua:visited
{
display: block;text-decoration: none;font-family: Tahoma;font-size: 11px;color: #666666;
}
#MainMenua:hover {font-family: Tahoma;font-size: 11px;BORDER-TOP: #4c4f4c1pxsolid; PADDING-BOTTOM: 4px; CURSOR: pointer; color: #bec0c2; PADDING-TOP: 1px; BORDER-BOTTOM: #4c4f4c1pxsolid; BACKGROUND-COLOR: #3a3a35;}

توی کد بالا هر جای id با نام
#MainMenu
باشه به روی عکس png کار میکنه میتونی اسم id حذف کنید تا برای کل صفحه اینجوری کار کنه
یک کد دیگه هم دار تگ a که اگه درست یادم باشه کد a:active

امیدوارم مشکلت حل بشه دوست عزیز

[raravaice]

سلام

مرسی از پیگیریت احسان جان.
ولی ای کاشک اول تست میکردی این کدها رو تا هم منظور منو متوجه بشی هم بلکه راه حلی تونستیم با اختلاف نظر براش پیدا کنیم.
1. مشکل فقط تگ <a> نیست
2. من تو کدهای شما اول فکر کردم با display:block این مشکل حل میشه که نشد.

راه حلی که تونستم برای این امر پیدا کنم اینه که باید به المان داخلی تگ مذکور بعد سوم رو اختصاص بدم که تو محور z ها بیاد بالا تر قرار بگیره.


<div class ="Ok" >
<input id="Text1" type="text" style="position: absolute; z-index: 0;"/>
</div>

اگر توی مثال بالا style المان input رو برداری توی div از جایی که فیلتر شروع شده تا پایان عکس المان غیر فعال هست ولی اگه style رو با خاصیت های گفته شده بزاری هیچ مشکلی پیش نمیاد.

موفق باشید

[ehsan2007]

منظورتو درستی متوجه نشدم
شاید شما به صورت لایه لایه با عکسهای و div کار میکنی
و برای این کار از همون z-indexباید استفاده کنید هر لایهای که میخوای پایینتر باشه باید z-index کمتر باشه
این صفحرو نگاه کن شاید متوجه بشی
http://irking.qsh.es/default2.aspx
روی جزئیات بیشتر کلیک کن
هر بار که صفحه میاد بالا z-index دیوهای قبلی کمتر میشه
به ایدیم پم بده اگه حل نشد
eshgh_love_2007@yahoo.com

[maryam_272]

راستش من یک سری آیکون دارم که پسوندش png هست و دارای بکگراند transparent هست که در ie6 بک اون رو خاکستری نشون میده در help .net سرچ کردم همینطور در سایتهای مختلف گفتن که از

filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='MainMenuHighlight.png', sizingMethod='scale');" استفاده کنم اما وقتی این style رو برای img میذارم پیغام خطا میده به این صورت
the property is marked invalid because its not supported by the current schema
حالا برای اینکه این اشکال رفع بشه چکار کنم
لطفا راهنماییم کنید.

[raravaice]

/filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='img/desk/Err.png', sizingMethod='crop');



از صحیح بودن فرمت دستور اطمینان حاصل کنید.
از / استفاده کنید تا استایل مورد نظر تنها در ie6 اعمال شود.

موفق باشید

[maryam_272]

من دقیقا از خط برنامه شما هم استفاده کردم باز هم همون error رو داد در ضمن میشه بیشتر در مورد این خط برنامه توضیح بدید می خوهم بدونم چطوری عمل می کنه همینطور اگه بهم بگید آدرس عکس img/desk/Err.png مربوط به چیه ممنون میشم

[raravaice]

شما داری یج جای کار اشتباه میکنی!
اون چیزی که نوشتید را اینجا بزارید تست بشه.
احتمالا یه تگ را درست نمیبندید.

img/desk/Err.png همون مسیر عکس هست.

موفق باشید

[maryam_272]

سلام
ممنونم که به من لطف می کنید و سوالم را پیگیری می کنید
راستش من همیشه واسه اینکه دچار اشتباه کمتری بشم همیشه توی sharepointe تگهامو چک می کنم واسه این تگ هم فقط یک image به صفحه اضافه کردم اما کل کدم توی sharepointe اینه
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>

<p>
<img alt="" src="Album.png" width="128" height="128" style="/filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='Album.png', sizingMethod='crop');" /></p>

</body>

</html>

که توی sharepoint زیر filter یک خط قرمز میکشه و پیغام خطایی که گفته بودم رو میده
و وقتی هم اجرا میکنم توی ie6 transparentesho خاکستری نشون میده
ممنون میشم کمکم کنید.

[raravaice]

که توی sharepoint زیر filter یک خط قرمز میکشه و پیغام خطایی که گفته بودم رو میده
این مسئله مهمی نیست چون filter واقعا جزء استاندارد نیست.


و وقتی هم اجرا میکنم توی ie6 transparentesho خاکستری نشون میده
AlphaImag eLoader چرا بین این دو فاصله هست؟
AlphaImageLoader درسته.

به جای crop از scale هم میتونید استفاده کنید. به نظر همه چیز مرتب میاد.

اینم ببین. http://koivi.com/ie-png-transparency

موفق باشید

[maryam_272]

من AlphaImageLoader رو بدون فاصله نوشتم و همه حالتها رو هم امتحان کردم اما جواب نداد البته الان با تایع جاوا تونستم مشکلم رو حل کنم
ممنون از راهنماییتون
کد صفحم هم اینه
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 20</title>
<script language="javascript" >
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage)
{
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgTitle = (myImage.title) ?
"title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + myImage.width
+ "px; height:" + myImage.height
+ "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader"
+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
</script>
</head>
<body>
<p>
<img src="Album.png" alt="foo" width="128" height="128" onload="fixPNG(this)" />
</p>
</body>
</html>

[maryam_272]

میشه بیشتر درباره jquery pngFix توضیح بدید