|  
صفحه اصلی > خدمات وب > ابزار جاوا اسکریپت > تغییر تصویر با حرکت ماوس روی آن

تغییر تصویر با حرکت ماوس روی آن

 
به اشتراک گذاری این صفحه در فیس بوک
افکت Rollover Image از افکت های پر کاربرد در صفحات وب بوده و همواره مورد توجه و استفاده وب مسترها می باشد. این افکت جایگزین شدن یک تصویر با تصویر دیگر است که با اشاره ماوس روی دکمه یا تصویر مربوطه فعال می گردد. این افکت را هم از طریق CSS و هم جاوا اسکریپت می توان ایجاد کرد. اگر در زمینه طراحی وب سایت تازه کار هستید و آشنایی زیادی با CSS, HTML و جاوا اسکریپت ندارید با استفاده از ابزار این صفحه به آسانی می توانید این افکت را ایجاد کرده و در سایت یا وبلاگ خود استفاده نمایید. از موارد کاربرد این افکت می توان به طراحی دکمه های صفحه اشاره کرد.
راهنما: با استفاده از این ابزار تا حداکثر 12 دکمه می توانید ایجاد نمایید.
فیلد ها در گروه هایی 3 تایی قرار دارند که مطابق راهنمای زیر اطلاعات هر یک را وارد نمایید:
  • فیلد با حاشیه قرمز: آدرس تصویر اصلی | مثال: http://webkaran.com/images/btn01.png
  • فیلد با حاشیه نارنجی: آدرس تصویر دوم | مثال: http://webkaran.com/images/btn02.png
  • فیلد با حاشیه بنفش: لینک دکمه | مثال: http://webkaran.com

افزایش تعداد دکمه ها به تعداد دلخواه:
در صورتیکه به بیش از 12 دکمه نیاز دارید به راحتی می توانید تعداد کمه ها را افزایش دهید.
کد خروجی این ابزار در دو بخش head و body صفحه تولید می گردد.
کد زیر را در قسمت head صفحه یافته و یک کپی از آن ایجاد کرده و شماره image را تغییر دهید. مثلا" اگر 12 دکمه ایجاد کرده اید. IDی دکمه جدید به صورت image13 می گردد. پس از این تغییر، آدرس تصویر دوم را برای دکمه 13 اصلاح کنید.
image12 = new Image();
image12.src = "http://webkaran.com/images/btn02.png";
سپس از کد زیر یک کپی گرفته و IDی تصاویر جدید را اصلاح نمایید.
<a href="http://www.webkaran.com" onmouseover="image12.src='http://webkaran.com/images/btn02.png';"
onmouseout="image12.src='http://webkaran.com/images/btn01.png';">
<img name="image12" src="http://webkaran.com/images/btn01.png" border=0></a>

شماره: 1 شماره: 2 شماره: 3
شماره: 4 شماره: 5 شماره: 6
شماره: 7 شماره: 8 شماره: 9
شماره: 10 شماره: 11 شماره: 12

کد بدست آمده را در محل مورد نظر در کد html صفحه خود قرار دهید.
نمونه کد
دکمه تصویر