CODEWITHSUNDEEP
javascript
Adam Benedek
Adam Benedek

Reputation: 592

JavaScript filter hueRotate does not work

I am trying to change an image's (#bgImage) hue when hovering over a button (profIcon) in JavaScript. This type of button is created with JS, and there are 9 of them.

Here is the code that creates a DOM image element, sets it's source, position, size and transition. Finally it appends it to it's container. The image appears correctly, where it should be.

I am using quickID in place of document.getElementById, and it is working without error.

var bgImage = document.createElement("img");
bgImage.id = "bgImage";
bgImage.src = "./resources/images/backgrounds/profession/selector.jpg";
bgImage.style.position = "absolute";
bgImage.style.left = "0px";
bgImage.style.top = "0px";
bgImage.style.width = "100%";
bgImage.style.height = "100%";
bgImage.style.zIndex = 1;
bgImage.style.webkitTransition = "all 0.5s ease";
quickID("centerdiv").appendChild(bgImage);

Here is the code that runs when I hover over an image:

profIcon.onmouseover = function () {
    var thisNr = this.id.substr(8); //last char of the profIcon ID; number between 0 and 8
    var newHue = profTomb[thisNr][3]; //this contains the value and only that.
    console.log(newHue); //always returns the correct value
    quickID(this.id).style.webkitFilter = "grayscale(0%)"; //this part works, too
    quickID("bgImage").style.webkitFilter = "hueRotate(" + newHue + "deg)";
}

My problem: for some reason, the filter does not apply. newHue is either a positive (75), or a negative (-23) value and it's inserted correctly, as it appears in the console log. I only use webkit vendor prefix as I use Google Chrome.

I waited up to 1 minute with my mouse cursor over the image, thinking my system needs time to process the transformation, but nothing happened.

Does anyone knows what is the problem?

Upvotes: 0

Views: 227

Answers (1)

Matt Wetmore
Matt Wetmore

Reputation: 300

The correct string to use is hue-rotate, not hueRotate. The following should work:

quickID("bgImage").style.webkitFilter = "hue-rotate(" + newHue + "deg)";

Upvotes: 1

Related Questions