قطعه کد جاوا اسکریپت برای 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
موفق باشید؛
حمید رضا نیرومند
.
- مطالب مرتبط:
- مجموعه كدهای زیبای جاوا همراه با امكان تست آفلاین
- چگونه با جاوا اسکریپت، ساعت سرور را نمایش دهیم؟ (How to show server time with javascript)
- شخصی برای خوش آمدگویی به بازدیدكنندگان سایت یا وبلاگ شما!
- 10 کد جاوا اسکریپت برتر طراحی popup در حالات مختلف
- آموزش ساخت Infobar (نوار پیغام) در بالای وبلاگ و وبسایت
- ایجاد اسکرول بارهایی با رنگها و شمایل مختلف تنها با چند کلیک موس! (معرفی Yaldex Colored ScrollBars 2.0)
- ------------
- قطعه کد جاوا اسکریپت برای تنظیم dir فیلد در حین تایپ
- قطعه کد جاوا اسکریپت برای جدا کردن سه رقم اعداد با کاما
- نمایش و مخفی کردن عناصر صفحه وب هنگام قرارگیری موس روی یک عنصر با استفاده از CSS
- 10 کد جاوا اسکریپت برتر طراحی popup در حالات مختلف
- صحبتی در مورد انواع اعمال کدهای CSS به عناصر و Override کردن استایلها
ارسال سؤال یا نظر
1- هم وطن:
بوسیله: , در: Sunday, 2012 October 07-کد: 5024
اخه قبل اینکه کد رو بزارید خودتون امتحان کنید ببینید کار میکنه یا نه...........
بین تگ haedهزار تا کد وجود داره دقیق بگید کدوم قسمتش که همه بتونن بفهمنن هزار بار امتحان کردم هر کجای قالب که بگید گذاشتم کار نمیکنه حسابی کفرمو در اورده......