1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Newbie question

Discussion in 'HTML & Website Design' started by BethLoudin, Oct 9, 2022.

0
  1. #1
    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):

     
    BethLoudin, Oct 9, 2022 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    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.
     
    sarahk, Oct 9, 2022 IP
  3. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #3
    Thank you so much I truly appreciate you and all your help.
     
    BethLoudin, Oct 9, 2022 IP
  4. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #4
    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.
     
    BethLoudin, Oct 9, 2022 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    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):
     
    sarahk, Oct 9, 2022 IP
  6. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #6
    Totally understand lol. Thank you so much and I'll copy this and then compare and see if I did it correctly.
     
    BethLoudin, Oct 9, 2022 IP