JSFiddle - React, Tailwind, and code Playground
HTML
<div class="param-colors">
<div class="tab-colors">
Цвет наклейки:<br />
</div>
<div class="base-color-picker">
<div class="color" id="color" onclick="change_image()" style="background-color: #fffff7" title="?red=12&green=255&blue=86&">
</div>
<div class="color" id="color" onclick="change_image()" style="background: #ff8e00" title="?red=12&green=112&blue=86&">
</div>
<div class="color" id="color" onclick="change_image()"style="background-color: #f79e00" title="123">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ffae00" title="123">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ffbe00" title="123">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ffd300">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #8d0000">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #9e0000">
</div>
<div class="color" id="color" onclick="change_image()" style="background-color: #ae0000">
</div>
...
CSS
.bg-color-picker,
.base-color-picker {
overflow: hidden;
}
.square{background-color: #fff; width: auto; height: auto;}
.bg-color-picker .bg-color-item,
.base-color-picker .base-color-item,
.param-colors .color {
width: 18px;
height: 18px;
float: left;
margin: 5px;
border: 1px solid #cccccc;
cursor: pointer;
}
.bg-color-picker .bg-color-item:hover,
.base-color-picker .base-color-item:hover,
.param-colors .color:hover {
border: 3px solid #f24b0f;
margin: 3px;
}
JavaScript
function change_image() {
var d = document;
var element = d.getElementById('img');
var div = d.getElementById('color');
var img1 = element.src + div.title;
var color = img1.replace('jpg', 'php');
element.src = color;
alert(color);
}