Javascript 在扩大项目规模时，我可以提高效率吗？

好的，我正在为一家创造了一些新技术的工业公司建立一个网站。现在在“如何工作”页面上，他们希望用户能够以一种互动的方式深入了解机器的工作原理

这家公司有CAD软件，可以创建可旋转的3d图像等。。所以我的想法是基本上让他们在需要的每一步都进行屏幕截图。比如说

它从主要产品开始。如果您将鼠标悬停在该图像的某些部分上，它将改变颜色以显示您可以单击它。当您单击链接（热点）时，它会将您带到该部分（该部分可能有，也可能没有其他部分，他们可以做得更远）

他们真的很喜欢这个想法和概念，我已经创建了一个非常小的原型，我已经向客户展示了，他们喜欢这个想法。现在这是我有点担心的部分。我知道我可以通过构建原型的方式实现这一点，但是它很快就会变成一堆javascript。将有大约200张来自他们的图片，我只使用了5张用于我的原型

jsfiddle这里=

这是我的代码：

       //First tier hot spots
        $(document).ready(function(){
            var mainHotspot = '<img id="mainImage" src="img/car.png" border="0" width="475" height="311" orgWidth="475" orgHeight="311" usemap="#image-maps-2015-11-26-071629" alt="" /><map name="image-maps-2015-11-26-071629" id="ImageMapsCom-image-maps-2015-11-26-071629"><area shape="rect" coords="473,309,475,311" alt="Image Map" style="outline:none;" title="Image Map" /><area id="engine" alt="" title="" shape="poly" coords="155,128,141,131,125,134,121,134,110,132,102,132,106,141,104,153,103,162,100,169,97,171,89,173,99,181,104,191,106,198,125,199,142,201,150,198,156,193,165,187,168,181,177,191,184,187,178,172,180,165,181,159,175,152,173,145,168,138,168,132,164,128" style="outline:none;" target="_self"     /><area id="wheel" shape="poly" coords="437,143,423,141,413,147,405,158,402,174,402,188,402,201,410,210,421,212,433,212,446,204,452,189,454,171,453,157,447,149,447,146" style="outline:none;"/></map>'
            var engineImage = '<img id="mainImage" src="img/1.jpg" border="0" width="500" height="375" orgWidth="500" orgHeight="375" usemap="#image-maps-2015-11-26-092546" alt="" /><map name="image-maps-2015-11-26-092546" id="ImageMapsCom-image-maps-2015-11-26-092546"> <area id="enginepart" shape="poly" coords="239,136,240,167,243,190,243,210,266,217,280,207,277,183,273,151,272,143,271,117,262,63,245,107" style="outline:none;"   /> </map>';
            var enginePart  = '<img src="img/1.1.png">'


            var home = '<div class="mainLevel">Car</div>';
            var last = '<div class="secondLevel">Engine</div>';
            $('body').append(mainHotspot);






            //Engine
            $(document).on('mouseover', '#engine', function(){
                $('#mainImage').attr('src','img/carHover.png');
            });
            $(document).on('mouseout', '#engine', function(){
                $('#mainImage').attr('src','img/car.png');
            });
            $(document).on('click', '#engine', function(){
                $('body').empty();
                $('body').append(home + '<br/>');
                $('body').append(engineImage);
            });
                $(document).on('mouseover', '#enginepart', function(){
                    $('#mainImage').attr('src','img/1Hover.png');
                });
                $(document).on('mouseout', '#enginepart', function(){
                    $('#mainImage').attr('src','img/1.jpg');
                });
                $(document).on('click', '#enginepart', function(){
                    $('body').empty();
                    $('body').append(home + ' / ' + last + '<br/>');
                    $('body').append(enginePart);
                });


            //Wheel
            $(document).on('mouseover', '#wheel', function(){
                $('#mainImage').attr('src','img/wheelHover.png');
            } );
            $(document).on('mouseout', '#wheel', function(){
                $('#mainImage').attr('src','img/car.png');
            } );


            //BreadCrumbs
            $(document).on('click', '.mainLevel', function(){
                $('body').empty();
                $('body').append(mainHotspot);
            });

            $(document).on('click', '.secondLevel', function(){
                $('body').empty();
                $('body').append(home + ' <br/> ' );
                $('body').append(engineImage);
            });

//第一层热点
$（文档）.ready（函数（）{
var main热点=“”
var enginemage=''；
变量enginePart=“”
var home=‘Car’；
var last=‘发动机’；
$（'body'）.append（mainHotspot）；
//引擎
$（文档）.on（'mouseover'，'#engine'，function（）{
$（'mainImage'）.attr（'src'，'img/carHover.png'）；
});
$（文档）.on（'mouseout'，'#engine'，function（）{
$（'mainImage'）.attr（'src'，'img/car.png'）；
});
$（文档）。在（'单击'，'引擎'，函数（）上）{
$（'body'）.empty（）；
$（'body'）.append（home+'
'）；
$（'body'）.append（engineImage）；
});
$（文档）.on（'mouseover'，'#enginepart'，function（）{
$（'mainImage'）.attr（'src'，'img/1Hover.png'）；
});
$（文档）.on（'mouseout'，'#enginepart'，function（）{
$（'mainImage'）.attr（'src'，'img/1.jpg'）；
});
$（文档）。在（'单击'，'引擎部件'，函数（）上）{
$（'body'）.empty（）；
$（'body'）.append（home+'/'+last+'
'）；
$（'body'）。追加（enginePart）；
});
//车轮
$（文档）.on（'mouseover'，'#wheel'，function（）{
$（'mainImage'）.attr（'src'，'img/wheelHover.png'）；
} );
$（文档）.on（'mouseout'，'#wheel'，function（）{
$（'mainImage'）.attr（'src'，'img/car.png'）；
} );
//面包屑
$（文档）.on（'click'，'.mainLevel'，function（）{
$（'body'）.empty（）；
$（'body'）.append（mainHotspot）；
});
$（文档）.on（'click'，'secondLevel'，function（）{
$（'body'）.empty（）；
$（'body'）.append（home+'
'）；
$（'body'）.append（engineImage）；
});

---

因此，正如您所看到的，这是一种非常糟糕的方法，它会起作用，但我想找到一种更有效的方法。

您是否研究过

canvas

和

svg

？我知道它们，但在尝试使用时总是遇到麻烦them@MatthewSmart你应该研究一下这样的事情：@Joseph这会允许mult吗iple click-throughs？@MatthewSmart这应该是可能的，尽管我自己还没有看过这个特定的教程。这里还有一个：它甚至有一个演示如何绑定事件侦听器。