به منظور ایجاد یک تصویر متحرک در هنگام قراردادن ماوس برروی تصویر, بایستی در نمایش تصویر دوم تاخیری ایجاد نشود. بدین منظور با استفاده از JavaScript تمامی تصاویر را از قبل به سیستم کاربر انتقال داده تا در زمان لزوم, تصاویر توسط متغییر بوسیله اسکریپت نشان داده شوند. [TABLE] [TR] [TD="bgcolor: transparent, colspan: 2"] برای تهیه rollover بهتر [/TD] [/TR] [TR] [TD="width: 100%, bgcolor: transparent"] if (document.images) { arrowRed = new Image arrowBlue = new Image arrowRed.src = “images/test1.gif” arrowBlue.src = “images/test2.gif” } [/TD] [/TR] [TR] [TD="width: 100%, bgcolor: transparent"] توسط این کدها, قابلیت درک اشیاء توسط browser امتحان گشته, در صوریتکه جواب مثبت شد, دو تصویر مجزای arrowRed و arrowBlue ایجاد میگردند. سپس از ویژگی src در تعیین مکان تصویر استفاده میشود. [/TD] [/TR] [TR] [TD="width: 100%, bgcolor: transparent"] else { arrowRed = “” arrowBlue = “” document.arrow = “” } [/TD] [/TR] [TR] [TD="width: 100%, bgcolor: transparent"] برای browserهای قدیمی, به منظور جلوگیری از نمایش پیغامهای اشتباه, بهتر است از حالت else با متغیرها و document.arrow که خالی هستند, یک رشته حرفی خالی درست کنید. [/TD] [/TR] [TR] [TD="width: 100%, bgcolor: transparent"] <A href=”aghta.com” onMuseover = “document.arrow.src = arrowRed.src” onMouseout = “document.arrow.src = arrowBlue.src”> [/TD] [/TR] [TR] [TD="width: 100%, bgcolor: transparent"] دستورات آدرس دهی فوق, برای ایجاد پیوند با توجه به مشخصات, rollover موجود در صفحه نوشته میشود, یعنی دو کنترل کننده onMouseover و onMouseout را درون تگ آدرس قرار داده تا دو حالت ممکن را تعریف کنند.[/TD] [/TR] [TR] [TD="bgcolor: transparent, colspan: 2"] نکات مورد توجه : [/TD] [/TR] [TR] [TD="bgcolor: transparent, colspan: 2"] یادآوری میشود که در هنگام ایجاد تصویر gif از تصاویرشفاف استفاده نکنید زیرا در هنگام تعویض تصویر دوم, تصویرقبل در زیر آن نمایش داده میشود. توجه داشته باشید که ابعاد هر دو تصویر بایستی یکسان باشند. هرچند در IE تصاویر غیر اندازه بطورمناسب نمایش داده میشوند, اما در netscape متیجه مطلوبی نخواهد داشت. [/TD] [/TR] [/TABLE]
