آموزش ساخت دکمه غلطان rollover

خانه -> مقالات آموزشی -> آموزش طراحی سایت -> آموزش ساخت دکمه غلطان rollover

آموزش ساخت دکمه غلطان rollover

مقالات آموزشی - آموزش طراحی سایت

نوشته شده توسط مدیر

دوشنبه, 16 آبان 1390 ساعت 21:51

در این پست قصد دارم آموزش ساخت دکمه های غلطان یا RollOver رو قرار بدم. این دکمه غلطان نامیده می شوند زیرا وقتی با ماوس روی آنها می ایستید عکس دکمه عوض می شود.

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

ابتدا در فتوشاپ یه صفحه با اندازه ۱۲۰پیکسل پهنا و ۱۰۰ پیکسل ارتفاع ایجاد کنید.حالا روی خطکش بالایی کلیک کنید و کلیک را دقیقا وسط صفحه رها کنید تا یک خط راهنما ایجاد شود.

با ابزار Rounded Rectangle tool با میزان Radius 5px یک مستطیل در نیمه بالایی با رنگ دلخواه ایجاد کنید.
حالا لایه ایجاد شده را کپی کنید (در پنجره layers،بر روی لایه ایجاد شده راست کلیک کنید و گزینه ی Duplicate Layer را برگزینید) مانند شکل زیر

آموزش ساخت دکمه رول اور

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

آموزش ساخت دکمه رول اور

این عکس را با فرمت png و نام rpw ذخیره کنید.
حالا یک فایل html ایجاد نموده و آن را توسط یک ادیتور برای ویرایش باز و کدهای زیر را در آن کپی کنید.

<<html <head> <title>rollover</title> <style type=”text/css”> a:link.btn,a:visited.btn{ background:url(rpw.png) right top; width:120px; height:50px; display:block; text-decoration:none; text-align:center; line-height:2.7em; color:#FFFFFF; font-family:tahoma,sans-serif; } a:hover.btn{ background: url('/rpw.png') right bottom; width:120px; height:50px; display:block; text-decoration:none; text-align:center; color:#000000; } </style> </head> <body> <a href=”#” class=”btn” >send</a> </body> </html>

در پایان این فایل را با نام rollover.html ذخیره کنید.
دقت کنید : عکس دکمه (rpw.png) و فایل html ایجاد شده باید در یک فولدر باشند.

Tags:

مطالب مرتبط

لینک های مفید

محبوب ترین مطالب

آخرین مطالب

آمار سایت

اخبار دنیای طراحی سایت

جدیدترین اخبار دنیای طراحی وب

به روز ترین خبرهای دنیای طراحی وب و اینترنت

دانلود نرم افزار ویرایش CSS Skybound Stylizer v5.0
امروزه CSS یکی از ضروری ترین ابزارهای طراحی وبسایت به شمار می رود و طراحی یک سایت حرفه ای بدون استفاده از کدهای CSS، غیر ممکن است زیرا ویژگی ها و مزایای آن برای طراحان وب کاربردی بوده و همچنین موجب زیبایی بیشتر صفحات وب خواهد شد. Skybound Stylizer یک نرم افزار قدرتمند و بسیار [...]
دانلود نرم افزار طراحی صفحات وب Microsoft Expression Web v4.0.1460.0
نرم افزار Microsoft Expression Web نرم افزاری حرفه ای برای طراحی وب سایت های مدرن و استاندارد با سازگاری کامل با تمامی زبان های XML, ASP.NET, XHTML. و حتی PHP است. طراحی های CSS بسیار زیبا، ارائه ی صفحات XML و … قدرتمند، پشتیبانی خوب از فناوری قدرتمند سرور ASP.Net، مدیریت بهتر محیط نرم افزار، [...]
دانلود نرم افزار طراحی قالب سایت Artisteer v4.1
Artisteer نرم افزاری قدرتمند در زمینه طراحی و ساخت قالب است که به کاربران اجازه ایجاد وب سایت در عرض چند دقیقه، حتی بدون نیاز به دانستن هر چیزی در مورد ویرایش گرافیکی یا HTML را می دهد. توسط این نرم افزار می توانید به طراحی وب، ویرایش و تبدیل، برش گرافیکی، برنامه نویسی XHTML [...]
اولین گوشی با سیستم عامل فایرفاکس
شرکت Geeksphone از شرکای موزیلا در حوزه گوشی ، پس از انجام آزمایش‌های لازم روی نخستین گوشی هوشمند جهان مجهز به سیستم‌ عامل فایرفاکس در نظر دارد، این محصول را هفته آینده وارد بازار کند. دو گوشی هوشمند ساخت این شرکت که قرار است با سیستم‌عامل فایرفاکس وارد بازار شوند Keon و Peak نام دارند [...]
کم شدن محبوبیت یوتیوب و فیس بوک
استفاده از فیس بوک در میان جوانان در سال ۲۰۱۳ نسبت به سال قبل از آن ۹ درصد کاهش یافته است. به نظر می رسد سختگیری های والدین در مورد نحوه استفاده فرزندانشان از فیس بوک و همین طور دغدغه های موجود در مورد امنیت این سایت و همین طور عدم توجه به حفظ حریم [...]