Форум Практика оптимизации Любые вопросы от новичков по оптимизации

Прозрачность, fix`сы png, jquery

S
На сайте с 28.11.2009
Offline
23
suxar
358

Привет, помогите решить проблему!

1. Нужно чтобы было видно png в ie6, ie7, ie8 и этот png - ссылка

2. Есть кнопка которая должна затухать при нажатии на ссылку, но не все кнопки-png должны затухать, а именно та, которая в классе .logo2 ?

Ещё, очень нужно, чтобы код проходил валидацию, в firefox и opere все более или мение хорошо, а в ie 6,7,8 - картинки выглядят как gif, к тому же скрипт странно работает, медленно загружается страница... Это я переживу, а вот 1, 2 вопросы терзают душу. Кто знает другие рабочие fix`сы или хаки к png, я не откажусь. Главное чтобы все работало и лучше чем сейчас у меня. 


-------------------------pngfix.js-------------------

var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])

 

if ((version >= 5.5) && (document.body.filters))

{

for(var i=0; i<document.images.length; i++)

{

var img = document.images

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

{

var imgID = (img.id) ? "id='" + img.id + "' " : ""

var imgClass = (img.className) ? "class='" + img.className + "' " : ""

var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

var imgStyle = "display:inline-block;" + img.style.cssText

if (img.align == "left") imgStyle = "float:left;" + imgStyle

if (img.align == "right") imgStyle = "float:right;" + imgStyle

if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

var strNewHTML = "<span " + imgID + imgClass + imgTitle

+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

+ "filterrogidXImageTransform.Microsoft.AlphaIma geLoader"

+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

img.outerHTML = strNewHTML

i = i-1

}

}

}

 

 

--------------------------Код html----------------------------

!--[if lt IE 7]><!-->

<script defer type="text/javascript" src="pngfix.js"></script>

<!--<![endif]-->

 

<script type="text/javascript">

$(document).ready(function(){

var n=5;

for(i=1; i<=n; i++){

$(".logo"+i).click(function () {

$(this).fadeTo("slow", 0.33);

});

}

});

</script>

 

 

</head>

 

<body>

 

<!-- Begin Wrapper -->

<div id="wrapper">

 

<!-- Begin Header -->

<div id="header">

 

<div class="logo1"><a href="about.php"><img src="nas.png" width="120" height="76" alt="a PNG logo" /></a></div>

 

<div class="logo2"><a href="#"><img src="comp.png" width="182" height="76" alt="a" /></a></div>

<div class="logo3"><a href="done.php"><img src="created.png" width="172" height="76" alt="d" /></a></div>

<div class="logo4"><a href="serv.php"><img src="serv.png" width="119" height="76" alt="do" /></a></div>

<div class="logo5"><a href="kontakts"><img src="kontakts.png" width="198" height="76" alt="s" /></a></div>

</div>

 

-----------------------Файл.css---------------------------------

.logo1, .logo2, .logo3, .logo4, .logo5 { position: absolute; }

.logo1 a, .logo2 a, .logo3 a, .logo4 a, .logo5 a {text-indent:-99999px; overflow:hidden; display:block;}

.logo1 { top:270px; left:320px;}

.logo1 a { width:120px; height:76px; }

.logo2 { top:275px; left:510px;}

.logo2 a { width:182px; height:76px; }

.logo3 { top:340px; left:210px;}

.logo3 a { width:172px; height:76px; }

.logo4 { top:340px; left:435px;}

.logo4 a { width:119px; height:76px; }

.logo5 { top:350px; left:610px;}

.logo5 a { width:198px; height:76px; }
Создание сайта (http://dsugar.com.ua), дизайн, программирование.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий