组合2个javascript脚本_Javascript_Html

组合2个javascript脚本

javascript html

组合2个javascript脚本,javascript,html,Javascript,Html,我想制作一张土耳其彩色地图，就像这张全幅html页面中的图片一样。重点是让用户为每个城市选择颜色在一天结束时，我想有一个这样的场景：为了做到这一点，我必须结合下面的两个脚本。但是我找不到一个合适的方法第一个是地图：这是我儿子的地址第二个是颜色选择器：我想为每个城市使用colorpicker，就像这样：信息可以在下面的不同分区中如果要将2个Javascript文件的内容复制到1个文件中，只需创建一个新的文件，例如mapcolor.js，并将地图文件的内容复制到该文件中，然后将col

我想制作一张土耳其彩色地图，就像这张全幅html页面中的图片一样。重点是让用户为每个城市选择颜色

在一天结束时，我想有一个这样的场景：

为了做到这一点，我必须结合下面的两个脚本。但是我找不到一个合适的方法

第一个是地图：这是我儿子的地址

第二个是颜色选择器：

我想为每个城市使用colorpicker，就像这样：信息可以在下面的不同分区中

如果要将2个Javascript文件的内容复制到1个文件中，只需创建一个新的文件，例如mapcolor.js，并将地图文件的内容复制到该文件中，然后将colorpicker文件的内容复制到该文件的末尾

如果您希望将这两个javascript文件都加载到页面中，则可以在html页面的

<html>
   <title>İnteraktif Türkiye Haritası</title>
   <head>
       <script type="text/javascript" src="js/jscolor.js"></script>
       <script type="text/javascript" src="js/jquery.qtip.min.js"></script>
   </head>
   <body>
      <!-- Your body elements goes here... -->
   </body>
</html>

如果没有，那么请分享更多关于您希望实现的目标的信息。

我建议用您希望最终用户为其着色的任何地图构建图像地图。在线上有大量免费的图像映射器，您可以使用它们完成任务的这一部分，它将为您提供以下内容：

<div class="mapContainer">
  <img id="bottle_map" src="../images/bottle.jpg" usemap="#bottle_map">
  <map name="bottle_map">
    <area shape="rect" alt="" coords="3,6,258,31" href="#" title="Saranac Legacy IPA">
    <area shape="rect" alt="" coords="279,5,336,32" href="#" title="four generations">
    <area shape="rect" alt="" coords="2,37,425,64" href="#" title="four generations">
    <area shape="rect" alt="" coords="1,69,386,95" href="#" title="four generations">
    <area shape="rect" alt="" coords="243,121,444,142" href="#" title="Matt Brewing Company">
    <area shape="rect" alt="" coords="4,143,186,163" href="#" title="Matt Brewing Company">
    <area shape="rect" alt="" coords="194,144,400,163" href="#" title="Our (great) grandfather">
    <area shape="rect" alt="" coords="3,163,252,187" href="#" title="Our (great) grandfather">
    <area shape="rect" alt="" coords="295,166,419,185" href="#" title="it's still family">
    <area shape="rect" alt="" coords="3,189,363,209" href="#" title="it's still family">
  </map>
  <canvas class="ctxLight" id="canvMap"></canvas>
</div>

我提供的calcDimension函数将为您返回这4个数字，因此您只需向它传递一个jQuery obj，其中包含用户单击以执行此操作的区域

您可以使用问题中列出的颜色拾取脚本生成十六进制颜色值，然后将这些值转换为拉票引擎可以解释的标准0-255 rgb值

你试过什么？你在哪里卡住了？这个问题在当前的形式中太广泛了。首先，在js颜色中，您必须添加类，但是由于城市是由js创建的，所以我无法添加用于更改颜色的类。所以我被困住了，我需要一些关于如何做的新想法

$(function() {
  var ctx;                                                                                                                                                                                                                                     
  var area;                                                                                                                                                                                                                                                                                                                                                                                                                                                                

  function calcDimension (obj) {
    var dimension = []
    position = obj.attr('coords').split(',');
    for (i = 0; i < 4; i++) {
      if (i < 2)
        dimension[i] = parseInt(position[i], 10);
      else
        dimension[i] = Math.abs(position[i -2] - position[i]);
    }
    return dimension
  }

  $('.mapContainer').css( {
    "position": "relative",
    "display": "inline-block"
  } );
  $('.imgLight').css( {
    "position": "absolute",   // necessery styling for                                                                                                                                                                                       
    "z-index": "1"            // layering image and canvas                                                                                                                                                                                   
  } );
  $('.ctxLight').css( {                                                                                                                                                                            
    "position": "relative",                                                                                                                                                         
    "z-index": "2",
    "pointerEvents": "none"
  } );

  ctx = document.getElementById('canvMap').getContext('2d');
  $('#canvMap').attr('width', $('#bottle_map').width());
  $('#canvMap').attr('height', $('#bottle_map').height());

  $('map > area').click(function() {
    area = calcDimension($(this));
    ctx.clearRect(area[0],area[1],area[2],area[3]); //prevents img stacking
    ctx.fillStyle = "rgba(0, 255, 0, 1)"; //last number is opacity
    ctx.fillRect(area[0],area[1],area[2],area[3]);
  } );
} );

ctx.clearRect(x1, y1, w, h);