（ホームページ作成ソフトウェアのカテゴリで質問していましたが、回答が得

質問

（ホームページ作成ソフトウェアのカテゴリで質問していましたが、回答が得られませんでしたのでカテゴリを変更して再度質問させていただいています。）

旅行記を載せるためのホームページを作成しています。

地図にいくつかの建物のイラストを置き、その下にいくつかボタンを並べます。
（建物のイラストを置く方法も悩んでいます。レイアウト枠にするのか、テーブルにするのか、またはクリッカブルマップにしたほうがいいのか、、、）

いずれかの建物をクリックすると、下に並んだボタンのうち左端のボタンが選択され右方向に２番目のボタンにつながるように矢印が出て、次に別の（または同じ）建物をクリックすると左端のボタンはそのままに左から２番目のボタンから右方向に矢印がでる。また３回目に建物をクリックすると左から３番目のボタンが選ばれて同様に矢印が出るようにしたいのですが・・・こんなことできるのでしょうか？

リンク先を同じものにするのは簡単ですが、「いずれかのボタンを押して」同じ結果を出すことを繰り返すことは可能でしょうか？

１からは作れませんが、JavaScriptはソースを見て修正ぐらいならできそうです。

何か案がございましたらお教えください。
よろしくお願いいたします。

回答No.9

yyr446 · ベストアンサー

最初の回答者です。

　+(window.pageXOffset||document.documentElement.scrollLeft)

　+(window.pageYOffset||document.documentElement.scrollTop)

は余計でした。スクロールした時、かえってダメになります。
取り去ってください。

ボタンの内容も変更したいとの事ですが、何に変更したいのかが
わかりませんね。

お礼

いろいろと教えてくださいましてありがとうございます。

自分自身の理解力が低く、質問も的確にできておりませんが、ご丁寧な回答に感謝しております。
今後、もっと勉強してまいります。

本当にありがとうございました！

回答No.8

fujillin

No4、No5です。

No5の例では、
　e.innerHTML="Change !"; // 表示テキストを「Change !」に変える
　e.style.color = "#f00"; // テキストの表示色を赤に変更
　e.focus(); //　当該ボタンを選択（フォーカスを移動）
のようにしています。

＞「ここをこんな風に直したらこういうところが変えられる」とかまで
＞言ってもらわないと理解できません。
逆ではないですか？
できることはいろいろあるので、その質問だと回答は非常に長くなってしまい、結局は、仕様書を読みなさいという回答になります。

このようにしたいと具体的に質問することで、それに対応した回答が可能です。
スクリプトは無くても、マークアップのの構成や使用要素などを例示することによって、実際のものに近い回答が得られるはずです。
（もちろん処理内容についても的確に説明しておく必要があります）

「何をどうしたいのか」「何をどう変えたいのか」を具体的に示して言ってもらわないと、より的確なサジェスチョンはできませんということ。
抽象的な質問には抽象的な回答が通常ですが、回答をよりわかりやすくするために具体例を提示しているのにすぎません。
No2様を初め、とても具体的な回答をなさっていますが、質問者様からは具体例が一切提示されていないのが実態です。
（No4でもNo5でも、具体的なマークアップを示せばよいのに、と間接的に書いておいたつもりですが…）

補足

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

まだイメージしかなく、実際に作ってもいないためあの説明が精一杯で、私の中では最大限に質問内容を記載したつもりでした。
質問として的確でない、ということでしたら大変申し訳ございません。
どのように質問すればいいかもわかっていなかったんですね。

ネット上でフリーで配布しているJavaScriptと同じような、「この数字を変えるとスピードが変わります」とか、「このメッセージを変えると表示を変えることができます」くらいの変更をすればいいくらいの回答を期待して質問していました。

今後質問するときには、もっと具体的に表現できるよう努力いたします。
みなさまには、苦労して作っていただいておりますのに、本当に申し訳ございませんでした。

回答No.7

yyr446

一応、IEでも動くようになりました。
<script type="text/javascript">
/*　最初の部分は省略 */
//Canvasコントローラー生成
　var canvas = document.getElementById("map");
　canvas.width=map.w;
　canvas.height=map.h;
　if (typeof(G_vmlCanvasManager) != 'undefined')
　 canvas = G_vmlCanvasManager.initElement(canvas);
　var ctx = canvas.getContext('2d');
　ctx.clearRect(0,0,canvas.width,canvas.height);

　var mapimage= new Image();
　mapimage.src = map.src + "?" + new Date().getTime();
　mapimage.onload=function(){
　 ctx.drawImage(mapimage,0,0,map.w,map.h);
　};

　for(var i=0;i<tatemono.length;i++){
　 var img= new Image();
　 img.src = tatemono[i].src + "?" + new Date().getTime();
　 img.onload=(function(obj){
　　 return function(event){
　　　ctx.drawImage(this,obj.x,obj.y,obj.w,obj.h);
　　 }
　 })(tatemono[i]);
　}

　canvas.onclick=function(e){
　 var target = e?e.target:event.srcElement;
　 var rect = target.getBoundingClientRect();
　 var x = (e?e.clientX:event.clientX) + (window.pageXOffset||document.documentElement.scrollLeft);
　 var y = (e?e.clientY:event.clientY) + (window.pageYOffset||document.documentElement.scrollTop);
　 var mouseX = x - rect.left;
　 var mouseY = y - rect.top;
　 for(var i=0;i<tatemono.length;i++){
　　 if((tatemono[i].x < mouseX &&
　　　 mouseX < (tatemono[i].x + tatemono[i].w))
　　　&& (tatemono[i].y < mouseY &&
　　　 mouseY < (tatemono[i].y + tatemono[i].h))
　　 ){
　　　//alert(i);
　　　count += 1;
　　　(function(){
　　　 var allow = [];
　　　 var span = document.getElementById("button_area").getElementsByTagName("span");
　　　 for(var i=0;i<span.length;i++){
　　　　if(span[i].className=="allow") allow.push(span[i]);
　　　 }
　　　 for(var i=0;i<allow.length;i++){
　　　　allow[i].style.visibility = "hidden";
　　　 }
　　　 if(count > 4) count = 1;
　　　 allow[count-1].style.visibility = "visible";
　　　})(count);
　　 }
　 }
　}
</script>

回答No.6

yyr446

最初の回答者です。
すみません。またやっちゃいました。onloadのイベントはバブル
しませんでした。
img.onload=(function(obj){
return function(event){
var target = event.target || event.srcElement;
はだめだめでした。window.eventはnullですから、
event.srcElementなんて取得できてませんでした。
とりあえず、そのばしのぎで、
img.onload=(function(obj){
return function(event){
var target = this;
ctx.drawImage(target,obj.x,obj.y,obj.w,obj.h);
}
})(tatemono[i]);
ですが、なんかIEは他にもまずいところがあるみたいで、
まじめにやらないとだめっすね。
昨日は暇が無かったんで、IEの検証がおざなりでした。
直しときます。
直しときます。

回答No.5

fujillin

No4です。
No4にも書きましたように、多分、マークアップが実際とはまったく異なるでしょうから、あくまで「考え方の参考」として回答しました。

＞名前（表示）の書き換え（or 他の画像にチェンジ？）は可能でしょうか？
要素が特定できているので、CSSの変更やテキストの変更、あるいは要素そのものの変更も不可能ではありません。
でも、上にも書いたように、このコードが実際の使い物になるとは思えませんが？

例えば、
if (e = btn.getElementsByTagName("button")[this.count-1]) e.focus();
　　　　　　　　　　　　　　　↓
if (e = btn.getElementsByTagName("button")[this.count-1]) {
e.innerHTML="Change !";
e.style.color = "#f00";
e.focus();
}

とか？

補足

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

「１からは作れませんが、JavaScriptはソースを見て修正ぐらいならできそうです。」と書いてしまったので、内容を理解できると誤解されたのかもしれませんが・・・まったくの素人ですので、「ここをこんな風に直したらこういうところが変えられる」とかまで言ってもらわないと理解できません。

素人すぎて・・・すみませ～ん。（；０；）

でも、教えていただいた内容を工夫してみます。

いろいろと考えてくださって、ありがとうございます！！

回答No.4

fujillin

どのようなマークアップをしたいのか不明なので、かなりいい加減ですが、考え方のヒントとして・・・
（多分、建物などに画像を使うのだろうけれど、とりあえずdiv等で代用）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
div#map { width:640px; height:400px; border:1px solid #ddd; background-color:#eef; }
div#map .building { width:100px; height:100px; margin:40px; padding:10px; float:left; background-color:#ccc; }
div#buttons { margin-top:30px; }
div#buttons .arrow { display:inline-block; width:2.5em; text-align:center; visibility:hidden; }
</style>

<script type="text/javascript">
<!--
var sample = function(evt) {
var e, btn, t = evt.target || evt.srcElement;
if (t.className != "building") return;
this.count = this.count?++this.count:1;
btn = document.getElementById("buttons");
if (e = btn.getElementsByTagName("button")[this.count-1]) e.focus();
if (e = btn.getElementsByTagName("span")[this.count-1]) e.style.visibility = "visible";
}
//-->
</script>
</head>
<body>

<div id="map" onclick="sample(event)">
<div class="building">building 1</div>
<div class="building">building 2</div>
<div class="building">building 3</div>
<div class="building">building 4</div>
<div class="building">building 5</div>
<div class="building">building 6</div>
</div>

<div id="buttons">
<button type="button">button 1</button><span class="arrow">→</span>
<button type="button">button 2</button><span class="arrow">→</span>
<button type="button">button 3</button><span class="arrow">→</span>
<button type="button">button 4</button><span class="arrow">→</span>
<button type="button">button 5</button><span class="arrow">→</span>
<button type="button">button 6</button>
</div>

</body>
</html>

補足

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

全体的にはこんな感じのものを目指しています。

１つだけ違う点は、建物をクリックしたときに矢印が出ると同時に、下（表示された矢印の左側）にあるボタンの名前（表示）も変わってほしいんです。
名前（表示）の書き換え（or 他の画像にチェンジ？）は可能でしょうか？

申し訳ございませんが、再度お教えいただけますでしょうか？
よろしくお願いいたします。

回答No.3

yyr446

続き
<script type="text/javascript">
　var map = {src:"map.jpg",w:640,h:480};
　var tatemono = [
　 {src:"tate1.jpg",w:50,h:50,x:10,y:10},
　 {src:"tate2.jpg",w:50,h:50,x:20,y:200},
　 {src:"tate3.jpg",w:50,h:50,x:20,y:100},
　 {src:"tate4.jpg",w:50,h:50,x:100,y:10},
　 {src:"tate5.jpg",w:50,h:50,x:200,y:100}
　]
　var count = 0;
//Canvasコントローラー生成
　var canvas = document.getElementById("map");
　if (typeof(G_vmlCanvasManager) != 'undefined')
　 canvas = G_vmlCanvasManager.initElement(canvas);
　canvas.width=map.w;
　canvas.height=map.h;
　var ctx = canvas.getContext('2d');
　ctx.clearRect(0,0,canvas.width,canvas.height);

　var mapimage= new Image();
　mapimage.src = map.src + "?" + new Date().getTime();
　mapimage.onload=function(){
　 ctx.drawImage(mapimage,0,0,map.w,map.h);
　}
　for(var i=0;i<tatemono.length;i++){
　 var img= new Image();
　 img.src = tatemono[i].src + "?" + new Date().getTime();
　 img.onload=(function(obj){
　　 return function(event){
　　　var target = event.target || event.srcElement;
　　　ctx.drawImage(target,obj.x,obj.y,obj.w,obj.h);
　　 }
　 })(tatemono[i]);
　}
　canvas.onclick=function(event){
　 var target = event.target || event.srcElement;
　 var rect = target.getBoundingClientRect();
　 var mouseX = event.clientX - rect.left;
　 var mouseY = event.clientY - rect.top;
　 for(var i=0;i<tatemono.length;i++){
　　 if((tatemono[i].x < mouseX &&
　　　 mouseX < (tatemono[i].x + tatemono[i].w))
　　　&& (tatemono[i].y < mouseY &&
　　　 mouseY < (tatemono[i].y + tatemono[i].h))
　　 ){
　　　//alert(i);
　　　count += 1;
　　　(function(){
　　　 var allow = [];
　　　 var span = document.getElementById("button_area").getElementsByTagName("span");
　　　 for(var i=0;i<span.length;i++){
　　　　if(span[i].className=="allow") allow.push(span[i]);
　　　 }
　　　 for(var i=0;i<allow.length;i++){
　　　　allow[i].style.visibility = "hidden";
　　　 }
　　　 if(count > 4) count = 1;
　　　 allow[count-1].style.visibility = "visible";
　　　})(count);
　　 }
　 }
　}
</script>

<canvas>要素については
http://www.html5.jp/canvas/index.html
をご参照下さい

回答No.2

yyr446

HTML5の<canvas>要素を使って実現してみました。IE8以下は<canvas>要素
がサポートされてないので、「Explorercanvas」を替わりに使います。
まず、↓からexcanvas.jsをダウンロードして下さい。
http://code.google.com/p/explorercanvas/

<canvas>に地図画像と建物画像を表示し、建物画像がクリックされた時、
ボタンエリアの"＝＞"の表示位置を変えています。

HTMLは↓です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Button Canvas By HTML5</title>
<style type="text/css"></style>
<!--[if IE]><script type="text/javascript" src="/jslib/excanvas.js"></script><![endif]-->
</head>
<body>
<h2 style="text-align:center">Button Canvas By HTML5 or IE(excanvas.js)</h2>
<div style="text-align:center;margin 5px auto 5px;">
　<canvas id="map" style="border:solid 1px gray;"></canvas>
　<div id="button_area" style="margin-top:10px;">
　 <a href="ボタン1のリンク先"><button>ボタン1</button></a>
　<span class="allow" style="visibility:hidden;">　＝＞　</span>
　 <a href="ボタン2のリンク先"><button>ボタン2</button></a>
　<span class="allow" style="visibility:hidden;">　＝＞　</span>
　 <a href="ボタン3のリンク先"><button>ボタン3</button></a>
　<span class="allow" style="visibility:hidden;">　＝＞　</span>
　 <a href="ボタン4のリンク先"><button>ボタン4</button></a>
　<span class="allow" style="visibility:hidden;">　＝＞　</span>
　 <a href="ボタン5のリンク先"><button>ボタン5</button></a>
　</div>
</div>
</body>
</html>

</body>の上に、以下の<script>を書きます。（続く）
※見やすくするため、全角空白文字でインデントしてあるので、
半角空白文字に直してください

補足

早速考えてくださいましてありがとうございます！

２つにわけてご指示いただいたものを１つのhtmlファイルにまとめました。
ダウンロードしたものは解凍したのち、excanvas.jsをhtmlファイルと同じフォルダ内に入れました。
readmeファイルを見て、「<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->」をhead内に入れました。
「続き」の内容は</body>の上に入れています。
また空白に見えているところは、それぞれが元通りに見えるところまで、半角空白を複数個入れています。

・・・とやってみた（つもり）なんですが、canvasの部分のところが真っ白で大きな四角のままで、何も表示されず、またその四角のなかをクリックすると「ページでエラーが発生しました」となり、下のボタンは何も変わりません。

この手順のどこかに間違いはありますか？

何度も申し訳ございません。ご示唆いただければうれしく思います。

回答No.1

yyr446

要件を誤解して解釈しそうなので整理してみます。
１．建物のイラスト画像が建物1～建物ｎまでｎ個あります。
２．ボタンはボタン1～ｍまでｍ個あります。
３．建物ｎとボタンｍの相関関係は動作の関連性は無しです。
２.どれかの建物画像をクリックした時、クリックしたのがX回目だとすると、
　　ボタン（１+（X-1））からボタン（ｘ+1）へ　→　を書きます。
であってますか．．．

※地図に建物イラストを置く方法は、私なら、地図書くのが面倒なので、
　GoogleMapsAPI Ver2.0を使って、建物をオーバーレー表示かマーカーで表示し
　クリックしたら吹き出しでボタンを出力します。

補足

早速のご提案ありがとうございます。

おっしゃるとおりのことがしたいのですが、知識がなくできずにいます。

よろしくお願いいたします。