締切済み

Javascriptのことは、ほとんど分からないまま、各所で配布されて

2010/10/29 16:07

Javascriptのことは、ほとんど分からないまま、各所で配布されているサンプルソース等を組み合わせて、社内で使用するページを作成しています。実現したい機能は、以下のようなものですが、どうすれば良いのか分かりません。お分かりになられる方がおられましたら、お助け下さい。宜しくお願いします。【現状】・上下をフレームで分けたページで、上部がイラスト、下部がリスト（テーブル）です。・上部のイラストにはクリッカブルマップを設定しており、リンク部をクリックした際に　下部のリストの対応行を最上部に移動させています。【実現したい機能】・上部のクリッカブルマップのリンク部分をクリックした際に、それに対応した下部リストの行を　ハイライト表示したい。・下部のリストの任意の行をクリックした際、それに対応したイラストのリンク箇所をハイライト　表示したい。・下部のリスト行のハイライト表示は、複数行でも可能にしたい　⇒各行では、一度目のクリックでハイライト表示、二度目のクリックでハイライト表示を消す。

mibu_2010
お礼率40% (4/10)

JavaScript
回答数10
ありがとう数6

みんなの回答 （10）
専門家の回答

みんなの回答

yyr446
ベストアンサー率65% (870/1330)

2010/11/12 15:26 回答No.10

テーブルのスクロールの件＝＞これは、IEが<tabel>をスクロールできないからでした。他のならOKだったんですがそこで、<tabel>を外側のdivボックスに入れて、対処しました。 <canvas id="canvasmap" width="490" height="90" style="border:1px solid gray;"></canvas> <div style="height:300px; width:490px; overflow-y:scroll;margin:10px auto 10px;"> <table id="mytable" border="1"> <tbody> <tr><th>行</th><th>ハイライト位置</th><th>記述1</th><th>記述2</th></tr> <tr><td>1行目</td><td>無し</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> ---- </tbody> </table> </div> scriptの方も ×　this.tbl.scrollTop = this.tbl.rows[idx].offsetTop; ○　this.tbl.parentNode.scrollTop = this.tbl.rows[idx].offsetTop; 修正他にもまだ、おかしなところ、不可解なところがあるので、修正しながら、ぼとぼちとマイペースでやっていきます。

yyr446
ベストアンサー率65% (870/1330)

2010/11/11 19:57 回答No.9

上部のイラストを四箇所ともクリックしハイライト表示にした後、次にイラストのどこかをクリックすると、全てのイラストのハイライト表示が消えてしまいます。＝＞申し訳ないですね。そのあたりの不具合は承知してるというか、あきらめです。 FirefoxとかGoogleChromeだとうまくいくんですが、IEのなんちゃってCANVASだと、なぜか部分的に消せないんで、ごまかし処理してます。その辺に不具合があると思います。（CANVASはやはりIE9を待つしかないか...） <CANVAS>で表示出来る画像ファイルにPDFファイルは使用出来るのでしょうか？＝＞それは出来ませんね、将来的にもPDFのライセンスを持つADOBE社が、ライセンス放棄しないかぎり、ブラウザーがHTMLのみで直接PDFを表示するのは不可能かと．．．・イラストのリンク部をクリックした際に、下部のリストの対応行を　最上部に移動（イラストはそのままの位置で固定）する必要があります。＝＞これには対応してるはずですが。補足の追加の仕様要望について＝＞うーん、これはかなりの、ロジック書き換えになるかもしれない。

質問者

補足 2010/11/12 10:06

＝＞申し訳ないですね。そのあたりの不具合は承知してるというか、あきらめです。　　そうなんですね．．了解しました(^-^; ＝＞それは出来ませんね．．．　　なるほど、ライセンスの関係やったんですね．．(>_<) 　　これも了解しましたm(_ _)m ＝＞これには対応してるはずですが。　　実際使用する画像に合わせて、<CANVAS>のサイズ指定をwidth="700" height="500"に　　変更したのと、クリック範囲の座標値を変更しただけなのですが、イラストの該等箇所を　　クリックしても、リスト部分は全く動いてくれません(T_T) 　　ハイライト表示はクリックに合わせて動いてくれるのですが．．＝＞うーん、これはかなりの、ロジック書き換えになるかもしれない。　　私の最初の言葉足らずで、本当に申し訳ありません(>_<) 　　しかしながら、ここが対応されないと、残念ながら実際の社内ページには使用出来ない　　のです．．．(T_T) 本当に丸投げしてしまっているにも関わらず、ご親切にご対応下さり、お礼の言葉も無い程、感謝しております(*T_T*) 「最初から、ちゃんと説明しとけよ！」と、お腹立ちのこととは思いますが、何卒、宜しくお願い申し上げます．．(*>_<*)

yyr446
ベストアンサー率65% (870/1330)

2010/11/10 20:36 回答No.8

おそくなりましたが、CANVASを使って、ほぼ思惑どおりのが出来ました。 ※IE,Firefox,Chromeで動作確認ソースコードは長くなるので、 https://gist.github.com/670709 に投稿されてます。実働サンプルも https://github.com/yyr446/Table-Scroll-By-Canvas からたどって下さい。 ※githubの使い方まだよくわからんですけど．．．実装するHTMLのサンプルはこんな感じ↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Table Scroll</title> <style type="text/css"> </style>  <script type"text/javascript" src="/jslib/TblSclByCvs.js"></script> </head> <body> <h2 style="text-align:center;">Table Scroll</h2> <div style="text-align:center;margin:10px auto 10px;"> <canvas id="canvasmap" width="490" height="90" style="border:1px solid gray;"></canvas> <table id="mytable" border="1" style="display:block;height:300px;width:490px;overflow:scroll;margin:10px auto 10px;"> <tbody> <tr><th>行</th><th>ハイライト位置</th><th>記述1</th><th>記述2</th></tr> <tr><td>1行目</td><td>無し</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> <tr><td>2行目</td><td>左上</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> <tr><td>3行目</td><td>無し</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> <tr><td>4行目</td><td>右上</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> <tr><td>5行目</td><td>無し</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> <tr><td>6行目</td><td>左下</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> <tr><td>7行目</td><td>無し</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> <tr><td>8行目</td><td>右下</td><td>aaaaaaaaaaa</td><td>bbbbbbbbbbb</td></tr> </table> </div> <script type="text/javascript"> var mytbl_map = new Table_Map(document.getElementById("mytable")); mytbl_map.canvasmap_set(document.getElementById("canvasmap"), "/image/yahagi.png", //CANVASに表示する画像 // クリック範囲のs:左上座標,とe:右下座標,idx:対応するテーブルの行番号 {range:[ {s:{x:0,y:0},e:{x:245,y:45},idx:2}, {s:{x:246,y:0},e:{x:490,y:45},idx:4}, {s:{x:0,y:46},e:{x:246,y:90},idx:6}, {s:{x:246,y:46},e:{x:490,y:90},idx:8} ]}); </script> </body> </html>

質問者

お礼 2010/11/11 09:43

ありがとうございます！先ほど、リンクを辿りサンプルを見せて頂きました。希望通りの動きです！！．．ですが、少し動きが想定外のケースがあるようです。上部のイラストを四箇所ともクリックしハイライト表示にした後、次にイラストのどこかをクリックすると、全てのイラストのハイライト表示が消えてしまいます。しかも、その際にリスト部のハイライト表示は、５回目にクリックした部分に対応した行以外の３行はハイライト表示のままです。そのままイラストの残り３箇所をクリックすると、ハイライト表示とならずに、リスト部のハイライトのみが消えて行きます。あと、一つ追加のご質問なのですが、<CANVAS>で表示出来る画像ファイルにPDFファイルは使用出来るのでしょうか？（クリッカブルマップでは不可でしたので、GIF画像を使用していますが、もしPDFファイルを使用出来れば、GIF画像を作成する手間が省けますので．．）

質問者

補足 2010/11/11 15:59

作成頂いたサンプルを社内用ページに移植可能かどうか試していますが、その中で問題点が出て参りました。最初の【実現したい機能】での説明が不足していた為で、誠に申し訳ありませんが、以下の動作が必要になります(>_<) ・下部リストの１行に対応するイラストの箇所は複数の場合があります。　従いまして、リスト部をクリックしたときには、イラストの対応箇所は　全てハイライト表示される必要がありますし、イラストのどの対応箇所を　クリックした場合でもリストの対応行がハイライトされる必要があります。　（この場合、イラストの全ての対応箇所がハイライト表示されても、　クリックした箇所だけでも、どちらでもＯＫです）・イラストのリンク部をクリックした際に、下部のリストの対応行を　最上部に移動（イラストはそのままの位置で固定）する必要があります。 ※excanvas.jsをhttp://code.google.com/p/explorercanvas/downloads/listから　ダウンロードしましたが、IE7で上手く動作しませんでした。　色々調べてみたところ、http://code.google.com/p/flot/source/browse/trunk/excanvas.js 　に差替えれば上手く動作しました。

yyr446
ベストアンサー率65% (870/1330)

2010/11/05 14:01 回答No.7

１行目が動作しないのは、１行目はタイトルという扱いで対象外ということでしょうか？＝＞はい、そうです。１行目の<tr>は<th>と想定しておりました。１行目から対象にしたければ、Table_Map.prototype.table_clickを　Table_Map.prototype.table_click = function(event){ 　 var target = event.target || event.srcElement; 　 if(target.nodeName=="TD" || target.nodeName=="TH") 　 if(target.parentNode.rowIndex >= 0) 　 this.row_heighligt(target.parentNode.rowIndex); 　} にしてください。ちなみに１行目<th>の行の背景色と文字色をハイライトする前の色としてセットしてるんで、きにいらないなら　Table_Map.prototype.row_unheighligtht = function(idx){ 　 this.tbl.rows[idx].style.color = this.tbl.rows[0].style.color; 　 this.tbl.rows[idx].style.backgroundColor = this.tbl.rows[0].style.color; 　} を変えてください。さらにTable_Map.prototype.row_heighligtに余分なIF節が入ってました。　Table_Map.prototype.row_heighligt = function(idx){ 　 for(var i=0;i<this.highlight_idx.length;i++){ 　 if(this.highlight_idx[i] == idx){ 　 this.highlight_idx.splice(i,1); 　 this.row_unheighligtht(idx); 　 return; 　 } 　 } 　 this.highlight_idx.push(idx); 　 this.tbl.rows[idx].style.color="red"; 　 this.tbl.rows[idx].style.backgroundColor="yellow"; 　 this.tbl.scrollTop = this.tbl.rows[idx].offsetTop; 　} だけでOKです。

質問者

お礼 2010/11/05 14:21

いえ、1行目は対象外で問題ありません(^-^) 「1行目<th>の行の背景色と文字色をハイライトする前の色としてセット」も問題無いです(^O^) テーブル単独での機能としては、求めていた通りです！

質問者

補足 2010/11/05 15:40

すみません！サンプルソースでは問題無かったのですが、実際のデータに移植してみると正常に動きません。実際のデータとの差異を考えますと、１行に多くの列が存在すること位しか思いつきません。（実際のデータでは、1行の列数は15列です）挙動としては、以下の通りです。・行をクリックしても反応が無い⇒何行かをクリックしていると、たまに色が変わる。・色が変わった行を再度クリックしても、色が戻らない。実際のソースを貼り付ければ分かり易いのでしょうが、社外秘に当るリストですので．．

yyr446
ベストアンサー率65% (870/1330)

2010/11/04 17:56 回答No.6

一応、修正しました。 <script type="text/javascript"> function Table_Map(map,tbl){ 　this.map = map; 　this.tbl = tbl; 　this.clickcount = 0; 　this.highlight_idx = []; 　if('undefined' !== typeof window.addEventListener){ 　　 this.tbl.addEventListener('click',this,false); 　 }else if ('undefined' !== typeof window.attachEvent){ 　　 this.tbl.attachEvent('onclick',(function(that){ 　　 return function(){that.table_click(event);}})(this)); 　 } } Table_Map.prototype.handleEvent = function(event){ 　switch (event.type){ 　 case 'click':this.table_click(event);return; 　} } Table_Map.prototype.table_click = function(event){ 　var target = event.target || event.srcElement; 　if(target.nodeName=="TD") 　 if(target.parentNode.rowIndex > 0) 　　 this.row_heighligt(target.parentNode.rowIndex); } Table_Map.prototype.row_heighligt = function(idx){ 　if(this.highlight_idx.length > 0){ 　 for(var i=0;i<this.highlight_idx.length;i++){ 　　 if(this.highlight_idx[i] == idx){ 　　　this.highlight_idx.splice(i,1); 　　　this.row_unheighligtht(idx); 　　　return; 　　 } 　 } 　} 　this.highlight_idx.push(idx); this.tbl.rows[idx].style.color="red"; 　this.tbl.rows[idx].style.backgroundColor="yellow"; 　this.tbl.scrollTop = this.tbl.rows[idx].offsetTop; } Table_Map.prototype.row_unheighligtht = function(idx){ 　 this.tbl.rows[idx].style.color = this.tbl.rows[0].style.color; 　 this.tbl.rows[idx].style.backgroundColor = this.tbl.rows[0].style.color; } var mytbl_map = new Table_Map("dumy",document.getElementById("mytable")); </script> </body> でも、逆にテーブルの行をクリックした時に、イメージ画像の該当部分のみハイライトさせるを、どうやるかアイデアが浮かばない。やっぱりCANVASか．．．

質問者

お礼 2010/11/05 09:54

ありがとうございます！上部に <body> <table id="mytable" border="1" style="display:block;height:300px;overflow:scroll;"><tbody> 　<tr><td>1</td></tr> 　<tr><td>2</td></tr> 　<tr><td>3</td></tr> 　<tr><td>4</td></tr> 　<tr><td>5</td></tr> </tbody></table> を追加して試したところ、期待通りの動きになりました。（１行目が動作しないのは、１行目はタイトルという扱いで対象外ということでしょうか？）何もかもお任せで恐縮ですが、CANVAS使用でも構いませんので、宜しくお願いします。

質問者

補足 2010/11/09 10:56

度々すみません！一つ上の補足に書いた件、自己解決しました。（一度補足を書くと、追記出来ないようですので、こちらに書込みしました）ソース内に<PRE>タグを使用していたのがいけなかったようです。 <PRE>タグを外すと、上手く動きました。お騒がせ致しましたm(_ _)m

yyr446
ベストアンサー率65% (870/1330)

2010/11/02 17:45 回答No.5

完成品じゃないですよ。 canvas使わないクリッカブルマップなら、No.4の回答を使って、 <area>要素で、クリックしたとき何行目をハイライトするか onclick="mytbl_map.row_heighligt(15);return false;" で指定します <body> <div> <img src="/image/yui.jpg" usemap="#mymap" width="600" height="200"> <map name="mymap"> <area shape="rect" alt="Index" coords="0,0,20,20" href="#" onclick="mytbl_map.row_heighligt(15);return false;"> </map> </div> <table id="mytable" border="1" style="display:block;height:300px;overflow:scroll;"> 後はさっきと同じ、最後はコメントアウトしてね。 //mytbl_map.row_heighligt(15); 今日はもう時間無いので、すんません、あしからず....

yyr446
ベストアンサー率65% (870/1330)

2010/11/02 16:17 回答No.4

途中までですけど、（テーブルの処理だけ）※全角空白でインデントしてます。 <body> <table id="mytable" border="1" style="display:block;height:300px;overflow:scroll;"><tbody> 　<tr><td>1</td></tr> 　<tr><td>2</td></tr> 　<tr><td>3</td></tr> 　<tr><td>4</td></tr> 　<tr><td>5</td></tr> －－－－－－－－－－－　<tr><td>100</td></tr> </tbody></table> <script type="text/javascript"> function Table_Map(map,tbl){ 　this.map = map; 　this.tbl = tbl; 　this.highlight_idx = []; 　if('undefined' !== typeof window.addEventListener){ 　　 this.tbl.addEventListener('click',this,false); 　 }else if ('undefined' !== typeof window.attachEvent){ 　　 this.tbl.attachEvent('onclick',(function(that){ 　　 return function(){that.table_click(event);}})(this)); 　 } } Table_Map.prototype.handleEvent = function(event){ 　switch (event.type){ 　 case 'click':this.table_click(event);return; 　} } Table_Map.prototype.table_click = function(event){ 　var target = event.target || event.srcElement; 　if(target.nodeName=="TD"){ 　 for(var i=this.highlight_idx.length-1;i>=0;i--){ 　　 if(this.highlight_idx[i] == target.parentNode.rowIndex){ 　　　 this.row_unheighligtht(target.parentNode.rowIndex); 　　　 this.highlight_idx.splice(i,i); 　　 } 　　 //else this.mapheighligtht(target.parentNode.rowIndex); 　 } 　} } Table_Map.prototype.row_heighligt = function(idx){ 　for(var i=1;i<this.tbl.rows.length;i++){ 　 this.tbl.rows[i].style.color = this.tbl.rows[0].style.color; 　 this.tbl.rows[i].style.backgroundColor = this.tbl.rows[0].style.color; 　} 　this.tbl.rows[idx].style.color="red"; 　this.tbl.rows[idx].style.backgroundColor="yellow"; 　this.tbl.scrollTop = this.tbl.rows[idx].offsetTop; 　this.highlight_idx.push(idx); } Table_Map.prototype.row_unheighligtht = function(idx){ 　 this.tbl.rows[idx].style.color = this.tbl.rows[0].style.color; 　 this.tbl.rows[idx].style.backgroundColor = this.tbl.rows[0].style.color; } 　var mytbl_map = new Table_Map("dumy",document.getElementById("mytable")); 　mytbl_map.row_heighligt(3); 　mytbl_map.row_heighligt(5); </script> </body>

質問者

お礼 2010/11/02 17:22

ご回答ありがとうございます。早速、コピペさせて頂いたのですが、　<tr><td>5</td></tr> －－－－－－－－－－－　<tr><td>100</td></tr> の『－－－－－－－－－－－』だけ削除して確認したところ、（これは削除して宜しいんですよね？）最初、６行目の『１００』の部分が背景＝黄色／文字＝赤となっており、そこをクリックすると、背景＝白／文字＝黒となりました。その他の行をクリックしても、何の変化もありませんし、６行目も、その後は何の変化もしません．．(T_T) コピペの仕方がおかしかったのでしょうか？　orz

yyr446
ベストアンサー率65% (870/1330)

2010/10/29 18:28 回答No.3

無理にCANVAS利用を進めるわけじゃありませんが、他の人が誤解しないように書いときます。「ユーザー全員に追加ライブラリをインストールさせるのは苦情が出そうです」＝＞誤解です。各所で配布されているJavascriptライブラリーと同様に、javascript のライブラリーです。<script src="url"></script>で積むだけです。インストールなんて不要です。（もっともサーバーにはアップしとく必要がありますが）「社内ではIE8は使用しないように言われており」＝＞これはタイポ(タイプミス)かな、IE以外ではライブラリ無しで使えるのです。（IE9でも使えますが）

質問者

補足 2010/11/01 12:44

重ね重ね、無知を晒してしまい、お恥ずかしい限りですm(_ _)m ユーザーサイドに、特に負担をかけることが無いのであれば、 <CANVAS>の使用でも問題無いと思います(^-^)

yyr446
ベストアンサー率65% (870/1330)

2010/10/29 17:24 回答No.2

「多いページでは100行近くになり、その際イラストは表示させたままにしたい」＝＞　クリックによってそれぞれ違うページを表示するのであればフレームでしょうね。もっとも、同じサイト内のページなら、AJAXでテーブルの部分のみ取得して遷移せずに表示する事も可能ですが。　そのテーブルが一つのテーブルなら、たとえ100行でも、CSSでテーブルをheightを指定したボックスにして、スクロールさせれば、フレームにしなくても済みます。当然クリックしたら目的の行までスクロールするように作れます。「GIF画像を作成していますので、<CANVAS>は使えないのでは無いでしょうか？」 GIF画像でも、JPG画像でも何でも（何でもはうそ）たいていの画像ファイルは <CANVAS>上の好きな場所に好きな大きさで配置できます。ただIE8以下は、別途追加ライブラリーが必要です。　<CANVAS>を勤めたのに他意はありません、たまたま先日<CANVAS>利用のクリッカブルマップのサンプルを作ったばっかりなので、すぐに転用できるかなと。 http://okwave.jp/qa/q6257965.html ※クリッカブルマップほど面倒くさくないかなあと思っただけです。

質問者

補足 2010/10/29 17:43

テーブルは一つのテーブルですので、フレームを使わずに目的の機能が実現できるのでしたら、フレームにはこだわりませんm(_ _)m ただ<CANVAS>につきましては、IE8以下で別途の追加ライブラリーが必要と言うのは、ちょっと問題になりそうです．．というのも、社内ではIE8は使用しないように言われており、ユーザー全員に追加ライブラリをインストールさせるのは苦情が出そうです(T_T)

yyr446
ベストアンサー率65% (870/1330)

2010/10/29 16:18 回答No.1

　フレームで作るのはいやです。別にフレームにする必要性はまったくありません。かえって面倒になります。（もしかしてフレームの意味合いが違うのかも）クリッカブルマップはHTMLの<CANVAS>でもよいですか？リストのハイライトとは、背景色を黄色とかにするんですよね？リストって<ul>とか<dl>の事ですよね？（念のため）まる投げ回答をご希望なら、土日は返事しませんので、急ぐなら他の方の回答を使ってね、来週でよければ．．．．

質問者

補足 2010/10/29 16:42

言葉足らずで申し訳ありません。リスト部分は<table>で作成しています。このリストは多いページでは100行近くになり、その際イラストは表示させたままにしたいので、フレームを分けています。恥ずかしながら、HTMLの<CANVAS>を知りませんでした。しかしながら、イラストは元データ（AutoCADデータ）があり、それを変換させてGIF画像を作成していますので、<CANVAS>は使えないのでは無いでしょうか？

Javascriptのことは、ほとんど分からないまま、各所で配布されて