CODEWITHSUNDEEP
jqueryhtmlcss
Paul
Paul

Reputation: 1004

Javascript Color Selector to change Background Color

I have been trying to re-create a Color Selector function that is found here:

http://www.chismbrothers.com/site/colorit

I think I have most of the functionality in JSFiddle but Im missing something or a few things.

$('.color').hover(function(){
    $('#image').css({
        'background-color':$(this).css('background-color')
    });
})
#image {
    background: url(http://www.chismbrothers.com/images/woodfloors.png);
    height: 341px;
    width: 515px;
}

.color {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='image'></div>
<span class='color' style='background-color: #fe4'></span>
<span class='color' style='background-color: #e14'></span>
<span class='color' style='background-color: #410'></span>

http://jsfiddle.net/NinjaSk8ter/ryLDn/

since this rely's on changing the color of 2 Images, Im not even sure how to upload those on JSFiddle.

Can someone point me in the right direction? What am I missing? How much am I missing?

Upvotes: 0

Views: 795

Answers (1)

Naftali
Naftali

Reputation: 146302

if u look at the image that ur 1st link shows: enter image description here

it is made using a transparent background. when u hover over the different colors, it changed the css of the background color.

and here is a working example using jquery: http://jsfiddle.net/maniator/H6Bg6/ (fiddle does not work as the color picker liobrary does not seem to exist anymore)

This can also be done in straight up javascript like so:

const colorChosen = document.getElementById('colorChosen');
const image = document.getElementById('image');

document.querySelector('.color').addEventListener('change', ({
  currentTarget
}) => {
  image.style.backgroundColor = currentTarget.value;
  colorChosen.textContent = currentTarget.value;
});
#image {
  background: url(https://i.sstatic.net/5O4iO.png);
  height: 341px;
  width: 515px;
}

.color {
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px 0px;
}
<div id='image' style='background-color: #fdee44'></div>
<input value="#fdee44" class="color" type="color" />
<span id="colorChosen">#fdee44</span>

Upvotes: 6

Related Questions