قطعه کد جاوا اسکریپت برای fade کردن عکس هنگام قرار گیری موس روی آن (on mouse over fade image)

یکی از جالب‌ترین جلوه‌های ویژه برای عکس‌ها، پر رنگ شدن و کم رنگ شدن آن (در اصطلاح، Fade شدن آن) هنگام قرار گیری موس روی آن است.

اگر دنبال یک قطعه کد جاوااسکریپت خوب و بدون نقص می‌گردید که در همه مرورگرها اجرا شود، می‌توانید از قطعه کدی که در این صفحه به کار رفته است استفاده کنید:

http://tutorials.aftab.cc/web/javascript/onmouseover_fade_image

پس از رفتن به صفحه بالا، از منوی View گزینه view source را کلیک کنید تا کدهای صفحه مشاهده شود.

کد دو بخش دارد:

یکی تگ script که بهتر است بین تگ head کپی کنید.

بخش دوم، فراخوانی‌های توابع است:

<img src="http://img.aftab.cc/news/90/non-closed_cases.jpg" border="0"
style="filter:alpha(opacity=40); -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4;"
onMouseOver="zxcBAnimator('opacity#',this,40,100,1000,[100,1]);"
onMouseOut="zxcBAnimator('opacity#',this,40,100,1000,[100,1]);" />

بخش style باعث می‌شود که عکس، در همان ابتدا، کمرنگ شود.

بخش onMouseOver تابعی را فراخوانی می‌کند که باعث می‌شود به محض قرار گیری موس روی عکس، آن عکس پررنگ شود.

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

 

شما هر چند عکس که در صفحه دارید، مهم نیست، فقط کافی‌ست این سه بخش را به تگ img عکس‌هایتان اضافه کنید.

 

 

اگر قصد دارید با قرار گرفتن یک لینک، یک عکس ظاهر شود:

در این حالت، باید بخش style را به عکس مورد نظر بدهید و یک id نیز برایش در نظر بگیرید.

حالا بخش دوم و سوم را در بین صفات لینک یا هر عنصر دیگری بدهید که قصد دارید با قرارگیری موس روی آن، این عکس ظاهر شود. فقط به جای this باید داخل سینگل کوتیشن، آی.دی عکس مورد نظرتان را بنویسید.

به این مثال دقت کنید:

<img src="http://img.aftab.cc/news/90/non-closed_cases.jpg" border="0" id="pic1"
style="filter:alpha(opacity=40); -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4;" />

 

<p onMouseOver="zxcBAnimator('opacity#','pic1',40,100,1000,[100,1]);"
onMouseOut="zxcBAnimator('opacity#','pic1',40,100,1000,[100,1]);">Down with England</p>

در این مثال، یک پاراگراف داریم که داخل آن عبارت Down with England نوشته شده است. با قرارگیری موس روی آن عبارت، عکس بالا پررنگ خواهد شد.

نمونه‌ای از این کد در این آدرس قابل مشاهده است:

http://savehsara.aftab.cc/up/up_sa.htm

موفق باشید؛
حمید رضا نیرومند

.

ارسال سؤال یا نظر

---

1- هم وطن:
بوسیله: , در: Sunday, 2012 October 07-کد: 5024
اخه قبل اینکه کد رو بزارید خودتون امتحان کنید ببینید کار میکنه یا نه...........

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