JavaScript | 【報告も】単発質問@JavaScript part3 | 173 回答例
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>