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

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

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

Неподскажете скрипт который делает цветную картинку в черно-белую, а при наведении мыши обратно в оригинал? надо что бы эта процедура была на одной картинке а не одна заменяла другую. 


<a href="#" style="filter:gray()" onmouseover="this.style.filter='none'" onmouseout="this.style.filter='gray()'">

фильтры то работает но не в мозиле.., у кого есть скрипт, поделитесь :smoke:

иногда так страшно, проснуться взрослым однажды
[Удален]
#1

http://oda-stroy.ru/production/doma/5/

как тут?

Можете оттуда и выдрать исходный код.

Только в ие не работает, так что в ие придется воспользоваться фильтрами либо скачать excanvas

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

да тут в Ие ваще коряво..: )

спасибо будет как вариант, может у кого ещё есть готовые предложения?

[Удален]
#3

canvas думаю поможет

[Удален]
#4
eXcluzive:
да тут в Ие ваще коряво..: )
спасибо будет как вариант, может у кого ещё есть готовые предложения?

Там в ие вообще ничего не происходит, что там корявого-то. И это уже готовый вариант, вы не находите? Осталось только сохранить код и изменить пару строк.

bearman:
canvas думаю поможет

Он и есть =)

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

neolord,

в Avant"e там фон под картинкой не совпадает..

чет мне не вырвать оттуда этот скрипт, не поможешь? :)

[Удален]
#6

Avant работает на движке IE, так что не знаю как он вообще там работает.

А че ж не помогу, это ж я делал)

Правда он использует prototype так что придется и его подключить. А так открываете исходный код страницы, там на 71 строке стоит блок <script>

Вот вся его начинка это и делает. нюанс в чем:


$$('#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
	}
);

А все остальное сделано в css


.gal_img canvas
{
display:none
top:5px; /*Учет паддинга у картинки - сами решайте нужно или нет*/
left:5px;
}
.gal_img:hover canvas
{
display:block;
//display:none;
}

В ие этот canvas и не появится

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


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

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

идеи?

dedalx
На сайте с 17.03.2008
Offline
63
dedalx
#8

Сделайте через эффекты в jQuery, там во всех браузерах работает.

-МОЙ Скрипт портала Flash игр с автонаполнением (/ru/forum/733320) -МОЙ Скрипт адалт портала с продажей онлайн видео (платник) (/ru/forum/733327)
[Удален]
#9
dedalx:
Сделайте через эффекты в jQuery, там во всех браузерах работает.

подробнее?

neznaika
На сайте с 28.06.2006
Offline
356
neznaika
#10

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

Дорого покупаю настоящие сайты. Не инвестирую деньги и не беру кредиты.
12

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