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

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

iReza

کاربر عضو
26/8/12
328
0
16
سلام

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

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

آموزش:

برای ایجاد این پنل ها،شما نیاز به ساخت شیء های 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 استفاده کنید: HTML Color Picker

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