gooID利用規約 改定のお知らせ

いつもお世話になっています。

西日本、東日本の地図を2枚用意し、
それぞれクリッカブルにしました。

その2枚をホームページ上でダイナミックHTML,JavaScriptを
使用して、地図内の「東日本地図へ」「西日本地図へ」という
ボタンをクリックすることで、切り替わるようにしたいのですが、
なにぶん初心者のため、全く方法がわかりません。

どなたかご存知の方、
ご教授下さい!!!
宜しくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

No1、No3です。



>どうすればいいかというところまではわかっているのですが、
>方法がわかりません・・・
No1の回答は、一つの方法の具体的なサンプルとして提示したつもりでしたが?(何がわかっていて、何がわからないのかよくわかりませんが…)

方法は他にもいろいろ考えられます。
画像のsrcを指定して、画像を取り替える(描き換える)方法とか、
画像を同じ位置に重ねておいて、重なり順を制御するとか…
No1は(回答にも書きましたが)表示/非表示の切替えで行う方法です。

どの方法でもよろしいかと思いますが、表示/非表示の例にしたのは、スクリプトがオフの時に、全部が表示されるものにしやすかったから。
(もちろん、他の方法でも同様のことは可能です)

>何か他の記述が必要でしょうか?
No3にも書きましたように、現在の表示内容の判定にボタンの表示内容を利用していましたので、その部分を修正しないと動きません。
もとのもの引数thisの内容は、ボタンオブジェクトですが、ボタンがなくなれば当然不要になるはずです。(あるいは別の引数がいるのかも←コーディングによってどうとでもなります。)
ついでながら、no3の補足のhref以下の部分の記述が何を意図しているのか、私には理解できませんでした。


そもそも対象とするHTMLソースの構造すら不明ですので、ぴったりのコードになるわけもありませんが、とりあえず、指定div内の画像が順に表示されるという機能に書き直しました。
方法はNo1と同じ方法です。(当然ながらコードは違います。)
トリガーは何でもOKにしてありますので、クリッカブルマップでもそれ以外でも、また複数あっても可です。(nextを呼び出す毎に、画像が切り替わる。)
<html>
<head>
<style type="text/css">
#Maps img {width:200px; height:200px;}
</style>
<script type="text/javascript">
window.onload = function() {
var e=maps(), i=1;
while (e[i]) e[i++].style.display = 'none';
}
function next() {
var e=maps(), i=0;
while (e[i]) if (e[i++].style.display!='none') break;
if (i<=e.length) {
e[i-1].style.display = 'none';
e[i % e.length].style.display = '';
}
return false;
}
function maps() {
return document.getElementById('Maps').getElementsByTagName('IMG');
}
</script>
</head>
<body>
<div id="Maps">
<img src="A.jpg">
<img src="B.jpg">
<img src="C.jpg">
<img src="D.jpg">
</div>
<button onclick="next();">next</button>
</body>
</html>

なお、スクリプトを使う際は、内容をちゃんと理解した上で使用されることをお勧めします。
そうでないと、将来のごく簡単な修正ですら不可能ということになってしまいますので。
    • good
    • 0
この回答へのお礼

度々のご回答ありがとうございます!

早速上記で進めてみたいと思います。
今回は時間がなく、かなり場当たり的な対応に
なってしまいましたが、、、これを機に
私もJavaScriptの勉強を始めたいと思います。

お手数をお掛けして申し訳ありませんでした!!!

お礼日時:2009/07/08 04:38

No1です。



>JavaScriptでの地図の切り替え表示
とのご質問なので、多少は知識があるものと思います。

>やはりボタンが画像外でないと無理でしょうか??
ボタンはファンクションを呼び出すトリガーになっているだけなので、クリッカブルマップ内に入れたければ、原理的にはトリガーを入れ替えてあげるだけで可能です。

ただし、No1の例の場合、ボタンタグがなくなってしまうので、現在の表示(東か西か)を判別している部分などを修正する必要があります。
    • good
    • 0
この回答へのお礼

度々すみません。
ご丁寧なご回答ありがとうございます。

私の知識では、どうすればいいかというところまでは
わかっているのですが、方法がわかりません・・・。

マッピングのところに、
<area shape="rect" coords="39,2,119,13" href=javascript:id="link" onclick="change(this)" />
といった感じで入れ込んでみたのですが、
反応しませんでした・・・。

何か他の記述が必要でしょうか?

何度もお手間を取ってしまい申し訳ありません!
もしお時間があればご回答頂ければ幸いです!

お礼日時:2009/07/07 09:10

すこしはしらべてからしつもんし・・


けんさくきーわーど

css position absolute top left
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

この場合CSSのPositionで指定して画像を入替えても
Mappingは入れ替わらないため、私の求めている質問の回答内容とはずれると思います。

お手数をお掛けしてすみません。

お礼日時:2009/07/07 04:17

よくやられている方法だと、それぞれのマップの表示/非表示を切り替えてあげる方法。



以下、一例です。
(スクリプトがオフの場合は両方のマップが表示され、スクリプトがオンの場合は片方のマップと切り替えボタンが表示されます)
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var e = document.getElementById('link');
e.parentNode.style.display = 'block';
change(e);
}
function change(e) {
var f = e.innerHTML.substr(0,1)=='東';
e.innerHTML = (f?'西':'東') + '日本の地図へ';
document.getElementById('East').style.display = f?'block':'none';
document.getElementById('West').style.display = f?'none':'block';
}
</script>
</head>

<body>
<div style="display:none;">
<button id="link" onclick="change(this)">東</button>
</div>
<p><div id="East">
<img src="east.jpg" usemap="#eastMap">
</div>
<p><div id="West">
<img src="west.jpg" usemap="#westMap">
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

詳しいご回答ありがとうございます!!
これで問題なく動作しています♪

もう1点なのですが、実はボタンを
地図内の画像として埋め込み、そこをクリックされたときに、
東西を入替えようと思っているのですが・・・
やはりボタンが画像外でないと無理でしょうか??

お手数なのですが、もしご存知でしたら
こちらもご教授頂ければ幸いです!!

お礼日時:2009/07/04 05:39

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング