JavaScript | 【報告も】単発質問@JavaScript part3 | 173 回答例

mixi pg javascript

y.png


r.png


173.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>_</title>

<style type="text/css">
a {
	margin: .5em;
	padding: .5em;
}

a:hover,
a.hover {
	color: #fc0297;
	background-color: #c4ecf8;
}

img {
	border: 1px silver solid;
	display: block;
	position: relative;
	width: 98px;
	height: 98px;
	cursor: pointer;
}

#tohoku {
	top: -100px;
	left: 99px;
}
</style>

<script type="text/javascript">// <![CDATA[
(function() {
  var o = {
    hokkaido: { ja: '北海道', href: 'hokkaido.html' },
    tohoku: { ja: '東北', href: 'tohoku.html' }
  };
  for (var p in o) document.write(['<img id="', p, '" src="y.png" alt="', o[p].ja, '">'].join(''));
  for (var p in o) document.write(['<a href="', o[p].href, '" title="', o[p].ja, '">', o[p].ja, '</a>'].join(''));

  function $(id) { return document.getElementById(id); }

  function getImgByTitle(o) {
    for (var p in o)
      if (this.title === o[p].ja) return $(p);
  }

  function getAnchorById(o) {
    for (var i = 0, anchors = document.getElementsByTagName('a'), len = anchors.length; i < len; i++) {
      var anchor = anchors[i];
      if (o[this.id].ja === anchor.title) return anchor;
    }
  }

  for (var i = 0, anchors = document.getElementsByTagName('a'), len = anchors.length; i < len; i++) {
    var anchor = anchors[i];
    anchor.onmouseover = function() { getImgByTitle.apply(this, [o]).src = 'r.png'; };
    anchor.onmouseout  = function() { getImgByTitle.apply(this, [o]).src = 'y.png'; };
  }

  for (var i = 0, imgs = document.getElementsByTagName('img'), len = imgs.length; i < len; i++) {
    var img = imgs[i];
    img.onclick = function() { location.href = o[this.id].href; };
    img.onmouseover = function() { this.src = 'r.png'; getAnchorById.apply(this, [o]).className = 'hover'; };
    img.onmouseout  = function() { this.src = 'y.png'; getAnchorById.apply(this, [o]).className = ''; };
  }
})();
// ]]></script>

全国版にした。それにしても img を position: relative; でっていう要件すごいなあ……たいていはレガシーに一枚絵の img と map, area でやると思う。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>_</title>

<style type="text/css">
a {
	margin: .5em;
	padding: .5em;
}

a:hover,
a.hover {
	color: #fc0297;
	background-color: #c4ecf8;
}

img {
	border: 1px silver solid;
	display: block;
	position: relative;
	width: 98px;
	height: 98px;
	cursor: pointer;
}

#txt_map,
#txt_map li {
	margin: 0;
	padding: 0;
}

#txt_map {
	position: relative;
	top: -650px;
}

#txt_map li {
	display: inline;
	list-style-type: none;
}
</style>

<script type="text/javascript">// <![CDATA[
(function() {
  var o = {
    hokkaido           : { top:    0, left:  500, ja: '北海道'      , href: 'hokkaido.html' },
    tohoku             : { top:    0, left:  500, ja: '東北'        , href: 'tohoku.html' },
    kitakanto          : { top:    0, left:  500, ja: '北関東'      , href: 'kitakanto.html' },
    shutoken           : { top:    0, left:  500, ja: '首都圏'      , href: 'shutoken.html' },
    koshinetsu_hokuriku: { top: -200, left:  400, ja: '甲信越・北陸', href: 'koshinetsu_hokuriku.html' },
    kansai             : { top: -200, left:  200, ja: '関西'        , href: 'kansai.html' },
    shizuoka           : { top: -300, left:  400, ja: '静岡'        , href: 'shizuoka.html' },
    tokai              : { top: -400, left:  300, ja: '東海'        , href: 'tokai.html' },
    chugoku_shikoku    : { top: -500, left:  100, ja: '中国・四国'  , href: 'chugoku_shikoku.html' },
    naka_minamikyushu  : { top: -500, left:    0, ja: '中・南九州'  , href: 'naka_minamikyushu.html' },
    kyushu             : { top: -700, left:    0, ja: '九州'        , href: 'kyushu.html' },
    okinawa            : { top: -999, left:    0, ja: '沖縄'        , href: 'okinawa.html' }
  };

  document.write('<style type="text/css">');
  for (var p in o) document.write(['#', p, ' { top: ', o[p].top, 'px; left: ', o[p].left, 'px; }'].join(''));
  document.write('</style>');

  document.write('<div id="img_map">');
  for (var p in o) document.write(['<img id="', p, '" src="y.png" alt="', o[p].ja, '">'].join(''));
  document.write('</div>');

  document.write('<ul id="txt_map">');
  for (var p in o) document.write(['<li><a href="', o[p].href, '" title="', o[p].ja, '">', o[p].ja, '</a></li>'].join(''));
  document.write('</ul>');

  function $(id) { return document.getElementById(id); }

  function getImgByTitle(o) {
    for (var p in o)
      if (this.title === o[p].ja) return $(p);
  }

  function getAnchorById(o) {
    for (var i = 0, anchors = $('txt_map').getElementsByTagName('a'), len = anchors.length; i < len; i++) {
      var anchor = anchors[i];
      if (o[this.id].ja === anchor.title) return anchor;
    }
  }

  for (var i = 0, anchors = $('txt_map').getElementsByTagName('a'), len = anchors.length; i < len; i++) {
    var anchor = anchors[i];
    anchor.onmouseover = function() { getImgByTitle.apply(this, [o]).src = 'r.png'; };
    anchor.onmouseout  = function() { getImgByTitle.apply(this, [o]).src = 'y.png'; };
  }

  for (var i = 0, imgs = $('img_map').getElementsByTagName('img'), len = imgs.length; i < len; i++) {
    var img = imgs[i];
    img.onclick = function() { location.href = o[this.id].href; };
    img.onmouseover = function() { this.src = 'r.png'; getAnchorById.apply(this, [o]).className = 'hover'; };
    img.onmouseout  = function() { this.src = 'y.png'; getAnchorById.apply(this, [o]).className = ''; };
  }
})();
// ]]></script>