Сегодня вечером для портфолио решил накатать простенький(Как мне показалось скрипт) но столкнулся с проблемой. Для начала вот сам скрипт и html разметочка.
<!DOCTYPE html>
<html>
<head>
<script>
function zebra_animate(img_src){
var i=0;
var zebrawidth=screen.width/20;
var html="";
while(i<20){
html+='<div class="zebra" style="position:fixed; top:0; z-index:'+(1*i)+'; left:'+(zebrawidth*i)+'px; width:'+zebrawidth+'px; height:'+screen.height+'px"><img src="'+img_src+'" style="position:fixed; top:0;"/></div>';
i++;
}
document.write(html);
}
</script>
<style>
.zebra{float:left;border: inset 1px black;}
</style>
</head><body>
<A Href="javascript:window.external.AddFavorite
('http://kimsite.narod.ru','Все для web-мастера')">
Добавить в Избранное</A>
<script>
zebra_animate('http://gallery.sevstar.net/bPIC/201202/201202378908.jpg');
</script>
</body></html>
Смысл всего кода в том что бы создавать картинки которые должны были бы дружно выстраиваться друг за дружкой показывая определённую часть одной картинки. (Планировал в будущем сделать красивую анимацию всего этого) Думал использовать отрицательное позиционирование, z-index но не вышло. Не подскажете, в чём же моя ошибка?