طريقه Fade كردن عكسها با استفاده از جاوا اسكريپت

مطمئنا خيلي دوست داريد كه صفحات پويا و جذابي را خلق كنيد. من هم سعي خواهم كرد كه ترفندهايي كه براي اين كار وجود دارند را تا جايي كه بدانم و بدستم برسد را در سايت قرار دهم تا شما دوستان هم از آن استفاده كنيد. يكي از كارهاي جالي كه شما براي زيباتر شدن سايتتان ميتوانيد انجام دهيد Fade‌ كردن عكسها است. اين كار باعث ميشود كه در بازديد كنند حس لطافت و نرمي تداعي شود كه باعث راضي بودن بازديد كننده از سايت شما ميشود. در زير يك نمونه از همين كار را مشاهده ميكنيد.

◊ حداقل نيازها ◊

امكان Transparent كردن عكسها از Internet Explorer 5‌ به بعد به آن اضافه شد . بنابراين بازديد كننده شما بايد حتما از مرورگر Internet Explorer و با نسخه 5 به بالا به سايت شما متصل شود در غير اين صورت عكس به حالت عادي خود نمايش داده ميشود.

◊ آموزش  ◊

براي اجراي اين آموزش شما دو روش را ميتوانيد در پيش بگيريد . اول آنكه كد جاوا اسكريپت آنرا در خود فايل قرار دهيد و دوم آنكه آنرا در يك فايل جاوا اسكريپت خارجي قرار دهيد. حالا من هر دو راه را توضيح ميدهم.

در ابتدا كد جاوا اسكريپ زير را كپي برداشته و در يك فايل Text قرار دهيد.

nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); /* object - image to be faded (actual object, not name); * destop - destination transparency level (ie 80, for mostly solid) * rate - time in milliseconds between transparency changes (best under 100) * delta - amount of change each time (ie 5, for 5% change in transparency) */ function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ //do this so I can take a string too setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } }

حالا چنانچه ميخواهيد آنرا در يك فايل جداگانه ذخيره نماييد و در صفحه خود آنرا فراخواني نماييد، آنرا به نام picfader.js ذخيره كنيد و سپس در صفحه خود قبل از تگ </head> كد زير را قرار دهيد:

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" SRC="picfader.js"></SCRIPT>

و اگر مايليد كه كد جاوا اسكريپت را مستقيما در صفحه خود قرار دهيد كافي است همان كدي را كه كپي برداشتيد و در يك فايل متني چسبانده ايد را دوباره كپي برداريد و قبل از تگ </head> درون دو تا تگ <script> و </script> قرار دهيد.

حالا برايfade كردن عكس هم دو حالت وجود دارد يك حالت زماني كه ماوس بر روي عكس رفت و عكس به تنهايي محو شود يا اينكه زماني كه عكس بر روي يك لينك رفت آنگاه عكس محو شود. در هر دو راه روش كار يكي است اما فقط يك تغيير كوچو بايد بدهيد.

اگر ميخواهيد كه زماني كه ماوس بر روي عكس رفت آن محو كد زير را در تگ <img> خود قرار دهيد:

style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,50,20)" onMouseOut="nereidFade(this,30,50,5)"

در اين كد در قسمت اول يعني style مقدار محو شدن عكس يا همان opacity  را مشخص ميكنيد در قسمت دوم كه با onMouseOver‌شناخته شده است مقداري كه ماوس بر روي عكس رفت را مشخص ميكنيد و در قسمت onMouseOut مقداري كه ماوس از روي عكس خارج شد.

حالا چنانچه بخواهيد اين حالت را زماني كه ماوس بر روي يك لينك رفت اتفاق بيفتيد كافيست كه براي عكس خود فقط قسمت اول كد بالا را يعني همان style‌را در تگ <img> خود قرار دهيد و حتما يادتان باشد كه براي عكس خود يك نامي هم در نظر بگيريد. حالا در داخل تگ <a> كه مربوط ميشود به لينك شما بقيه كد را قرار دهيد. حالا براي اينكه مطلب روشن تر شود من براي هر كدام از حالات بالا يك مثال آورده ام:

براي زماني كه ماوس بر روي عكس ميرود:

 <img src="majidbanner.gif" width="468" height="60" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,50,20)" onMouseOut="nereidFade(this,30,50,5)">

براي زماني كه ماوس بر روي يك لينك ميرود:

 <img src="majidbanner.gif" width="468" height="60" style="filter:alpha(opacity=30)" name="majidbanner">

<a href="www.majidonline.com" onMouseOver="nereidFade(majidbanner,100,50,20)" onMouseOut="nereidFade(majidbanner,30,50,5)">The Iranian Graphic and Web Reference</a>

خب حالا كار تمام شد و ميتوانيد از آن لذت ببريد. فقط يك توضيح كوچك براي متغيرهاي اين كد بدهم.

onMouseOver="nereidFade(majidbanner,100,50,20)"

مقدار majidbanner كه در كد بالا مشخص شده است همان نام عكس ما است كه چنانچه از يك لينك براي محو شدن عكس استفاده ميكنيد بايد حتما نام عكس را در اينجا ذكر كنيد ولي در صورتي كه اين كار را ميخواهيد بر روي عكس اعمال نماييد ديگر نيازي به نام عكس نيست و مقدار آن ميتواند this‌باشيد.

مقدار 100 كه در كد بالا مشخص شده است درصد محو شدگي عكس است مثلا اگر مقدار آن 100 باشد يعني آنكه در آن لحظه مقدار محوي عكس هيچ است يعني كامل عكس نمايش داده ميشود يا چنانچه مقدار آن 50 باشد يعني آنكه 50 درصد عكس نمايش داده ميشود.

مقدار 50 كه در كد بالا مشخص شده است در اصطلاع تعداد فريمهاي ما هستند (fps) كه هرچه مقدار آن بيشتر باشد تعداد فريمهاي هنگام نمايش بيشتر خواهد بود ولي تا حدي سرعت fade‌ شدن كم ميشود.

مقدار 20 كه در كد بالا مشخص شده است مقدار زمان نمايش هر فريم است كه با زياد كردن آن سرعت بيشتر و با كم كردن آن سرعت آهسته تر ميشود.