Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How do you change the color of an image?

Hi I am just starting in coding and building a website. I am trying to build a color visualizer where it will change the color of the roof only when you click the button. So far I have gotten everything except how to change only the color of the roof. Here is my code.

Rich (BB code):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>layering</title>
</head>
<body>
<div style="text-align: center;"><br>
<br>
<img
 style="width: 800px; height: 531px; position: absolute; top: 47px; left: 130px;"
 alt=""
 src="file:///C:/Users/rllou/OneDrive/Desktop/Visualizer%20-%20Reed%27s%20Metals_files/1-galvalume.png"><img
 style="width: 800px; height: 531px;" alt=""
 src="file:///C:/Users/rllou/OneDrive/Desktop/Visualizer%20-%20Reed%27s%20Metals_files/brick1.jpg">
</div>
<br>
<input
 style="background-color: rgb(219, 228, 225); width: 150px; height: 40px; color: black;"
 id="toPolarWhite" name="Polar White" value="Polar White"
 type="button"> <input
 style="background-color: rgb(201, 200, 172); color: black; width: 150px; height: 40px;"
 id="toLightStone" name="Light Stone" value="Light Stone"
 type="button"><input
 style="background-color: rgb(177, 159, 119); color: black; width: 150px; height: 40px;"
 id="toSaddleTan" name="Saddle Tan" value="Saddle Tan"
 type="button"><input
 style="background-color: rgb(70, 64, 50); color: white; width: 150px; height: 40px;"
 id="toBurnishedSlate" name="Burnished Slate"
 value="Burnished Slate" type="button"><input
 style="background-color: rgb(134, 58, 44); color: white; width: 150px; height: 40px;"
 id="toRusticRed" name="Rustic Red" value="Rustic Red"
 type="button"><input
 style="background-color: rgb(24, 51, 44); color: white; width: 150px; height: 40px;"
 id="toIvyGreen" name="Ivy Green" value="Ivy Green"
 type="button"><input
 style="background-color: rgb(79, 43, 43); color: white; width: 150px; height: 40px;"
 id="toBerry" name="Berry" value="Berry"
 type="button"><input
 style="background-color: rgb(85, 62, 46); color: white; width: 150px; height: 40px;"
 id="toCocoaBrown" name="Cocoa Brown" value="Cocoa Brown"
 type="button"><input
 style="background-color: rgb(83, 89, 79); color: white; width: 150px; height: 40px;"
 id="toCharcoal" name="Charcoal" value="Charcoal"
 type="button"><input
 style="background-color: rgb(161, 36, 34); color: white; width: 150px; height: 40px;"
 id="toCrimsonRed" name="Crimson Red" value="Crimson Red"
 type="button"><input
 style="background-color: rgb(63, 105, 119); color: white; width: 150px; height: 40px;"
 id="toHawaiianBlue" name="Hawaiian Blue"
 value="Hawaiian Blue" type="button"><input
 style="background-color: rgb(129, 35, 33); color: white; width: 150px; height: 40px;"
 id="toDarkRed" name="Dark Red" value="Dark Red"
 type="button"><input
 style="background-color: rgb(13, 13, 13); color: white; width: 150px; height: 40px;"
 id="toBlack" name="Black" value="Black"
 type="button"><input
 style="background-color: rgb(142, 156, 156); color: black; width: 150px; height: 40px;"
 id="toOldTownGray" name="Old Town Gray"
 value="Old Town Gray" type="button"><input
 style="background-color: rgb(38, 65, 94); color: white; width: 150px; height: 40px;"
 id="toGalleryBlue" name="Gallery Blue"
 value="Gallery Blue" type="button"><input
 style="background-color: rgb(120, 113, 94); color: white; width: 150px; height: 40px;"
 id="toBuckskin" name="Buckskin" value="Buckskin"
 type="button"><input
 style="background-color: rgb(139, 137, 122); color: black; width: 150px; height: 40px;"
 id="toTaupe" name="Taupe" value="Taupe"
 type="button"><input
 style="background-color: rgb(144, 104, 52); color: white; width: 150px; height: 40px;"
 id="toCopper" name="Copper" value="Copper"
 type="button"> <br>
<br>
<div>
</div>
</body>
</html>
 
Two ways:

1) Use the CSS filter: hue-rotate(); property

2) Make the image an svg image, and use the fill property
I'm having trouble with layering as well I have gotten all confused with what I am doing now. However I do have the buttons and the onclick function working on the buttons and text but not images yet lol. I just don't get how to make it all work together. Do you have a good tutorial I can follow? Thank you so much for the help.
 
Here is an example of filter:hue-rotate. replace image src with your own image play with the hue-rotate(150deg).

HTML:
<style>
    .myimg {
        filter: hue-rotate(250deg);
    }
    body {
        background-color: rgb(50,50,50)
    }
</style>
<img class='myimg' src="ratt.svg" width="800" height="600" />
 
The SVG I am needing to change the color so not sure if the filter: hue-rotate will work.
The hue-rotate was for if you don't want to use SVG.

Do you have a good tutorial I can follow?
Check this out:
 
The hue-rotate was for if you don't want to use SVG.


Check this out:
Here is an example of filter:hue-rotate. replace image src with your own image play with the hue-rotate(150deg).

HTML:
<style>
    .myimg {
        filter: hue-rotate(250deg);
    }
    body {
        background-color: rgb(50,50,50)
    }
</style>
<img class='myimg' src="ratt.svg" width="800" height="600" />
Thank you both so much for the help. I think the SVG would be better because I have to change the roof color when the button is clicked. Here is an example: metal roof color visualizer
 
I am not exactly sure what I am doing here can someone look over the code and let me know how I can fix it. I am having trouble getting the buttons to work with the svg. Right now it only works with text. I am also having trouble with layering the SVG over the other image. I have a house png and a roof svg.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>newroof</title>

<style>
.image1 {
position: absolute; top: 10px;
center: border: 1px solid #000000;
}
.image2 {
position: absolute; top: 10px;
center: border: 1px solid #000000;;
}
</style>
</head>
<body>
<div style="text-align: center;"><big style="font-weight: bold;"><big><big><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</big></big></big><br>
</div>
<div style="text-align: center;">
<h3><big><big><big>Metal Roof Color Visualizer</big></big></big></h3>
<big style="font-weight: bold; font-family: Arial Narrow;">Colors
may vary due to the color variations of the computer monitors.</big><br>
</div>
<br>
<input style="background-color: rgb(219, 228, 225); width: 150px; height: 40px; color: black;" id="toPolarWhite" name="Polar White" value="Polar White" type="button"><input style="background-color: rgb(201, 200, 172); color: black; width: 150px; height: 40px;" id="toLightStone" name="Light Stone" value="Light Stone" type="button"><input style="background-color: rgb(177, 159, 119); color: black; width: 150px; height: 40px;" id="toSaddleTan" name="Saddle Tan" value="Saddle Tan" type="button"><input style="background-color: rgb(70, 64, 50); color: white; width: 150px; height: 40px;" id="toBurnishedSlate" name="Burnished Slate" value="Burnished Slate" type="button"><input style="background-color: rgb(134, 58, 44); color: white; width: 150px; height: 40px;" id="toRusticRed" name="Rustic Red" value="Rustic Red" type="button"><input style="background-color: rgb(24, 51, 44); color: white; width: 150px; height: 40px;" id="toIvyGreen" name="Ivy Green" value="Ivy Green" type="button"><input style="background-color: rgb(79, 43, 43); color: white; width: 150px; height: 40px;" id="toBerry" name="Berry" value="Berry" type="button"><input style="background-color: rgb(85, 62, 46); color: white; width: 150px; height: 40px;" id="toCocoaBrown" name="Cocoa Brown" value="Cocoa Brown" type="button"><input style="background-color: rgb(83, 89, 79); color: white; width: 150px; height: 40px;" id="toCharcoal" name="Charcoal" value="Charcoal" type="button"><input style="background-color: rgb(161, 36, 34); color: white; width: 150px; height: 40px;" id="toCrimsonRed" name="Crimson Red" value="Crimson Red" type="button"><input style="background-color: rgb(63, 105, 119); color: white; width: 150px; height: 40px;" id="toHawaiianBlue" name="Hawaiian Blue" value="Hawaiian Blue" type="button"><input style="background-color: rgb(129, 35, 33); color: white; width: 150px; height: 40px;" id="toDarkRed" name="Dark Red" value="Dark Red" type="button"><input style="background-color: rgb(13, 13, 13); color: white; width: 150px; height: 40px;" id="toBlack" name="Black" value="Black" type="button"><input style="background-color: rgb(142, 156, 156); color: black; width: 150px; height: 40px;" id="toOldTownGray" name="Old Town Gray" value="Old Town Gray" type="button"><input style="background-color: rgb(38, 65, 94); color: white; width: 150px; height: 40px;" id="toGalleryBlue" name="Gallery Blue" value="Gallery Blue" type="button"><input style="background-color: rgb(120, 113, 94); color: white; width: 150px; height: 40px;" id="toBuckskin" name="Buckskin" value="Buckskin" type="button"><input style="background-color: rgb(139, 137, 122); color: black; width: 150px; height: 40px;" id="toTaupe" name="Taupe" value="Taupe" type="button"><input style="background-color: rgb(144, 104, 52); color: white; width: 150px; height: 40px;" id="toCopper" name="Copper" value="Copper" type="button"> <br>
<script>
document.getElementById("toPolarWhite").onclick = function () {
document.getElementById("output_text").style.color = '#dbe4e3';
}
document.getElementById("toLightStone").onclick = function () {
document.getElementById("output_text").style.color = '#c8c7ab';
}
document.getElementById("toSaddleTan").onclick = function () {
document.getElementById("output_text").style.color = '#b19f77';
}
document.getElementById("toBurnishedSlate").onclick = function () {
document.getElementById("output_text").style.color = '#464032';
}
document.getElementById("toRusticRed").onclick = function () {
document.getElementById("output_text").style.color = '#84382a';
}
document.getElementById("toIvyGreen").onclick = function () {
document.getElementById("output_text").style.color = '#18332a';
}
document.getElementById("toBerry").onclick = function () {
document.getElementById("output_text").style.color = '#4d2929';
}
document.getElementById("toCocoaBrown").onclick = function () {
document.getElementById("output_text").style.color = '#533c2c';
}
document.getElementById("toCharcoal").onclick = function () {
document.getElementById("output_text").style.color = '#484e44';
}
document.getElementById("toCrimsonRed").onclick = function () {
document.getElementById("output_text").style.color = '#a32322';
}
document.getElementById("toHawaiianBlue").onclick = function () {
document.getElementById("output_text").style.color = '#3e6979';
}
document.getElementById("toDarkRed").onclick = function () {
document.getElementById("output_text").style.color = '#802522';
}
document.getElementById("toBlack").onclick = function () {
document.getElementById("output_text").style.color = '#121212';
}
document.getElementById("toOldTownGray").onclick = function () {
document.getElementById("output_text").style.color = '#8e9c9c';
}
document.getElementById("toGalleryBlue").onclick = function () {
document.getElementById("output_text").style.color = '#23415d';
}
document.getElementById("toBuckskin").onclick = function () {
document.getElementById("output_text").style.color = '#78715e';
}
document.getElementById("toTaupe").onclick = function () {
document.getElementById("output_text").style.color = '#8c8b79';
}
document.getElementById("toCopper").onclick = function () {
document.getElementById("output_text").style.color = '#8f6032';
}
</script>
<br>                                                          
<div>
<p id="output_text">Roof click N color.</p>
<img style="width: 864px; height: 480px;" class="image1" alt="" src="house.png">
<img style=864px; height: 480px class="image2" alt="" src="roofnew.svg">
<p id="image2"></p>
</div>
</body></html>
 
Last edited by a moderator:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom