mouseover fade effect with Jquery

بمعني أنه عند تمرير الماوس علي الصورة فإنها تفوم بالإختفاء ثم تظهر مره أخري

لمشاهدة المثال إضغط هنا

الاشياء المستخدمة :
1.فوتوشوب
2.محرر النص (notepad)
من ناحيتي انا استخدم notepad++
3.CSS
4.Jquery

أولا قم بفتح برنامج الفوتوشوب ثم قم بعمل تأثير علي الصوره المراد عرضها بحيث يكون عندك صورتين واحده ملونه والأخري بدون ألوان

عن طريق عمل Image>>mode>>grayscale>>ok

افتح صفحة جديد بال notepad او textpad اوال dreamweaver
اللي يعجبك
اكتب الكود التالي

[html] < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">// <![CDATA[
mce:0
// ]]></script> <!– مكان مكتبة الجي كويري –>

[/html]

ضفنا مكتبة الجي كويري هذا هوا كود الوظيفة (function)

[html] <script type="text/javascript">// <![CDATA[
mce:1
// ]]></script>
[/html]

هذا الكود سهل كما تري والأن ما عليك إلا أن تقوم بإضافة هذا الكود
كود css

[html] <!– .fade { position: relative; } img.gray { position: absolute; left: 0; top: 0; z-index: 10; } img.color { position: absolute; left: 0; top: 0; } –>
[/html]

كود ال body

[html] [/html]

والأن أتركك مع الكود كاملا:

[html] < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">// <![CDATA[
mce:2
// ]]></script>
www.3need.net

[/html]