< HOME / 掲示板 / JavaScript質問板 / 過去ログ / 一覧 / "データバインド"と"オンマウスでレイヤー出現"の組み合わせ

---

0   名前： ぼぢ ： 2007/07/28（土） 00:13  ID:v1FJvujN sub-zH

こんにちは、こちらには初めて書き込ませて頂きます。
殆ど専門知識が無いので、質問の内容に至らない点があるかと思いますが…。
なんとかご指導の程よろしくお願い致します。

【何をしたいのか】
【name】のセルにカーソルを合わせた時、
【rubi】項目の内容がピロっと（語彙が少なくてすみません）出てくるようにしたい。

【現在の状況】
データバインドを用いたテーブルの【name】セル(＊１)にカーソルを合わせると、
データバインドに一応は対応した【rubi】項目(＊２)が出現するようにはなりました。

<TABLE DATASRC="#situmon">

<TBODY>
<TR>
<TD onmouseover="StartShow(2, true)" onmouseout="StartShow(2, false)"><SPAN DATAFLD="name"></SPAN></TD>　←(＊１)
<TD><SPAN DATAFLD="age"></SPAN></TD>
<TD><SPAN DATAFLD="data"></SPAN></TD>
<TD><SPAN DATAFLD="condition"></SPAN></TD>
<TD><SPAN DATAFLD="state"></SPAN></TD>
<TD><SPAN DATAFLD="rubi" id="layerSample2" style="position : absolute; visibility : hidden;"></SPAN></TD>　←(＊２)
</TR>
</TBODY>
</TABLE>
<!-- データベース用オブジェクトの指定 -->
<OBJECT ID="situmon" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="situmon.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>

…ですが、この時現れる【rubi】のデータは、何故かその項目の一番上にある値しか出てきてくれません。
例.（あいざわ,いしだ,うえだ,…と続くのに、あいざわしか出ない）

恐らく、その箇所で使わせて頂いたサンプルで定義されているidに、何かしなければいけないのだと思うのですが。

如何せん、JavaScriptに関してはサンプルを利用させて頂く事で対応してきた私には、不明瞭な点が多すぎます。
もし宜しければ、上記で言ったような事が出来るような表記、もしくは参考にすると良い文献等をご提示下さると嬉しいです。

【サンプルの提示】
一応、入手元のサイト様で使用の許可に関する注意事項を読んだところ、
サンプルの使用・改変等は自由だそうですので、貼らせて頂きます（問題があったら即刻削除してください）

<script language="javascript">
<!--//
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
//マウスの座標
var nXPos = 0;
var nYPos = 0;
//レイヤーの座標
var nLayerXPos = 0;
var nLayerYPos = 0;
function StartShow(nNumber, fType)
{
//レイヤーの名前
strLayer = "layerSample"+nNumber;
//レイヤーの座標をセット。好きな値に変更してください。
//X軸、Y軸を+値、もしくは-値にすれば、好きな場所に固定されます。
nLayerXPos = nXPos + 0;
nLayerYPos = nYPos + 20;
//NNの場合
if (document.layers)
{
if (fType)
{
//レイヤーの幅と高さをマウス座標にセット
document.layers[strLayer].left = nLayerXPos;
document.layers[strLayer].top = nLayerYPos;
//表示
document.layers[strLayer].visibility = "show";
}
else
{
//非表示
document.layers[strLayer].visibility = "hide";
}
}
//IEとNC6の場合
if (document.getElementById)
{
if (fType)
{
//レイヤーの幅と高さをマウス座標にセット
document.getElementById(strLayer).style.left = nLayerXPos;
document.getElementById(strLayer).style.top = nLayerYPos;
//表示
document.getElementById(strLayer).style.visibility="visible";
}
else
{
//非表示
document.getElementById(strLayer).style.visibility="hidden";
}
}

}
//マウスが動くとここにまず入ります。
//Netscapeの場合
if (navigator.appName=="Netscape")
{
function nMouse(e)
{
nXPos = e.pageX;
nYPos = e.pageY;
}
//NN4
if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove = nMouse;
}
//NC6
else
{
document.onmousemove = nMouse;
}
}
//IEの場合
else
{
function iMouse()
{
nXPos = event.x+document.body.scrollLeft;
nYPos = event.y+document.body.scrollTop;
}
document.onmousemove = iMouse;
}
//-->
</script>

＃↑のスクリプトを何とかすれば可能なんだと思います。
＃長文すいませんでした、質問内容で至らない点があったら補足しますので、ガンガン仰って下さい。。。

---

【何をしてみたのか】
→ これまでどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。

【検索用語】
→ どのような検索用語で調べてみたのかを記入してください。

【備考】
→ その他、回答者の参考になるような情報があれば記入してください。
→ 特定のツールに関連がある場合は、その名称やバージョンを記入してください。
→ ★矢印の付いた行は削除して使用してください★


【何をしてみたのか】
→ これまでどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。

【検索用語】
→ どのような検索用語で調べてみたのかを記入してください。

【備考】
→ その他、回答者の参考になるような情報があれば記入してください。
→ 特定のツールに関連がある場合は、その名称やバージョンを記入してください。
→ ★矢印の付いた行は削除して使用してください★


【何をしてみたのか】
→ これまでどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。

【検索用語】
→ どのような検索用語で調べてみたのかを記入してください。

【備考】
→ その他、回答者の参考になるような情報があれば記入してください。
→ 特定のツールに関連がある場合は、その名称やバージョンを記入してください。
→ ★矢印の付いた行は削除して使用してください★

---

1   名前： NullPo ： 2007/07/28（土） 00:13  ID:Z0FHbpib sub-ii

何を言っているのかよくわからないけれど、
テーブルにデータバインドすると、その行だけ最初の行がコピーされる。
つまり、重複してはいけない属性は書けない。

この場合はid属性は書いてはいけない。

---

2   名前： ぼぢ ： 2007/07/28（土） 00:13  ID:v1FJvujN sub-zH

>>NullPoさん。返信アリガットウ御座います！！

＞テーブルにデータバインドすると、その行だけ最初の行がコピーされる。

…すみません。
見当違いな事かも知れませんが。
最初の行だけコピーされるのは（＊２）のレイヤーの中身だけで、その他のセルについては２行目以降も表示されています。
なので、何とかこのままテーブルを使ってやりたいのですが、出来ないものでしょうか。


＞この場合はid属性は書いてはいけない。

この場合と言うのはここのidの事でしょうか…？
<TD><SPAN DATAFLD="rubi" id="layerSample2" style="position : absolute; visibility : hidden;"></SPAN></TD>　←(＊２)

また、ここにidを設定できないとすると、何処にどうやって設定すればいいでしょう…。


クレクレ言って申し訳ありませんが、本当に素人なのでこれだけでは解決できません。
…もう少しヒントを頂けると助かります（汗）

---

3   名前： NullPo ： 2007/07/28（土） 00:13  ID:Z0FHbpib sub-ii

>>2
最初の行がコピーされて中身がデータの内容に置き換わる。
td要素やspan要素はそのまま。
なのでspan要素に指定したid属性は重複してしまう。

<script type="text/javascript">

function showRubi(eventTd) {
  var tr = eventTd.parentNode;
  var tds = tr.getElementsByTagName("td");
  var targetTd = tds.item(tds.length - 1);

  targetTd.firstChild.style.visibility = "visible";
  targetTd.firstChild.style.posLeft = event.clientX;
  targetTd.firstChild.style.posTop = event.clientY;
}

function hiddenRubi(eventTd) {
  var tr = eventTd.parentNode;
  var tds = tr.getElementsByTagName("td");
  var targetTd = tds.item(tds.length - 1);

  targetTd.firstChild.style.visibility = "hidden";
}

</script>

<TABLE DATASRC="#situmon">
 <TBODY>
  <TR>
   <TD onmouseover="showRubi(this)" onmouseout="hiddenRubi(this)"><SPAN DATAFLD="name"></SPAN></TD>
   <TD><SPAN DATAFLD="age"></SPAN></TD>
   <TD><SPAN DATAFLD="data"></SPAN></TD>
   <TD><SPAN DATAFLD="condition"></SPAN></TD>
   <TD><SPAN DATAFLD="state"></SPAN></TD>
   <TD><SPAN DATAFLD="rubi" style="position:absolute; visibility:hidden; white-space:nowrap;"></SPAN></TD>
  </TR>
 </TBODY>
</TABLE>

<!-- データベース用オブジェクトの指定 -->
<OBJECT ID="situmon" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
 <PARAM NAME="DataURL" VALUE="situmon.txt">
 <PARAM NAME="UseHeader" VALUE="true">
</OBJECT>

確かデータバインドはIE専用だったはずなのでその他のブラウザは無視する。

---

4   名前： ぼぢ ： 2007/07/28（土） 00:13  ID:v1FJvujN sub-zH

>>NullPoさん。とてつもなく御早い返信有難う御座います！（そして超亀レスでごめんなさい…）

早速↑のスクリプトを試してみたところ、見事に期待していた通りの動作を致しました。
…もはや何も言うことは御座いません。解決です！

…恥ずかしながら、このソースを見る限り、自力での実現は不可能だったように思います。

だから瞬時にして的確な方法をレスしてくださった、
NullPoさんにとても感謝しています！本当に有難う御座いました！

---

---

TAG indexについて - ご利用について - プライバシーポリシー - 連絡フォーム - 広告掲載のご案内 - お問い合わせ

［ホスティング by XREAサーバー］

Copyright (C) 1997-2008 TAG index. All Rights Reserved.