اسکريپت ها – اسکريپت – script – قالب – افزونه – پوسته – پلاگين

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

نتیجه ای که در پایان کار تصمیم داریم به آن دست پیدا کنیم، دقیقا مانند همان حالتی است که در تصویر ابتدای این نوشته به شما نمایش داده شده. کلاس های CSS را نیز به نحوی تنظیم کرده ایم که در صورتی که از یک قالب استاندارد وردپرسی استفاده کنید، به سادگی با کپی و پیست کردن این استایلها در فایل style.css قالبتان میتوانید به نتیجه ی دلخواه دست پیدا کنید.

برای کمرنگ کردن تصویر در هنگام قرار گرفتن ماوس بر روی آن نیاز داریم که opacity آن را تغییر دهیم. برای این کار از کد زیر استفاده می کنیم :

.post img:hover {
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

اگر دقت کرده باشید هوای اینترنت اکسپلورر را هم داشتیم و برای آن هم یک خط استایل نوشته ایم که نمایش تصاویرمان در همه مرورگر ها یکسان باشد. توجه داشته باشید که مقدار کم رنگ شدن تصویر را میتوانید با تغییر مقدار نوشته شده در خط دوم و خط سوم تغییر دهید (مقدار 0.6 و عدد 60) تا نتایج دلخواه حاصل شود.

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

.post img:hover{
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

سرعت تغییر حالت در تصاویر را میتوانید با تغییر زمان 0.5 ثانیه که در کد بالا درج شده تغییر دهید. هرچه این رقم را بالاتر ببرید (مثلا 2s) سرعت نمایش افکت کند تر خواهد شد و زمان بیشتری لازم است منتظر بمانید تا افکت به صورت کامل اجرا شود. حواستان باشد که این عدد 5 بار و برای مرورگر های مختلف در کد بالا تکرار شده است. بنابراین در صورتی که مایلید در آن تغییری ایجاد کنید، حتما هر 5 عدد را تغییر داده و از معادل بودن آنها اطمینان حاصل کنید.

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

.post img {
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

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

در آینده با آموزش های دیگری در زمینه ی کار با CSS در خدمت شما عزیزان خواهیم بود.