重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

Javascriptのことは、ほとんど分からないまま、各所で配布されているサンプルソース等を
組み合わせて、社内で使用するページを作成しています。

実現したい機能は、以下のようなものですが、どうすれば良いのか分かりません。
お分かりになられる方がおられましたら、お助け下さい。

宜しくお願いします。

【現状】
・上下をフレームで分けたページで、上部がイラスト、下部がリスト(テーブル)です。
・上部のイラストにはクリッカブルマップを設定しており、リンク部をクリックした際に
 下部のリストの対応行を最上部に移動させています。

【実現したい機能】
・上部のクリッカブルマップのリンク部分をクリックした際に、それに対応した下部リストの行を
 ハイライト表示したい。
・下部のリストの任意の行をクリックした際、それに対応したイラストのリンク箇所をハイライト
 表示したい。
・下部のリスト行のハイライト表示は、複数行でも可能にしたい
 ⇒各行では、一度目のクリックでハイライト表示、二度目のクリックでハイライト表示を消す。

A 回答 (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;
修正

他にもまだ、おかしなところ、不可解なところがあるので、
修正しながら、ぼとぼちとマイペースでやっていきます。
    • good
    • 0

上部のイラストを四箇所ともクリックしハイライト表示にした後、


次にイラストのどこかをクリックすると、全てのイラストの
ハイライト表示が消えてしまいます。

=>申し訳ないですね。そのあたりの不具合は承知してるというか、あきらめです。
FirefoxとかGoogleChromeだとうまくいくんですが、IEのなんちゃってCANVASだと、
なぜか部分的に消せないんで、ごまかし処理してます。その辺に不具合があると
思います。(CANVASはやはりIE9を待つしかないか...)

<CANVAS>で表示出来る画像ファイルにPDFファイルは使用出来るのでしょうか?

=>それは出来ませんね、将来的にもPDFのライセンスを持つADOBE社が、ライセンス
放棄しないかぎり、ブラウザーがHTMLのみで直接PDFを表示するのは不可能かと...


・イラストのリンク部をクリックした際に、下部のリストの対応行を
 最上部に移動(イラストはそのままの位置で固定)する必要があります。

=>これには対応してるはずですが。


補足の追加の仕様要望について
=>うーん、これはかなりの、ロジック書き換えになるかもしれない。

この回答への補足

=>申し訳ないですね。そのあたりの不具合は承知してるというか、あきらめです。

  そうなんですね..了解しました(^-^;

=>それは出来ませんね...

  なるほど、ライセンスの関係やったんですね..(>_<)
  これも了解しましたm(_ _)m

=>これには対応してるはずですが。

  実際使用する画像に合わせて、<CANVAS>のサイズ指定をwidth="700" height="500"に
  変更したのと、クリック範囲の座標値を変更しただけなのですが、イラストの該等箇所を
  クリックしても、リスト部分は全く動いてくれません(T_T)
  ハイライト表示はクリックに合わせて動いてくれるのですが..

=>うーん、これはかなりの、ロジック書き換えになるかもしれない。

  私の最初の言葉足らずで、本当に申し訳ありません(>_<)
  しかしながら、ここが対応されないと、残念ながら実際の社内ページには使用出来ない
  のです...(T_T)


本当に丸投げしてしまっているにも関わらず、ご親切にご対応下さり、お礼の言葉も無い程、
感謝しております(*T_T*)
「最初から、ちゃんと説明しとけよ!」と、お腹立ちのこととは思いますが、
何卒、宜しくお願い申し上げます..(*>_<*)

補足日時:2010/11/12 10:06
    • good
    • 0

おそくなりましたが、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>
<!--[if IE]><script type="text/javascript" src="/jslib/excanvas.js"></script><![endif]-->
<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>

この回答への補足

作成頂いたサンプルを社内用ページに移植可能かどうか試していますが、
その中で問題点が出て参りました。

最初の【実現したい機能】での説明が不足していた為で、誠に申し訳
ありませんが、以下の動作が必要になります(>_<)

・下部リストの1行に対応するイラストの箇所は複数の場合があります。
 従いまして、リスト部をクリックしたときには、イラストの対応箇所は
 全てハイライト表示される必要がありますし、イラストのどの対応箇所を
 クリックした場合でもリストの対応行がハイライトされる必要があります。
 (この場合、イラストの全ての対応箇所がハイライト表示されても、
 クリックした箇所だけでも、どちらでもOKです)

・イラストのリンク部をクリックした際に、下部のリストの対応行を
 最上部に移動(イラストはそのままの位置で固定)する必要があります。


※excanvas.jsをhttp://code.google.com/p/explorercanvas/download …から
 ダウンロードしましたが、IE7で上手く動作しませんでした。
 色々調べてみたところ、http://code.google.com/p/flot/source/browse/trun …
 に差替えれば上手く動作しました。

補足日時:2010/11/11 15:59
    • good
    • 0
この回答へのお礼

ありがとうございます!

先ほど、リンクを辿りサンプルを見せて頂きました。
希望通りの動きです!!


..ですが、少し動きが想定外のケースがあるようです。
上部のイラストを四箇所ともクリックしハイライト表示にした後、
次にイラストのどこかをクリックすると、全てのイラストの
ハイライト表示が消えてしまいます。
しかも、その際にリスト部のハイライト表示は、5回目にクリック
した部分に対応した行以外の3行はハイライト表示のままです。
そのままイラストの残り3箇所をクリックすると、ハイライト
表示とならずに、リスト部のハイライトのみが消えて行きます。

あと、一つ追加のご質問なのですが、<CANVAS>で表示出来る
画像ファイルにPDFファイルは使用出来るのでしょうか?
(クリッカブルマップでは不可でしたので、GIF画像を使用して
いますが、もしPDFファイルを使用出来れば、GIF画像を作成する
手間が省けますので..)

お礼日時:2010/11/11 09:43

1行目が動作しないのは、1行目はタイトルという扱いで対象外ということでしょうか?



=>はい、そうです。1行目の<tr>は<th>と想定しておりました。1行目から対象に
したければ、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);
 }
にしてください。ちなみに1行目<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です。

この回答への補足

すみません!

サンプルソースでは問題無かったのですが、実際のデータに移植してみると
正常に動きません。

実際のデータとの差異を考えますと、1行に多くの列が存在すること位しか
思いつきません。
(実際のデータでは、1行の列数は15列です)

挙動としては、以下の通りです。

・行をクリックしても反応が無い⇒何行かをクリックしていると、たまに色が変わる。

・色が変わった行を再度クリックしても、色が戻らない。

実際のソースを貼り付ければ分かり易いのでしょうが、社外秘に当るリストですので..

補足日時:2010/11/05 15:40
    • good
    • 0
この回答へのお礼

いえ、1行目は対象外で問題ありません(^-^)

「1行目<th>の行の背景色と文字色をハイライトする前
の色としてセット」も問題無いです(^O^)

テーブル単独での機能としては、求めていた通りです!

お礼日時:2010/11/05 14:21

一応、修正しました。


<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か...

この回答への補足

度々すみません!

一つ上の補足に書いた件、自己解決しました。
(一度補足を書くと、追記出来ないようですので、こちらに書込みしました)

ソース内に<PRE>タグを使用していたのがいけなかったようです。
<PRE>タグを外すと、上手く動きました。

お騒がせ致しましたm(_ _)m

補足日時:2010/11/09 10:56
    • good
    • 0
この回答へのお礼

ありがとうございます!

上部に

<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>

を追加して試したところ、期待通りの動きになりました。
(1行目が動作しないのは、1行目はタイトルという扱いで対象外ということでしょうか?)

何もかもお任せで恐縮ですが、CANVAS使用でも構いませんので、宜しくお願いします。

お礼日時:2010/11/05 09:54

完成品じゃないですよ。


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);


今日はもう時間無いので、すんません、あしからず....
    • good
    • 0

途中までですけど、(テーブルの処理だけ)※全角空白でインデントしてます。


<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>
    • good
    • 0
この回答へのお礼

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

早速、コピペさせて頂いたのですが、

 <tr><td>5</td></tr>
-----------
 <tr><td>100</td></tr>

の『-----------』だけ削除して確認したところ、
(これは削除して宜しいんですよね?)

最初、6行目の『100』の部分が背景=黄色/文字=赤となっており、
そこをクリックすると、背景=白/文字=黒となりました。

その他の行をクリックしても、何の変化もありませんし、
6行目も、その後は何の変化もしません..(T_T)

コピペの仕方がおかしかったのでしょうか? orz

お礼日時:2010/11/02 17:22

無理にCANVAS利用を進めるわけじゃありませんが、他の人が誤解しないように


書いときます。

「ユーザー全員に追加ライブラリをインストールさせるのは苦情が出そうです」

=>誤解です。各所で配布されているJavascriptライブラリーと同様に、javascript
のライブラリーです。<script src="url"></script>で積むだけです。インストール
なんて不要です。(もっともサーバーにはアップしとく必要がありますが)

「社内ではIE8は使用しないように言われており」

=>これはタイポ(タイプミス)かな、IE以外ではライブラリ無しで使えるのです。
(IE9でも使えますが)

この回答への補足

重ね重ね、無知を晒してしまい、お恥ずかしい限りですm(_ _)m

ユーザーサイドに、特に負担をかけることが無いのであれば、
<CANVAS>の使用でも問題無いと思います(^-^)

補足日時:2010/11/01 12:44
    • good
    • 0

「多いページでは100行近くになり、その際イラストは表示させたままにしたい」



=>
 クリックによってそれぞれ違うページを表示するのであればフレームでしょうね。
もっとも、同じサイト内のページなら、AJAXでテーブルの部分のみ取得して遷移せず
に表示する事も可能ですが。
 そのテーブルが一つのテーブルなら、たとえ100行でも、CSSでテーブルをheightを
指定したボックスにして、スクロールさせれば、フレームにしなくても済みます。
当然クリックしたら目的の行までスクロールするように作れます。

「GIF画像を作成していますので、<CANVAS>は使えないのでは無いでしょうか?」
GIF画像でも、JPG画像でも何でも(何でもはうそ)たいていの画像ファイルは
<CANVAS>上の好きな場所に好きな大きさで配置できます。ただIE8以下は、別途
追加ライブラリーが必要です。
 <CANVAS>を勤めたのに他意はありません、たまたま先日<CANVAS>利用のクリッカブル
マップのサンプルを作ったばっかりなので、すぐに転用できるかなと。

http://oshiete.goo.ne.jp/qa/6257965.html

※クリッカブルマップほど面倒くさくないかなあと思っただけです。

この回答への補足

テーブルは一つのテーブルですので、フレームを使わずに目的の機能が
実現できるのでしたら、フレームにはこだわりませんm(_ _)m

ただ<CANVAS>につきましては、IE8以下で別途の追加ライブラリーが
必要と言うのは、ちょっと問題になりそうです..
というのも、社内ではIE8は使用しないように言われており、ユーザー
全員に追加ライブラリをインストールさせるのは苦情が出そうです(T_T)

補足日時:2010/10/29 17:43
    • good
    • 0

 フレームで作るのはいやです。

別にフレームにする必要性はまったくありません。
かえって面倒になります。(もしかしてフレームの意味合いが違うのかも)

クリッカブルマップはHTMLの<CANVAS>でもよいですか?
リストのハイライトとは、背景色を黄色とかにするんですよね?
リストって<ul>とか<dl>の事ですよね?(念のため)

まる投げ回答をご希望なら、土日は返事しませんので、急ぐなら他の方の
回答を使ってね、来週でよければ....

この回答への補足

言葉足らずで申し訳ありません。

リスト部分は<table>で作成しています。

このリストは多いページでは100行近くになり、その際イラストは表示させたままにしたいので、
フレームを分けています。

恥ずかしながら、HTMLの<CANVAS>を知りませんでした。
しかしながら、イラストは元データ(AutoCADデータ)があり、それを変換させてGIF画像を
作成していますので、<CANVAS>は使えないのでは無いでしょうか?

補足日時:2010/10/29 16:42
    • good
    • 0

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