забыл добавить нужна авто прокрутка вертикальная, при наведении мыши что бы останавливалось..
neolord,
спасибо разобрался с эим.. : )
вообщем то выше ******енный код работает.
только поменял в CSS
.gal_img canvas {
position:absolute;
width:170px;
height: 170px;
display:block;
}
.gal_img:hover canvas {
display:none;
и тег <canvas> поставил над картинкой.
eXcluzive добавил 15.06.2009 в 22:37
может кто ещё подскажет скроллинг любого содержимого например картинок, но так что бы сначала содержимое было загружено а потом крутилось просто снизу вверх или наоборот, желательно бесконечно.
neznaika,
она не будет черно белой, получается другой эффект.
а как сделать с jQuery тоже нифига не нашел...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script language="javascript" src="prototype-1.6.0.3.js" type="text/javascript"></script> <style> .gal_img canvas { display:none top:5px; /*Учет паддинга у картинки - сами решайте нужно или нет*/ left:5px; } .gal_img:hover canvas { display:block; //display:none; } </style> </head> <body onload=''> <div id='column'> <div class='gal_img'> <a href="#" rel='lightbox' title=""><img src='mth.jpg' /></a> <canvas></canvas> </div> </div> <script language="javascript"> window.onload=function() { window.onload=function() {return true;} if (window.navigator.appName.indexOf('xplorer')>0) { return false; } $$('#column .gal_img').each(function (x) //здесь мы проходимся по всем блокам с классом .gal_img внутри элемента с идентификатором column. Соответственно можете поправить под нужное вам дерево документа { var cnv=x.down('canvas'); //в этом блоке заранее создан <canvas> var img=x.down('img'); //и там же картинка cnv.style.width=img.offsetWidth+'px'; //ставим размеры canvas cnv.style.height=img.offsetHeight+'px'; cnv.style.backgroundColor='#FF0000'; //ставим его фон grayscale(img,cnv); //вызываем функцию перевода в чб. там ниче трогать не надо. первый параметр - ссылка на исходный объект, а cnv ссылка на canvas } ); } function grayscale(image, canv) { var myCanvas=canv; var myCanvasContext=myCanvas.getContext("2d"); var imgWidth=image.width; var imgHeight=image.height; // You'll get some string error if you fail to specify the dimensions myCanvas.width= imgWidth; myCanvas.height=imgHeight; // alert(imgWidth); myCanvasContext.drawImage(image,0,0); // This function cannot be called if the image is not rom the same domain. // You'll get security error if you do. var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight); // This loop gets every pixels on the image and for (i=0; i<imageData.height; i++) { for (j=0; j<imageData.width; j++) { var index=(i*4)*imageData.width+(j*4); var red=imageData.data[index]; var green=imageData.data[index+1]; var blue=imageData.data[index+2]; var alpha=imageData.data[index+3]; var average=(red+green+blue)/3; average=average/255.0*Math.PI/2; average=Math.round(Math.pow(Math.sin(average),2)*255); imageData.data[index]=average; imageData.data[index+1]=average; imageData.data[index+2]=average; imageData.data[index+3]=alpha; } } myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width, imageData.height); } </script> </body> </html>
Делаю вот так, и все равно не работает...,
идеи?
в Avant"e там фон под картинкой не совпадает..
чет мне не вырвать оттуда этот скрипт, не поможешь? :)
да тут в Ие ваще коряво..: )
спасибо будет как вариант, может у кого ещё есть готовые предложения?
всем спасибо, выполнитель нашелся! : )
MAkSimuZ,
Спасибо, уже разговариваем : )
kxk, у меня до и с момента когда clickhost был отключен несклько дней проблем вообще небыло, вот первый раз сегодня )
alukart,
да нет не все так плохо, уже подняли )
