Форум Сайтостроение Веб-строительство

картинка из черно-белой в цветную

12
E
На сайте с 12.03.2008
Offline
30
eXcluzive
#11

neznaika,

она не будет черно белой, получается другой эффект.

а как сделать с jQuery тоже нифига не нашел...

иногда так страшно, проснуться взрослым однажды
S2
На сайте с 07.01.2008
Offline
611
Str256
#12
eXcluzive:
надо что бы эта процедура была на одной картинке а не одна заменяла другую

А почему флэшку не сделать. Туда загрузить 2-е картинки и событие при наведении.

Не надо приписывать мне свои выводы, я имею ввиду только то, что написал. Лучшая партнёрка по футболкам/толстовкам (http://partnerka.kolorado.ru/?ref=1921540) Опрос: Проверить текст на уник - как? (/ru/forum/495885)
[Удален]
#13
eXcluzive:

<!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>


Делаю вот так, и все равно не работает...,
идеи?

выложите это куда нибудь и дайте мне ссылку, если сами не можете пройтись firebugом

Я бы для начала ссылки к скрипту и к картинкам прописал по человечески - "./" или от корня хоста

neolord добавил 15.06.2009 в 15:59

neznaika:
Что мешает показывать картинку с "серой палитрой", а потом средствами JS менять её с прозрачностью на цветную? Затраты на вес картинок минимальны, учитывая офигенный вес прилагающихся костылей.

прилагающиеся костыли весят 70 килобайт. А если чуть чуть знать яваскрипт можно обойтись без прототипа и весить это все будет лишних 15 кб - две/три превьюшки.

E
На сайте с 12.03.2008
Offline
30
eXcluzive
#14

neolord,

спасибо разобрался с эим.. : )

вообщем то выше ******енный код работает.

только поменял в CSS

.gal_img canvas {

position:absolute;

width:170px;

height: 170px;

display:block;

}

.gal_img:hover canvas {

width:170px;

height: 170px;

display:none;

}

и тег <canvas> поставил над картинкой.

eXcluzive добавил 15.06.2009 в 22:37

может кто ещё подскажет скроллинг любого содержимого например картинок, но так что бы сначала содержимое было загружено а потом крутилось просто снизу вверх или наоборот, желательно бесконечно.

[Удален]
#15

Ну вы прям мне на пятки наступаете

Откройте ссылку из моего первого ответа в топике и выйдите на уровень выше

Можно пристроить/обустроить как угодно

Общий смысл примитивен - внешний div с position:absolute и overflow:hidden, и внутренний с position:relative и огромной ширины. Его просто двигаем и все

Скрыть важный для поисковиков Разве overflow: hidden; влияет CPA сеть AdmitAd.com |
E
На сайте с 12.03.2008
Offline
30
eXcluzive
#16

забыл добавить нужна авто прокрутка вертикальная, при наведении мыши что бы останавливалось..

[Удален]
#17

и что сложного? =)

window.onload=setInterval(function()

{

if (window.noScroll) return false;

$('some_div').style.top=parseInt($('some_div').style.top)+5+'px';

},100);

Event.observe($('some_div'),'mouseover', function() {window.noScroll=true});

Event.observe($('some_div'),'mouseout', function() {window.noScroll=false} );

Дальше сами допилите наверное

E
На сайте с 12.03.2008
Offline
30
eXcluzive
#18

нужно нечто

<marguee behavior="scroll" align="top" direction="up" height="300" scrollamount="2" scrolldelay="50" onmouseover='this.stop()' onmouseout='this.start()'>текст</marguee>

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

eXcluzive добавил 15.06.2009 в 23:25

neolord,

в java script не силён..от помощи не откажусь : )

eXcluzive добавил 16.06.2009 в 02:13

нашел решение, с полным описанием, если кому пригодится

http://codeguru.ru/web/javascript/samples/text-scrolling/%D0%B2%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9-%D1%81%D0%BA%D1%80%D0%BE%D0%BB%D0%BB%D0%B5%D1%80-%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE-%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE.html

12

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