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

B

babak869

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

متشکرم
 
echessdesign

echessdesign

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

babak869

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

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

echessdesign

مدیر انجمن طراحی وب
بفرمایید
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>
 
6

686868

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

dexted

Active Member
سلام دوست من :)


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

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

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

:rose:
 
kassit

kassit

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

meraj-persian

Active Member
اگه از روش اول میخواید استفاده کنید از کد زیر میتونید استفاده کنید:
[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]
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا