(ホームページ作成ソフトウェアのカテゴリで質問していましたが、回答が得られませんでしたのでカテゴリを変更して再度質問させていただいています。)
旅行記を載せるためのホームページを作成しています。
地図にいくつかの建物のイラストを置き、その下にいくつかボタンを並べます。
(建物のイラストを置く方法も悩んでいます。レイアウト枠にするのか、テーブルにするのか、またはクリッカブルマップにしたほうがいいのか、、、)
いずれかの建物をクリックすると、下に並んだボタンのうち左端のボタンが選択され右方向に2番目のボタンにつながるように矢印が出て、次に別の(または同じ)建物をクリックすると左端のボタンはそのままに左から2番目のボタンから右方向に矢印がでる。また3回目に建物をクリックすると左から3番目のボタンが選ばれて同様に矢印が出るようにしたいのですが・・・こんなことできるのでしょうか?
リンク先を同じものにするのは簡単ですが、「いずれかのボタンを押して」同じ結果を出すことを繰り返すことは可能でしょうか?
1からは作れませんが、JavaScriptはソースを見て修正ぐらいならできそうです。
何か案がございましたらお教えください。
よろしくお願いいたします。
No.9ベストアンサー
- 回答日時:
最初の回答者です。
+(window.pageXOffset||document.documentElement.scrollLeft)
+(window.pageYOffset||document.documentElement.scrollTop)
は余計でした。スクロールした時、かえってダメになります。
取り去ってください。
ボタンの内容も変更したいとの事ですが、何に変更したいのかが
わかりませんね。
いろいろと教えてくださいましてありがとうございます。
自分自身の理解力が低く、質問も的確にできておりませんが、ご丁寧な回答に感謝しております。
今後、もっと勉強してまいります。
本当にありがとうございました!
No.8
- 回答日時:
No4、No5です。
No5の例では、
e.innerHTML="Change !"; // 表示テキストを「Change !」に変える
e.style.color = "#f00"; // テキストの表示色を赤に変更
e.focus(); // 当該ボタンを選択(フォーカスを移動)
のようにしています。
>「ここをこんな風に直したらこういうところが変えられる」とかまで
>言ってもらわないと理解できません。
逆ではないですか?
できることはいろいろあるので、その質問だと回答は非常に長くなってしまい、結局は、仕様書を読みなさいという回答になります。
このようにしたいと具体的に質問することで、それに対応した回答が可能です。
スクリプトは無くても、マークアップのの構成や使用要素などを例示することによって、実際のものに近い回答が得られるはずです。
(もちろん処理内容についても的確に説明しておく必要があります)
「何をどうしたいのか」「何をどう変えたいのか」を具体的に示して言ってもらわないと、より的確なサジェスチョンはできませんということ。
抽象的な質問には抽象的な回答が通常ですが、回答をよりわかりやすくするために具体例を提示しているのにすぎません。
No2様を初め、とても具体的な回答をなさっていますが、質問者様からは具体例が一切提示されていないのが実態です。
(No4でもNo5でも、具体的なマークアップを示せばよいのに、と間接的に書いておいたつもりですが…)
この回答への補足
ご回答ありがとうございます。
まだイメージしかなく、実際に作ってもいないためあの説明が精一杯で、私の中では最大限に質問内容を記載したつもりでした。
質問として的確でない、ということでしたら大変申し訳ございません。
どのように質問すればいいかもわかっていなかったんですね。
ネット上でフリーで配布しているJavaScriptと同じような、「この数字を変えるとスピードが変わります」とか、「このメッセージを変えると表示を変えることができます」くらいの変更をすればいいくらいの回答を期待して質問していました。
今後質問するときには、もっと具体的に表現できるよう努力いたします。
みなさまには、苦労して作っていただいておりますのに、本当に申し訳ございませんでした。
No.7
- 回答日時:
一応、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
- 回答日時:
最初の回答者です。
すみません。またやっちゃいました。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
- 回答日時:
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();
}
とか?
この回答への補足
再度のご回答ありがとうございます。
「1からは作れませんが、JavaScriptはソースを見て修正ぐらいならできそうです。」と書いてしまったので、内容を理解できると誤解されたのかもしれませんが・・・まったくの素人ですので、「ここをこんな風に直したらこういうところが変えられる」とかまで言ってもらわないと理解できません。
素人すぎて・・・すみませ~ん。(;0;)
でも、教えていただいた内容を工夫してみます。
いろいろと考えてくださって、ありがとうございます!!
No.4
- 回答日時:
どのようなマークアップをしたいのか不明なので、かなりいい加減ですが、考え方のヒントとして・・・
(多分、建物などに画像を使うのだろうけれど、とりあえず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>
この回答への補足
ご回答ありがとうざいます!
全体的にはこんな感じのものを目指しています。
1つだけ違う点は、建物をクリックしたときに矢印が出ると同時に、下(表示された矢印の左側)にあるボタンの名前(表示)も変わってほしいんです。
名前(表示)の書き換え(or 他の画像にチェンジ?)は可能でしょうか?
申し訳ございませんが、再度お教えいただけますでしょうか?
よろしくお願いいたします。
No.3
- 回答日時:
続き
<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
- 回答日時:
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>を書きます。(続く)
※見やすくするため、全角空白文字でインデントしてあるので、
半角空白文字に直してください
この回答への補足
早速考えてくださいましてありがとうございます!
2つにわけてご指示いただいたものを1つのhtmlファイルにまとめました。
ダウンロードしたものは解凍したのち、excanvas.jsをhtmlファイルと同じフォルダ内に入れました。
readmeファイルを見て、「<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->」をhead内に入れました。
「続き」の内容は</body>の上に入れています。
また空白に見えているところは、それぞれが元通りに見えるところまで、半角空白を複数個入れています。
・・・とやってみた(つもり)なんですが、canvasの部分のところが真っ白で大きな四角のままで、何も表示されず、またその四角のなかをクリックすると「ページでエラーが発生しました」となり、下のボタンは何も変わりません。
この手順のどこかに間違いはありますか?
何度も申し訳ございません。ご示唆いただければうれしく思います。
No.1
- 回答日時:
要件を誤解して解釈しそうなので整理してみます。
1.建物のイラスト画像が建物1~建物nまでn個あります。
2.ボタンはボタン1~mまでm個あります。
3.建物nとボタンmの相関関係は動作の関連性は無しです。
2.どれかの建物画像をクリックした時、クリックしたのがX回目だとすると、
ボタン(1+(X-1))からボタン(x+1)へ → を書きます。
であってますか...
※地図に建物イラストを置く方法は、私なら、地図書くのが面倒なので、
GoogleMapsAPI Ver2.0を使って、建物をオーバーレー表示かマーカーで表示し
クリックしたら吹き出しでボタンを出力します。
この回答への補足
早速のご提案ありがとうございます。
おっしゃるとおりのことがしたいのですが、知識がなくできずにいます。
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- 教えて!goo このアプリについて!! 何個かの質問このアプリでして、ありがたいことに回答も何件か着きました! です 5 2022/12/01 03:37
- Visual Basic(VBA) 複数ファイルのデータの統合について 12 2022/05/14 12:03
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
- Visual Basic(VBA) VBAで早押しゲームを作りたい 4 2022/05/12 13:46
- プリンタ・スキャナー キャノンmp490プリンター【エラー番号5400】で【プリンタートラブルが発生しました。電源を入れ直 2 2023/07/24 17:45
- SQL Server DBのテーブルの設計ができず困っています。 2 2023/06/29 16:43
- その他(動画サービス) Tver アンケートに回答しても視聴できない(何度もアンケート画面が開く) 1 2023/01/13 21:47
- 教えて!goo ベストアンサー、お礼の仕方教えてください。 ベストアンサーやお礼をしたくてもボタンが見つかりません。 2 2023/01/13 18:49
- Access(アクセス) マイクロソフト アクセス2021のフォームビュー作成でレイアウトを帳票形式から単票形式にあとから変更 1 2023/03/03 10:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
jQueryのload()を使用して外部...
-
C# 演算 奇数と偶数 表現の仕方
-
Javaで避けるゲームを作ってい...
-
getElementByIdでASP.NETのText...
-
【JavaScript】数当てゲームを...
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
google apps scriptの終了のさせ方
-
JavaScriptで平日のみをカウン...
-
responseTextから連想配列へ
-
VSCODE[Python]の設定について
-
特定のclassを表示、非表示にする
-
JavaScriptで文字列の特定文字...
-
XMLの空白要素をJavas...
-
翌月を取得するGASが分かりません
-
今日で生まれて何日何分何十秒...
-
自分のwebページにtwitterのつ...
-
JAVAScriptでNotePad操作
-
html javascript リンク先アド...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報