Can anyone help me with coding something like this: https://www.abmartin.net/metal-roofing-panels/abm/color-visualizer I've been searching on the internet and learning on my own but I'm am so confused now. I have the buttons and the SVG image layered but I just can't find the code to make the buttons when clicked change the color of the roof svg image. I got the buttons to change text but not the image. Any help is greatly appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>newroof</title> <style> .image1 { position: absolute; top: 10px; center: border: 1px solid #000000; } .image2 { position: absolute; top: 10px; center: border: 1px solid #000000; z-index: 1; } </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"><input style="background-color: rgb(102, 0, 102); color: white; width: 150px; height: 40px;" id="toPurple" name="Purple" value="Purple" 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'; } document.getElementById("toPurple").onclick = function () { document.getElementById("output_text").style.color = '#1f0b4a'; document.getElementById("roofsvg").style.color = '#1f0b4a'; } </script><br> <div> <p id="output_text">Roof click N color. <img style="width: 864px; height: 480px;" class="image1" alt="" src="roofvisualizer/house2.png"> <img style="width: 864px; height: 480px;" class="image2" id="roofsvg" alt="" src="roofvisualizer/roof.svg"></p> </div> </body> </html> Code (markup):
Hi They use svg painting to change the image colours but you could do that on gimp/photoshop and just swap the image out. Easy enough if it's just the roof, in the example they have 4 different things that can be changed. I use a tool called codepen for demos and I've created one for this at https://codepen.io/itamer/pen/MWGzwmN I've simplified it to 3 colours and added a bit more CSS and a lot less javascript. As with many of the examples that get posted here there will be more improvements that can be made but initially we just want to get you up and running. To summarise my changes <input id="toGold" value="Gold" class='mybutton gold' data-image="https://cldup.com/6fe-Mz94Fs.png" type="button"> HTML: I've taken the style out and put it into the CSS. There are two classes - mybutton is used by javascript to add the listener, but also defines the height and width that is common to all the buttons I've added "data-image" with the link to the appropriate image. It doesn't have to be the whole URL but I've done it that way to simplify the javascript. I've taken out the name because it's not being used. var changeImage = function () { console.log(this); var imageName = this.getAttribute("data-image"); document.getElementById("displayImage").src = imageName; }; Code (JavaScript): This is the code that gets run when a button is clicked - it gets the image name from the button and replaces it on the page var mybuttons = document.getElementsByClassName("mybutton"); for (var i = 0; i < mybuttons.length; i++) { mybuttons[i].addEventListener("click", changeImage, false); } Code (JavaScript): Add a listener to all the elements that use the class "mybutton" - now if you add or remove a colour you don't need to change the javascript.
I am trying to save this on my computer but when I open it in my editor then try to view the pages in my browser it doesn't work but it does work here https://codepen.io/itamer/pen/MWGzwmN. I'm not sure why. I was going to edit and see what all I can do but it want work for me.
aaah, you need to put the pieces back together. It's always a balancing act between teaching someone to suck eggs and being helpful! typically you'd have the javascript and the styles in their own files so you'd end up with something like this. page.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>newroof</title> <link rel="stylesheet" href="roof.css"> </head> <body> <div style="text-align: center;"> <img id="displayImage" src="https://cldup.com/7y30ahsPfP.png" width="300px" /> </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> <br> <input id="toPolarWhite" value="Polar White" class='mybutton polarwhite' data-image="https://cldup.com/7y30ahsPfP.png" type="button"> <input id="toBlack" value="Black" class='mybutton black' data-image="https://cldup.com/HOhpWOQpWT.png" type="button"> <input id="toGold" value="Gold" class='mybutton gold' data-image="https://cldup.com/6fe-Mz94Fs.png" type="button"><br> <br></div> <script src="roof.js"></script> </body> </html> HTML: roof.css .mybutton { width: 150px; height: 40px; } .polarwhite { background-color: rgb(219, 228, 225); color: black; } .black { background-color: black; color: white; } .gold { background-color: #F8F2DF; color: black; } Code (CSS): roof.js var changeImage = function () { console.log(this); var imageName = this.getAttribute("data-image"); document.getElementById("displayImage").src = imageName; }; var mybuttons = document.getElementsByClassName("mybutton"); for (var i = 0; i < mybuttons.length; i++) { mybuttons[i].addEventListener("click", changeImage, false); } Code (JavaScript):
Totally understand lol. Thank you so much and I'll copy this and then compare and see if I did it correctly.