پنل تغییر رنگ پس زمینه با css و javascript

  • نویسنده موضوع iReza
  • تاریخ شروع

iReza

کاربر عضو
Mr_Me_God_in_Trol.jpg
سلام

تا حالا حتمی مشاده کردید سایت هایی رو که چند دکمه دارن که با کلیک روی اون ها رنگ پس زمینه نسبت به دکمه تغییر میکنه؟

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

آموزش:

برای ایجاد این پنل ها،شما نیاز به ساخت شیء های CSS دارید:

{
background-color:#2EB82E;
width:8px;
height:8px;
border:1px solid #a1a1a1;
}

.colorprofile-red
{
background-color:#E60000;
width:8px;
height:8px;
border:1px solid #a1a1a1;
}

.colorprofile-blue
{
background-color:#0000E6;
width:8px;
height:8px;
border:1px solid #a1a1a1;
}​
کد:
.colorprofile-green
تا حالا شما کار طراحی رو انجام دادید،بریم سراغ کدنویسی،خُب حالا تابع پنل تغییر رنگ رو مینویسیم:


{
document.body.style.backgroundColor = 'hex';
}
کد:
function ColorPanel(hex)
و حالا نوبت استفاده این این پنل،شما این کدها رو در هرجای صفحه میتونید قرار بدید،برای بدست آوردن HEX مربوط به هر رنگ،میتونید از سرویس ColorPicker عرضه شده توسط W3SCHOOLS استفاده کنید:

<div class=colorprofile-red onclick="ColorPanel('#E60000')"></div>
<div class=colorprofile-blue onclick="ColorPanel('#0000E6')"></div>
کد:
<div class=colorprofile-green onclick="ColorPanel('#2EB82E')"></div>


 
بالا