この写真のようにトルコのカラフルな地図を全幅のHTMLページにしたいと思います。主なポイントは、各都市の色をユーザーが選択できるようにすることです。私は、以下の2つのスクリプトを結合する必要があり、それを行うためには 
2つのjavascriptスクリプトを組み合わせる
：一日の終わりに
は、私はこのようなシーンを持っていると思います。しかし、私はそれを行うための適切な方法を見つけることができませんでした。最初のマップは： ここは私のrepositoryのアドレスです。私はそのような各都市のためのカラーピッカーを使用したいjscolor
：
2つ目は、カラーピッカーであるあなたが内容を取得したい場合は 
（以下の情報は、別のdiv要素にすることができます） 2つのJavascriptファイルを1つのファイルにまとめ、単純に新しいファイルを作成するマップファイルの内容をこのファイルにコピーし、このファイルの最後にcolorpickerファイルの内容をコピーします。
あなたの代わりに、あなたはあなたのHTMLページの中にそのように行うことができますあなたのページにこれらのJavaScriptファイルの両方をロードする場合：
<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>
本部とキャンバスタグを使うことで追加する必要がありますあなたが地図を作るのに使ったウェブサイトがすべてあなたにすべてのエリアタグなどを与えた後。
領域がイメージ・マップ上でクリックされたときに、キャンバスが描画されます、基本的に
$(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]);
});
});
あなたがマップ上で、あなたが好きな色/不透明度の形状と、そのようなオーバーレイするHTML5のcanvasing機能を使用することができます。そこからクリックされた領域に適用されます。
私があなたに与えたことは、もう一度クリックすると色づけが解除されません。私はあなたがそれをどのように働かせたいかについていくつかの論理を思いつくことができると確信しています。すべてのことは、それをクリアするために必要なの呼び出すことです：
ctx.clearRect(x1, y1, w, h);
を私はあなただけのjQuery objは、ユーザーがそうするようにクリックしたエリアを含む、それを渡す必要がありますので、あなたがあなたのために、これらの4つの数字を返します与えたcalcDimension機能。
質問に記載されているカラーピッキングスクリプトを使用して16進の色の値を生成し、キャンバスエンジンが解釈できる0〜255のrgbの値に変換することができます。
何を試しましたか？どこで立ち往生しましたか？問題は現在の形では広すぎます。最初のステップで – Cristy
をjs色で追加する必要がありますが、都市はjsによって作成されるため、色を変更するクラスを追加することはできません。私はそれを行うことができますので、私はいくつか新鮮なアイデアが必要です – DoMajor7th