あなたの習慣について教えてください！！

javascriptのオンマウスについて

解決済

  • 質問者：t-pop-corn-t
  • 質問日時：
  • 回答数：4件

http://lab.synck.com/Cal3.0/

上記URLのカレンダーですが、日付にマウスポインタをあてるとテキストが日付の真下に表示されますよね。オンマウスの記述がキーなのだと思うのですが、

これを真下に表示ではなくてHTMLでテキストボックスを１行作って、作ったテキストボックスに表示させるようにするにはどのようにすればいいでしょうか。

または、真下表示ではなく、日付の１個したの段の１番左端からの表示でもかまいません。


まったくわからず困っています。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

ちょっとだけ　だそく（表示位置を変える）＆難読化？


ぜんかくくうはくは、はんかくにしてください。
そ～してからの～ http://jsbeautifier.org/

<!DOCTYPE html>
　<title></title>
　　 <meta charset="utf-8">
　　　
　　　　　<style>
　　　　　　 table.calendar {
　　　　　　　　 border : 1px gray solid;
　　　　　　　　　　 background : #ffe;
　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　　table.calendar th,
　　　　　　　　　　　　　　 table.calendar td {
　　　　　　　　　　　　　　 border : 1px gray solid;
　　　　　　　　　　　　　　　width : 4em;
　　　　　　　　　　　　　　 text-align : center;
　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　
　　　　　　　　　　　　 table.calendar th:nth-of-type(1) {
　　　　　　　　　　　background : #fee;
　　　　　　　　　　 color : red;
　　　　　　　　 }
　　　　　　　
　　　　　table.calendar td:nth-of-type(1)
　　　{
　　 background : #fee;
　color : red;
}

table.calendar th:nth-of-type(7) {
background : #eef;
color : blue;
}
table.calendar td:nth-of-type(7)
　{
　　 background : #eef;
　　　color : blue;
　　　　　text-align : center;
　　　　　　 }
　　　　　　　　
　　　　　　　　　　 table.calendar td > span {
　　　　　　　　　　　display : none;
　　　　　　　　　　　　 }
　　　　　　　　　　　　　
　　　　　　　　　　　　　　 input#mess {
　　　　　　　　　　　　　　 display : none;
　　　　　　　　　　　　　　　position : absolute;
　　　　　　　　　　　　　　 border : 3px green double;
　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　</style>
　　　　　　　　　　　　
　　　　　　　　　　　<body>
　　　　　　　　　　
　　　　　　　　 <table class="calendar">
　　　　　　　<tr>
　　　　　<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
　　　<tr>
　　 <td>1<span>message1</span>
　<td>2
<td>3
<td>4
<td>5<span>message5</span>
<td>6
<td>7<span>message7</span>
</table>

　<input type="text" value="" id="mess">
　　
　　　<script>
　　　　　
　　　　　　 var viewMessage = (function () {
　　　　　　　　 var inp = document.getElementById ('mess');
　　　　　　　　　　 var style = inp.style;
　　　　　　　　　　　var memory = null;
　　　　　　　　　　　　
　　　　　　　　　　　　　return function (text, baseNode, side) {
　　　　　　　　　　　　　　 var p, x, y;
　　　　　　　　　　　　　　 if (baseNode) {
　　　　　　　　　　　　　　　if (memory == baseNode) return;//TDの中にタグがあると… 無駄を省く
　　　　　　　　　　　　　　 memory = baseNode;
　　　　　　　　　　　　　　 p = getPosition (baseNode);
　　　　　　　　　　　　　inp.value = text;
　　　　　　　　　　　　 style.width = baseNode.offsetWidth + 'px';
　　　　　　　　　　　switch (side) {
　　　　　　　　　　 case 1 :
　　　　　　　　 x = baseNode.offsetWidth; y = 0; break;
　　　　　　　case 2 :
　　　　　x = 0; y = -baseNode.offsetHeight; break;
　　　case 3 :
　　 x = -baseNode.offsetWidth; y = 0; break;
　case 4 : default :
x = 0; y = baseNode.offsetHeight; break;
}
style.left = p.x + x + 'px';
style.top = p.y + y + 'px' ;
style.display = 'block';
}
else {
　inp.style.display = 'none';
　　 memory = null;
　　　}
　　　　　};
　　　　　　　}) ();
　　　　　　　　
　　　　　　　　　　
　　　　　　　　　　　//要素の位置をもとめる
　　　　　　　　　　　　 function getPosition (e, x, y) {
　　　　　　　　　　　　　for (x = y = 0; e; e = e.offsetParent)
　　　　　　　　　　　　　　 x += e.offsetLeft, y += e.offsetTop;
　　　　　　　　　　　　　　 return {x: x, y: y};
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　 //親探し
　　　　　　　　　　　　　function parentCheck (e, type, value) {
　　　　　　　　　　　　 do if (e[type] == value) break; while (e = e.parentNode); return e;
　　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　　
　　　　　　　//mouse over のイベントハンドラ
　　　　　function handler (event) {
　　　var tb, td, sp;
　　 var e = event.target;
　var cname = 'calendar';

if ((td = parentCheck (e, 'tagName', 'TD')))//親にTDがあり
if ((sp = td.querySelector ('span')))//その中にSPANがあり
if ((tb = parentCheck (td, 'tagName', 'TABLE')))//先祖にTABLEがあり
if (tb.classList.contains (cname))//それがcalendarならば
return viewMessage (sp.textContent, td.parentNode, 4);//表示

　viewMessage ();
　　 }
　　　
　　　　　document.addEventListener ('mouseover', handler);
　　　　　　　</script>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： babu_baboo
  • 回答日時：

ieは、するぅ。

めずらしくこめんとつき。ぜんかくくうはくははんかくに。
しょしんしゃように、かけたとおもう。すたいるがださいのは、かんべんね。

<!DOCTYPE html>
<title></title>
<meta charset="utf-8">

<style>
table.calendar {
　border : 1px gray solid;
　background : #ffe;
}

table.calendar th,
table.calendar td {
　border : 1px gray solid;
　width : 4em;
　text-align : center;
}

table.calendar th:nth-of-type(1) {
　background : #fee;
　color : red;
}

table.calendar td:nth-of-type(1)
{
　background : #fee;
　color : red;
}

table.calendar th:nth-of-type(7) {
　background : #eef;
　color : blue;
}
table.calendar td:nth-of-type(7)
{
　background : #eef;
　color : blue;
　text-align : center;
}

table.calendar td > span {
　display : none;
}

input#mess {
　display : none;
　position : absolute;
　border : 3px green double;
}
</style>

<body>

<table class="calendar">
　<tr>
　　<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
　<tr>
　　<td>1<span>message1</span>
　　<td>2
　　<td>3
　　<td>4
　　<td>5<span>message5</span>
　　<td>6
　　<td>7<span>message7</span>
</table>

<input type="text" value="" id="mess">

<script>

var viewMessage = (function () {
　var inp = document.getElementById ('mess');
　var style = inp.style;
　var memory = null;

　return function (text, baseNode) {
　　var p;
　　
　　if (baseNode) {
　　　if (memory == baseNode) return;//TDの中にタグがあると…　無駄を省く
　　　memory = baseNode;
　　　p = getPosition (baseNode);
　　　inp.value = text;
　　　style.width = baseNode.offsetWidth + 'px';
　　　style.left = p.x + 'px';
　　　style.top = p.y + baseNode.offsetHeight + 'px' ;
　　　style.display = 'block';
　　}
　　else {
　　　inp.style.display = 'none';
　　　memory = null;
　　}
　};
}) ();


//要素の位置をもとめる
function getPosition (e) {
　var x, y; x = y = 0;
　while (e) x += e.offsetLeft, y += e.offsetTop, e = e.offsetParent;
　return {x: x, y: y};
}

//親探し
function parentCheck (e, type, value) {
　do if (e[type] == value) break; while (e = e.parentNode);
　return e;
}


//mouse over のイベントハンドラ
function handler (event) {
　var tb, td, sp;
　var e = event.target;
　var cn = ' calendar ';

　if ((td = parentCheck (e, 'tagName', 'TD')))//親にTDがあり
　 if ((sp = td.querySelector ('span')))//その中にSPANがあり
　　 if ((tb = parentCheck (e, 'tagName', 'TABLE')))//先祖にTABLEがあり
　　　 if (0 <= (' '+ tb.className + ' ').indexOf (cn))//それがcalendarならば
　　　　 return viewMessage (sp.textContent, td.parentNode);//表示

　viewMessage ();
}

document.addEventListener ('mouseover', handler);
</script>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： Gaffgarion
  • 回答日時：

#1さんのを書くと以下。



<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"><title></title>
<script>
document.addEventListener("DOMContentLoaded", function(){

//(2)spanのデータをinnerHTMLやnodeValueなどで抽出する
var text = document.getElementById('span').innerHTML;

//(3)document.getElementByIDでテキストボックスを指定して、valueを書き換える
document.getElementById('textbox').value = text;

}, false);
</script>
</head>
<body>

<p><span id="span">毎月1日は激安セールの日☆</span></p>

<!--(1)テキストボックスにidをふる-->
<p><input type="text" id="textbox" value=""></p>

</body></html>

(1)のテキストボックスをjsで生成する方法もありますが、今回はhtmlに直書きです。
addEventListener使ってるのでIEでは動きません。
実際にはクロスブラウザ対応の書き方をするか、jqueryなどのライブラリを使いましょう。
getElementByIdについては以下。
https://developer.mozilla.org/ja/docs/DOM/docume …
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

表示される文字はtd内にあるdisplay:noneされたspanのデータだというのはわかりますね？



であればその内容をテキストボックスに表示するのであれば

(1)テキストボックスにidをふる
(2)spanのデータをinnerHTMLやnodeValueなどで抽出する
(3)document.getElementByIDでテキストボックスを指定して、valueを書き換える

この回答への補足

ありがとうございます。
(3)の手法が勉強不足で、わかりません・・・javascript超初心者なので・・・

日付の１個したの段の１番左端からの表示をさせたほうが、手法としては簡単なのでしょうか？
そうだとしたらそのやりかたもご教示お願いできませんでしょうか・・・

補足日時：2013/03/14 17:10
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報