HTML Color Visualizer中的故障

时间：2019-03-22 13:57:24

标签： javascript html

我的网站上有一个彩色可视化工具，访客可以在其中设计金属建筑物。您可以here查看它。现在，当您在可视化器上单击颜色时，请注意建筑物颜色如何更改为墙壁，屋顶和装饰颜色。但是，单击“门颜色”色板时，门的颜色不会改变。我已经检查了我的代码，但仍然找不到此问题的来源。我正在寻找另一只眼睛，可能会帮助我解决此问题。预先谢谢你。

<html>
  <body>

    <button onclick="myFunction()">Print this page</button>

    <script>
      function myFunction() {
        window.print();
      }
    </script>

  </body>
</html>
<br>
<html>
  <style>
    .mySlides {
      display: none;
      position: absolute;
    }

    .active {
      display: block;
    }
  </style>
  <script>
    var slideIndex = 1;

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function currentDiv(n) {
      showDivs(slideIndex = n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = x.length
      }
      var children = x[slideIndex - 1].parentElement.getElementsByTagName('img')
      var clickedElement = x[slideIndex - 1]
      for (var i = 0; i < children.length; i++) {
        if (children[i] != clickedElement) {
          children[i].classList.remove("active");
        }
      }
      clickedElement.classList.toggle("active");
    }
  </script>

  <body>

    <div class="w3-content" style="max-width:800px;position: relative;">
      <div class="wall-colors">
        <img src="http://metaldepotinc.com/XBackground.png" style="width:100%;position: absolute ;z-index:-1">
        <img class="mySlides" src="XWA.png" style="width:100%">
        <img class="mySlides" src="XWAG.png" style="width:100%">
        <img class="mySlides" src="XWB.png" style="width:100%">
        <img class="mySlides" src="XWBR.png" style="width:100%">
        <img class="mySlides" src="XWBS.png" style="width:100%">
        <img class="mySlides" src="XWBS2.png" style="width:100%">
        <img class="mySlides" src="XWBW.png" style="width:100%">
        <img class="mySlides" src="XWCB.png" style="width:100%">
        <img class="mySlides" src="XWCG.png" style="width:100%">
        <img class="mySlides" src="XWCG2.png" style="width:100%">
        <img class="mySlides" src="XWCR.png" style="width:100%">
        <img class="mySlides" src="XWDS.png" style="width:100%">
        <img class="mySlides" src="XWFG.png" style="width:100%">
        <img class="mySlides" src="XWG.png" style="width:100%">
        <img class="mySlides" src="XWHB.png" style="width:100%">
        <img class="mySlides" src="XWHB2.png" style="width:100%">
        <img class="mySlides" src="XWKB.png" style="width:100%">
        <img class="mySlides" src="XWLS.png" style="width:100%">
        <img class="mySlides" src="XWMB.png" style="width:100%">
        <img class="mySlides" src="XWPW.png" style="width:100%">
        <img class="mySlides" src="XWRR.png" style="width:100%">
        <img class="mySlides" src="XWSG.png" style="width:100%">
        <img class="mySlides" src="XWST.png" style="width:100%">
        <img class="mySlides" src="XWSW.png" style="width:100%">
        <img class="mySlides" src="XWSW2.png" style="width:100%">
      </div>
      <div class="roof-colors">
        <img class="mySlides" src="XRA.png" style="width:100%">
        <img class="mySlides" src="XRAG.png" style="width:100%">
        <img class="mySlides" src="XRB.png" style="width:100%">
        <img class="mySlides" src="XRBR.png" style="width:100%">
        <img class="mySlides" src="XRBS.png" style="width:100%">
        <img class="mySlides" src="XRBS2.png" style="width:100%">
        <img class="mySlides" src="XRBW.png" style="width:100%">
        <img class="mySlides" src="XRCB.png" style="width:100%">
        <img class="mySlides" src="XRCG.png" style="width:100%">
        <img class="mySlides" src="XRCG2.png" style="width:100%">
        <img class="mySlides" src="XRCR.png" style="width:100%">
        <img class="mySlides" src="XRDS.png" style="width:100%">
        <img class="mySlides" src="XRFG.png" style="width:100%">
        <img class="mySlides" src="XRG.png" style="width:100%">
        <img class="mySlides" src="XRHB.png" style="width:100%">
        <img class="mySlides" src="XRHB2.png" style="width:100%">
        <img class="mySlides" src="XRKB.png" style="width:100%">
        <img class="mySlides" src="XRLS.png" style="width:100%">
        <img class="mySlides" src="XRMB.png" style="width:100%">
        <img class="mySlides" src="XRPW.png" style="width:100%">
        <img class="mySlides" src="XRRR.png" style="width:100%">
        <img class="mySlides" src="XRSG.png" style="width:100%">
        <img class="mySlides" src="XRST.png" style="width:100%">
        <img class="mySlides" src="XRSW.png" style="width:100%">
        <img class="mySlides" src="XRSW2.png" style="width:100%">
      </div>
      <div class="trim-colors">
        <img class="mySlides" src="XTA.png" style="width:100%">
        <img class="mySlides" src="XTAG.png" style="width:100%">
        <img class="mySlides" src="XTB.png" style="width:100%">
        <img class="mySlides" src="XTBR.png" style="width:100%">
        <img class="mySlides" src="XTBS.png" style="width:100%">
        <img class="mySlides" src="XTBS2.png" style="width:100%">
        <img class="mySlides" src="XTBW.png" style="width:100%">
        <img class="mySlides" src="XTCB.png" style="width:100%">
        <img class="mySlides" src="XTCG.png" style="width:100%">
        <img class="mySlides" src="XTCG2.png" style="width:100%">
        <img class="mySlides" src="XTCR.png" style="width:100%">
        <img class="mySlides" src="XTDS.png" style="width:100%">
        <img class="mySlides" src="XTFG.png" style="width:100%">
        <img class="mySlides" src="XTG.png" style="width:100%">
        <img class="mySlides" src="XTHB1.png" style="width:100%">
        <img class="mySlides" src="XTHB2.png" style="width:100%">
        <img class="mySlides" src="XTKB.png" style="width:100%">
        <img class="mySlides" src="XTLS.png" style="width:100%">
        <img class="mySlides" src="XTMB.png" style="width:100%">
        <img class="mySlides" src="XTPW.png" style="width:100%">
        <img class="mySlides" src="XTRR.png" style="width:100%">
        <img class="mySlides" src="XTSG.png" style="width:100%">
        <img class="mySlides" src="XTST.png" style="width:100%">
        <img class="mySlides" src="XTSW.png" style="width:100%">
        <img class="mySlides" src="XTSW2.png" style="width:100%">
      </div>
      <div class="door-colors">
        <img class="mySlides" src="XDPW.png" style="width:100%">
        <img class="mySlides" src="XDGW.png" style="width:100%">
        <img class="mySlides" src="XDRR.png" style="width:100%">
        <img class="mySlides" src="XDFG.png" style="width:100%">
        <img class="mySlides" src="XDHB.png" style="width:100%">
        <img class="mySlides" src="XDLS.png" style="width:100%">
        <img class="mySlides" src="XDBS.png" style="width:100%">
        <img class="mySlides" src="XDST.png" style="width:100%">
        <img class="mySlides" src="XDSG2.png" style="width:100%">
        <img class="mySlides" src="XDKB.png" style="width:100%">
        <img class="mySlides" src="XDCR.png" style="width:100%">
      </div>
      <div class="wainscot-colors">
        <img class="mySlides" src="XWS1.png" style="width:100%">
        <img class="mySlides" src="XWS2.png" style="width:100%">
        <img class="mySlides" src="XWS3.png" style="width:100%">
      </div>
    </div>


    <div class="as-console-wrapper">
      <div class="as-console"></div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>    
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p><font face="arial black">WALL COLOR</font></p>

    <img onclick="currentDiv(1)" src="BA300.png" />
    <img onclick="currentDiv(2)" src="BAG.png" />
    <img onclick="currentDiv(3)" src="BB.png" />
    <img onclick="currentDiv(4)" src="BBR300.png" />
    <img onclick="currentDiv(5)" src="BBS.png" />
    <img onclick="currentDiv(6)" src="BBS2300.png" />
    <img onclick="currentDiv(7)" src="BBW300.png" />
    <img onclick="currentDiv(8)" src="BCB.png" />
    <img onclick="currentDiv(9)" src="BCG1.png" />
    <img onclick="currentDiv(10)" src="BCG2300.png" />
    <img onclick="currentDiv(11)" src="BCR.png" />
    <img onclick="currentDiv(12)" src="BDS.png" />
    <img onclick="currentDiv(13)" src="BFG.png" />
    <img onclick="currentDiv(14)" src="BG.png" />
    <img onclick="currentDiv(15)" src="BHB1.png" />
    <img onclick="currentDiv(16)" src="BHB2300.png" />
    <img onclick="currentDiv(17)" src="BKB.png" />
    <img onclick="currentDiv(18)" src="BLS.png" />
    <img onclick="currentDiv(19)" src="BMB300.png" />
    <img onclick="currentDiv(20)" src="BPW.png" />
    <img onclick="currentDiv(21)" src="BRR.png" />
    <img onclick="currentDiv(22)" src="BSG300.png" />
    <img onclick="currentDiv(23)" src="BST.png" />
    <img onclick="currentDiv(24)" src="BSW.png" />
    <img onclick="currentDiv(25)" src="BSW2300.png" />

    <BR>
    <br> <p><font face="arial black">ROOF COLOR</font></p>

    <img onclick="currentDiv(26)" src="BA300.png" />
    <img onclick="currentDiv(27)" src="BAG.png" />
    <img onclick="currentDiv(28)" src="BB.png" />
    <img onclick="currentDiv(29)" src="BBR300.png" />
    <img onclick="currentDiv(30)" src="BBS.png" />
    <img onclick="currentDiv(31)" src="BBS2300.png" />
    <img onclick="currentDiv(32)" src="BBW300.png" />
    <img onclick="currentDiv(33)" src="BCB.png" />
    <img onclick="currentDiv(34)" src="BCG1.png" />
    <img onclick="currentDiv(35)" src="BCG2300.png" />
    <img onclick="currentDiv(36)" src="BCR.png" />
    <img onclick="currentDiv(37)" src="BDS.png" />
    <img onclick="currentDiv(38)" src="BFG.png" />
    <img onclick="currentDiv(39)" src="BG.png" />
    <img onclick="currentDiv(40)" src="BHB1.png" />
    <img onclick="currentDiv(41)" src="BHB2300.png" />
    <img onclick="currentDiv(42)" src="BKB.png" />
    <img onclick="currentDiv(43)" src="BLS.png" />
    <img onclick="currentDiv(44)" src="BMB300.png" />
    <img onclick="currentDiv(45)" src="BPW.png" />
    <img onclick="currentDiv(46)" src="BRR.png" />
    <img onclick="currentDiv(47)" src="BSG300.png" />
    <img onclick="currentDiv(48)" src="BST.png" />
    <img onclick="currentDiv(49)" src="BSW.png" />
    <img onclick="currentDiv(50)" src="BSW2300.png" />
    <BR>
    <br> <p><font face="arial black">TRIM COLOR</font></p>

    <img onclick="currentDiv(51)" src="BA300.png" />
    <img onclick="currentDiv(52)" src="BAG.png" />
    <img onclick="currentDiv(53)" src="BB.png" />
    <img onclick="currentDiv(54)" src="BBR300.png" />
    <img onclick="currentDiv(55)" src="BBS.png" />
    <img onclick="currentDiv(56)" src="BBS2300.png" />
    <img onclick="currentDiv(57)" src="BBW300.png" />
    <img onclick="currentDiv(58)" src="BCB.png" />
    <img onclick="currentDiv(59)" src="BCG1.png" />
    <img onclick="currentDiv(60)" src="BCG2300.png" />
    <img onclick="currentDiv(61)" src="BCR.png" />
    <img onclick="currentDiv(62)" src="BDS.png" />
    <img onclick="currentDiv(63)" src="BFG.png" />
    <img onclick="currentDiv(64)" src="BG.png" />
    <img onclick="currentDiv(65)" src="BHB1.png" />
    <img onclick="currentDiv(66)" src="BHB2300.png" />
    <img onclick="currentDiv(67)" src="BKB.png" />
    <img onclick="currentDiv(68)" src="BLS.png" />
    <img onclick="currentDiv(69)" src="BMB300.png" />
    <img onclick="currentDiv(70)" src="BPW.png" />
    <img onclick="currentDiv(71)" src="BRR.png" />
    <img onclick="currentDiv(72)" src="BSG300.png" />
    <img onclick="currentDiv(73)" src="BST.png" />
    <img onclick="currentDiv(74)" src="BSW.png" />
    <img onclick="currentDiv(75)" src="BSW2300.png" />
    <BR>
    <br> <p><font face="arial black">DOOR COLOR</font></p>

    <img onclick="currentDiv(76)" src="BPW.png" />
    <img onclick="currentDiv(77)" src="BGW.png" />
    <img onclick="currentDiv(78)" src="BRR.png" />
    <img onclick="currentDiv(79)" src="BFG.png" />
    <img onclick="currentDiv(80)" src="BHB1.png" />
    <img onclick="currentDiv(81)" src="BLS.png" />
    <img onclick="currentDiv(82)" src="BBS.png" />
    <img onclick="currentDiv(83)" src="BST.png" />
    <img onclick="currentDiv(84)" src="BSG2.png" />
    <img onclick="currentDiv(85)" src="BKB.png" />
    <img onclick="currentDiv(86)" src="BCR.png" />
    <br>
    <br> <p><font face="arial black">WAINSCOT COLOR</font></p>

    <img onclick="currentDiv(87)" src="BWS1.png" />
    <img onclick="currentDiv(88)" src="BWS2.png" />
    <img onclick="currentDiv(89)" src="BWS3.png" />
    <br>
    <br>
    <center>
      <p><font face="arial">*SIGNATURE 300 PANELS COST 35% MORE THAN SIGNATURE 200 PANELS.</font></p>
      <br>
      <p><font face="arial">SOME COLORS ON SCREEN MAY VARY FROM ACTUAL RESULTS. </font></p>
    </center>
  </body>

</html>

1 个答案:

答案 0 :(得分：1)

检查图像源，例如，您似乎没有https://www.metaldepotinc.com/xDFG.png文件

相关问题
最新问题