سیاه و سفید کردن عکس

babak869 · Oct 7, 2007

با سلام
من یه سایت دیدم که از عکسها بصورت Thumbnail (بند انگشتی ) استفاده کرده بود و وقتی موس رو روی هرکدوم میبردی رنگ زمینه عکس به سیاه و سفید تغییر میکرد . یعنی با قرارگرفتن موس روی عکس اون عکس بیرنگ و سیاه و سفید میشد.
از دوستان میتونن راهنمایی کنند چطور میشه این کار رو کرد؟

متشکرم

echessdesign · Oct 7, 2007

درود بر شما
این روشی که شما فرمودید از دو راه امکان پذیر است:
1- یک عکس رنگی داریم، زمانی که موس بر روی عکس می رود عکس دومی که سیاه و سفید است ظاهر می شود.
2- شما یک عکس رنگی دارید، زمانی که موس بر روی عکس می رود، Style Filter به اون می دهیم که عکس رو سیاه سفید کند (در حال حاضر این روش تنها در IE امکان پذیر است).
شما کدام روش را در نظر دارید؟
نیاز به کد های آنان نیز دارید؟
پاینده باشید.

babak869 · Oct 7, 2007

سلام
از پاسختون ممنونم. فکر میکنم روش دوم باشه اما اینکه فقط در اینترنت اکسپلورر قابل اجراست رو نمیدونم . اگه ممکنه کد روش دوم رو محبت کنید بزارید تا استفاده کنم

ممنونم . موفق باشید

echessdesign · Oct 7, 2007

بفرمایید

HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Page 5</title>
<style type="text/css">
 a img {
width:200px;
height:50px;
text-decoration:none; border:none;
}
a:hover img {
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1, xray=0, mirror=0, invert=0, opacity=1, rotation=0)
}
</style>
</head>

<body>
<a href=""><img src="logo1.jpg" width=200px height=50px alt="" /></a>
</body>

</html>

686868 · Dec 15, 2012

سلام و متشکر به خاطر اموزشتون .. من میخوام روش بالا رو بصورت برعکس انجام بدم .. یعنی عکس ما ابتدا بصورت سیاه و سفید هست و وقتی که میریم روش رنگی بشه .. باید کد مربوطه رو به خود کس بدم یا hover اش ؟؟ هر کاری میکنم نمیشه ؟!!

dexted · Dec 15, 2012

سلام دوست من

شاید راه بهتری هم داشته باشه ولی من توی یک سایت دیده بودم که این کار رو کرده بود (http://www.inncomum.com/#inncomum)
روش کار به این صورت هست که شما باید برای این کار هر دو تصویر سیاه سفید و رنگی رو داشته باشید و در هنگام hover یکی رو به دیگری تبدیل کنید. یعنی تا اونجایی که یه کم گشتم نمیشه از سیاه سفید به رنگی کاری کرد.

شاید یک راه دیگه این باشه که از همون اول برای عکس این فیلتر رو اجرا کنید. سپس با کد کاری کنید که وقتی hover شد دیگه عکس از فیلتر استفاده نکنه (فکر میکنم بهتره با اسکریپت انجام بدین این کار رو)

البته همون طور که گفته شد این کار فقط در IE امکان پذیر هست . پس راه بهتر همون راه اول هست.

:rose:

kassit · Jan 21, 2013

در مورد شما تنها راه حل داشتن دو عکس مجزا، یکی سیاه سفید و یکیه رنگیه

farik · Jan 24, 2013

باسلام..
این کد رو با یک گوگلینگ پیدا کردم..تست مکردم..ولی جالب اومد به نظرم..امیدوارم به کارتون بیاد:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
البته اینم هست که با convas نوشته شده:http://www.ajaxblender.com/article-sources/jquery/convert-image-grayscale/index.html
موفق باشید..

meraj-persian · Jan 24, 2013

اگه از روش اول میخواید استفاده کنید از کد زیر میتونید استفاده کنید:
[HTMLS]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>test</title>
<style type="text/css">
#img1{
background-image:url('Color Photo');
width:500px;
height:500x;
}
#img1:hover{
background-image:url('Black White Photo');
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;

}

</style>
</head>

<body>
<div id="img1"></div>
</body>

</html>

[/HTMLS]