よくあるご質問

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

PCページの画像にmapが定義され、areaタグでリンク位置を指定しているとき、スマホページでは画像の大きさが異なるためリンクの位置が大幅にずれてしまいます。

その場合は、変換後JavaScriptに以下の通り記述してください。

「変換完了時に実行されるコード」
※以下コード中の「#sample」部分2か所はサイトで使われているIDに合わせて変更してください。

(function($) {
  var areas = $('#sample area');
  var coords = areas.map(function(i, area) { return [$(area).attr('coords').split(',')] });
  var image = $('img[usemap="#sample"]');
  var setup = function() {
    var ratio = image.width() / image[0].naturalWidth;
    coords.forEach(function(coord, i) {
      areas.eq(i).attr('coords', coord.map(function(c) { return Math.round(c * ratio) }).join(','));
    });
  };
  if (image[0].complete) {
    setup();
  } else {
    image.on('load', setup);
  }
  $(window).on('orientationchange resize', setup);
})(Zepto);

たとえば、

<img src="map.png" usemap="#sample" alt="地図">
<map name="sample">
	<area href="http://shutto.com/sample" shape="rect" alt="四角形" coords="225,79,289,122">
	<area href="http://shutto.com/sample" shape="rect" alt="四角形" coords="225,44,287,73">
</map>

のような場合は、
↓↓

(function($) {
  var areas = $('map[name="sample"] area');
  var coords = areas.map(function(i, area) { return [$(area).attr('coords').split(',')] });
  var image = $('img[usemap="#sample"]');
  var setup = function() {
    var ratio = image.width() / image[0].naturalWidth;
    coords.forEach(function(coord, i) {
      areas.eq(i).attr('coords', coord.map(function(c) { return Math.round(c * ratio) }).join(','));
    });
  };
  if (image[0].complete) {
    setup();
  } else {
    image.on('load', setup);
  }
  $(window).on('orientationchange resize', setup);
})(Zepto);

となります。

スマートフォン画面を縦→横にした場合でも自動でリサイズしますが、Android2の端末では縦→横のリサイズ対応はできませんのでご了承ください。