رفتن به مطلب

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا
دفاعی

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

توسط دفاعی، در مقالات متفرقه

پست های پیشنهاد شده

poyabahram    0

poyabahram
ارسال شده در

سلام به همه دوستان

حتما شما هم در قالب های مختلف دکمه هایی رو دیدید که وقتی ماوس روی اونها میره رنگش یا عکسش عوض میشه

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

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

حالا روی خطکش بالایی کلیک کنید و کلیک رو دقیقا وسط صفحه رها کنید تا یک خط راهنما ایجاد بشه

با ابزار Rounded Rectangle tool با میزان Radius 5px یک مستطیل در نیمه بالایی با رنگ دلخواه ایجاد کنید.

حالا لایه ایجاد شده رو کپی کنید (در پنجره layers،بر روی لایه ایجاد شده راست کلیک کنید و گزینه ی Duplicate Layer رو بزنید)

به این صورت

3.png

حالا با ماوس عکس رو به نیمه پایینی بیارید و رنگش رو بنابه سلیقه خودتون عوض کنید. حالا عکس به این صورت در اومده

4.png

این عکس رو با نام img و با فرمت png ذخیره کنید.

حالا یک فایل html ایجاد کنید و کدهای زیر رو داخل اون قرار بدید.

<html>
<head>
<title>rollover</title>
<style type=”text/css”>
a:link.btn,a:visited.btn{
background:url(img.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(img.png) right bottom;
width:120px;
height:50px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
}
</style>
</head>
<body>
<a href=”#” class=”btn” >ارسال</a>
</body>
</html>
این فایل را با نام rollover.html ذخیره کنید.

توجه : عکس دکمه و فایل html ایجاد شده باید در یک فولدر باشند.

 

با سلام خدمت دوستان 

ممنون جناب دفاعی 

حالا به چه صورت این کدو توی جوملا قرار بدیم توی کدوم قسمت 

اگه ماژول html سفارشی میخواد باید کدوم کدش توی ادیتور باشه و کلاس ماژولش کدوم میشه 

این دو پوشه توی بخش قالب کجا دقیقا بزاریم 

ممنون میشم این سوالاتو پاسخ بدین 

البته اگه زحمتی نیست 

به اشتراک گذاری این ارسال

لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید ارسال داشته باشید و بعد ثبت نام خود را در سایت کامل نمایید. اگر حساب کاربری در سایت دارید، جهت ارسال با حساب کاربری خود هم اکنون وارد سایت شوید

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
برو به فهرست موضوع ها
×
×
  • افزودن...