擬似イメージマップjavascript map_link.jsの説明

map_link.jsのソースは以下になります。

説明はコメントに付いていますので参照してください。

// -------------------------------------------------------------
// jQueryを使わないでイメージマップをレスポンシブ化
// map_img1クリック位置からmap_img2で色を求める
// -------------------------------------------------------------
function map_link(clientRect) {

  // ----- map_img2をcanvasにセット
  var img2 = document.getElementById("map_img2");
  var cv = document.createElement('canvas');
  cv.width = img2.naturalWidth;
  cv.height = img2.naturalHeight;
  var ct = cv.getContext('2d');
  ct.drawImage(img2, 0, 0);
  
  // ----- canvasを1次元配列にセット
  var imgdat = ct.getImageData(0, 0, cv.width, cv.height);
  
  // ----- クリック位置を画像の座標に変換
  var x = event.pageX - clientRect.left + window.pageXOffset ;
  var y = event.pageY - clientRect.top  + window.pageYOffset ;
  var x_size = clientRect.width ;            // レスポンシブWebデザインで表示されている画像の横幅
  var bairitu = img2.naturalWidth / x_size ;  
  var ox = parseInt(bairitu * x) ;           //オリジナルサイズでのクリックx位置
  var oy = parseInt(bairitu * y) ;           //オリジナルサイズでのクリックy位置
  
  // ----- クリックされた座標から配列pointを求める
  var p = (ox + (oy * img2.naturalWidth)) * 4 ; 
  var r = imgdat.data[p];                   // クリックされた座標の色
  var g = imgdat.data[p+1];
  var b = imgdat.data[p+2];
  //var a = imgdat.data[p+3];
  Color_map2link(r, g , b);                 // 色を元にリンクを行う
}
// -------------------------------------------------------------
// 色を元にテーブルからリンクを行う
// -------------------------------------------------------------
function Color_map2link(r , g , b) {
     for (var i = 0; i < 20 ; i = i + 1) {
       p = i * 4 ;
      if (link_map[p] == -1) { break; }
      // ----- 色の誤差±2ずつ補正してテーブルサーチ jpegだと色が変わる
      sw = 0 ;
      if(r >= (link_map[p    ] -2 ) && r <= (link_map[p    ] + 2)) sw = sw + 1 ;
      if(g >= (link_map[p + 1] - 2) && g <= (link_map[p + 1] + 2)) sw = sw + 1 ;
      if(b >= (link_map[p + 2] - 2) && b <= (link_map[p + 2] + 2)) sw = sw + 1 ;
      if (sw == 3 ){
        //document.getElementById( "kekka" ).innerHTML = "<p>" + link_map[p+3] + r + "," + g + "," + b;
★      url = "http://www.google.co.jp/search?hl=ja&source=hp&q= " + link_map[p+3]  ;
        window.open(url, '_blank');
        break;
      }
    }
  }

上記ソースでは★の部分でgoogle検索をしていますがlink_mapテーブルに直接htmlを記述して以下のように修正すればリンク処理になります。

★ -->  url = link_map[p+3] ;

link_map = [
// R G B    文字列
221, 235, 247, “http://・・・・・”,
189, 215, 238, “http://・・・・・”,

 

 

サイトマップに戻る  次ページ・ペイントソフトでのリンク領域の作成