bethloudin
Coder
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>