var a=0;

  function scrollTop(s)
{
    var b=a+s;
  document.getElementById('dock').scrollTop=b;
  a=b;
    if(b==document.getElementById('dock').scrollHeight) {
        clearInterval(t);
    }

}
  function scrollBottom(s)
{
    var b=a-s;
  document.getElementById('dock').scrollTop=b;
  a=b;
  if(b==0) {
        clearInterval(t);
    }
}

  function goRight(s)
{
t=setInterval('scrollBottom(2);',20);
}
  function goLeft(s)
{
t=setInterval('scrollTop(2);',20);
}
                            

Таблетка, которая успокаивает IE6

Думаю, проблема использования PNG в Internet Explorer 6, уже давно всем известна, а форумы затерты до дыр советами и готовыми решениями. Я не собираюсь опять переливать воду из стакана в стакан. Речь пойдет немного о другом.

Нынче технология Ajax становиться все популярней и все больше и больше разработчиков начинают использовать этот довольно мощный и своеобразный элемент разработки. Недавно, столкнулся с проблемой, которая заключается в использовании Ajax для загрузки и вывода PNG. Казалось бы, и проблемы нет никакой, но IE 6 как всегда испортил жизнь :).

Суть заключается в следующем. Есть <div id="conteyner"> контейнер:

<div id="conteyner">           
 <img id="i141" src="img/portfolio/2008_03_15_19_55_05.png"/>    
 <img id="i142" src="img/portfolio/2008_03_15_19_55_06.png"/>    
 <img id="i143" src="img/portfolio/2008_03_15_19_55_07.png"/>    
lt;/div>

Для борьбы с PNG в IE 6, я использовал следующее решение:

<style>
 img{ behavior:url("/js/pngbehavior.htc"); }      </style>

А вот собственно и сам pngbehavior.htc:

<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" >
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script> var supported = MSIE ((5\\.5)|[6789]).test(navigator.userAgent)
 && navigator.platform == "Win32";
var realSrc; var blankSrc = "/img/blank.gif";
var isPrinting = false;
if (supported) fixImage();
function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
if not set to blank if (!new RegExp(blankSrc).test(src))
 fixImage(); };
function fixImage() { var src = element.src;
if (src == realSrc && /.png$/i.test(src)) {
element.src = blankSrc; return; }
if ( ! new RegExp(blankSrc).test(src)) { // backup old src realSrc = src; }
// test for png if (/\\.png$/i.test(realSrc))
{ // set blank image element.src = blankSrc; //
set filter element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='\" + src + "\',sizingMethod='scale')";} else
 {  remove filter element.runtimeStyle.filter = "\"; } }
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter ="";
realSrc = null; }
function afterPrint(){
isPrinting = false;
fixImage();
}
</script>
</public:component>

Изначально <div> содержит, определенное количество PNG картинок. Естественно при открытии страницы они удачно обрабатываются скриптом и проблем не возникает.

По определенному событию браузера, идет запрос к скрипту PHP на сервере, который генерирует HTML для вывода новых PNG элементов. После ответа сервера посредством JavaScript , происходит изменение содержимого <div id="conteyner">:

document.getElementById('conteyner').innerHTML=
document.getElementById(‘conteyner’).innerHTML+result["html"];
где result["html"], HTML полученый от сервера.

Вот тут меня и ждал подвох. После выполнения данной строки, PNG загруженные и обработанные скриптом пропадали в браузере, а только что вставленные, вполне нормально отображались.

После полторы пачки сигарет и литра кофе, удалось все же разобраться в этой странной ситуации. Причина заключалась в том, что при обработке PNG скриптом pngbehavior.htc, свойство src каждого элемента <img> менялось из «src="/img/portfolio/имя_файла.png» на «src="/img/blank.gif». Файл blank.gif является одно пиксельной прозрачной картинкой, которая иcпользуется для подавления серого фона в прозрачных PNG, скриптом pngbehavior.htc:

element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft."
+"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";

Таким образом, получается, что PNG картинка обработанная с помощью выше приведенного фильтра, фактически является файлом blank.gif, но на самом деле это не так :). Фильтр AlphaImageLoader ложит blank.gif, поверх PNG и при этом подменяет свойство src элемента <img>. Ничего катастрофичного конечно в этом нет, пока не применить к <div id="conteyner"> метод innerHTML. Вот в этом месте и становиться понятно, куда пропадают наши PNG, которые до этого без проблем отображались в браузере. При вызове метода innerHTML, браузер не только выводит сгенерированный сервером HTML, а полностью обновляет <div id="conteyner"> . Естественно, все элементы <img > с src='img/blank.gif' воспринимаються браузером уже не как обработанные фильтром PNG, а как вывод файла blank.gif. Так как у нас blank.gif', это однопиксельный прозрачный файл, создается впечатление исчезновения картинок.

Проблема решается незначительной модификацией pngbehavior.htc:

function fixImage() {
var src = element.src;
if(src==http://+window.location.hostname+"/img/blank.gif")
src=element.getAttribute("ie6");

HTML приводим к следующему виду:

<div id="conteyner">
<img id="i141" src="/img/portfolio/2008_03_15_19_55_05.png"
ie6="/img/portfolio/2008_03_15_19_55_05.png" width="142"/>
<img id="i142" src="/img/portfolio/2008_03_15_19_55_06.png"
ie6="/img/portfolio/2008_03_15_19_55_06.png">
<img id="i143" src="/img/portfolio/2008_03_15_19_55_07.png"
ie6="/img/portfolio/2008_03_15_19_55_07.png" width="142"/>
</div>

Это один из возможных вариантов борьбы с этой проблемой. 

 
 
 
Не пустим.
Вход только для клиентов.