クリックで文字を表示

[新着] Webテンプレートを仮オープンしました

0   名前： プロメテウス ： 2007/07/03（火） 17:21  ［URL］  ID:1UQTNQ65 sub-zk
リンクをクリックして文字をそのページに出現させる事をしたいです。
よく理解ができなかったので質問させていただきました。

まずこの説明ではわかりにくいと思いますので、今自分がやりたいと思っている事をしているサイトを紹介します。
　「http://www.hangame.co.jp/gamenc/typing.asp」

ハンゲームの一部のゲームページです。
「ゲームスタート」の下のほうに「お知らせ」があります。
そのお知らせの見たいものをクリックすると、その下に表みたいのが表示されて 文字が出現します。

タグを見てみたんですが、ゴチャゴチャしていてわかりませんでした。

知っている方 もしくわ 何かヒントをくれる方　返事お願いします。


1   名前： ヨロズミタマ ： 2007/07/03（火） 17:21  ID:kqesmFoG sub-gm
少々強引かもしれませんが、自分ならJavaScriptでvisibilityというプロパティを動かして作ります。


サブルーチンの例↓↓
function SHOW(id)
{
//オブジェクト名を引数に送ります。
document.getElementById(id).style.visibility="visible";
}

function DEL(id)
{
//オブジェクト名を引数に送ります。
document.getElementById(id).style.visibility="hidden";
}

上のようなサブルーチンを作っておきます。（外部ファイルにしてライブラリとしておくと便利かもしれません・・・。）


次にＨＴＭＬ側を以下のようにしてみます。
※今回は「ありがとう。」をクリックしたら「どういたしまして。」、と表示され、「閉じる」をクリックすると消えるサンプルです。



<html>
<head>
<script type="text/javascript" language="javascript">
<!--
//前途したサブルーチン
function SHOW(id)
{
document.getElementById(id).style.visibility="visible";
}

function DEL(id)
{
document.getElementById(id).style.visibility="hidden";
}
//-->
</script>
</head>
<body>
　<a href="javascript:SHOW('box1');">ありがとう。</a>

　<p id="box1" id="box1" style="visibility:hidden;">
　　どういたしまして。<br>
　　<a href="javascript:DEL('box1');">閉じる</a>
　</p>
</body>
</html>


visibilityというのはＣＳＳのプロパティの一つで表示・非表示を司っています。
visibilityをvisibleにすると表示されて、hiddenにすると非表示になります。
その部分をJavaScriptでなぶっているわけです。


今回は「どういたしまして。」のでしたが、その部分に表示したい文字を書き込めばＯＫです。
2   名前： 匿名 ： 2007/07/03（火） 17:21  ID:K.4sEtYQ sub-Cz
以下はあくまで動作確認用。本番で使わないように。

HTML 用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <title>TEST</title>
    <dl id="test">
      <dt>Test1</dt>
      <dd><p>TEST1</p><p>TEST1</p><p>TEST1</p></dd>
      
      <dt>Test2</dt>
      <dd><p>TEST2</p><p>TEST2</p><p>TEST2</p></dd>
      
      <dt>Test3</dt>
      <dd><p>TEST3</p><p>TEST3</p><p>TEST3</p></dd>
    </dl>
    
    <script type="text/javascript">/*@cc_on@*/

// DD 要素を隠す
/*@if (@_jscript)
    document.createStyleSheet ().addRule ('#test dd', 'display: none');
@else@*/
    var head = document.getElementsByTagName ('head')[0];
    var style = head.appendChild (document.createElement ('STYLE'));
    style.type = 'text/css';
    style.sheet.insertRule ('#test dd { display: none; }', 0);
/*@end@*/


// 出力領域を作成
var dl = document.getElementById ('test');
var div = dl.parentNode.insertBefore (
    dl.ownerDocument.createElement ('DIV'),
    dl.nextSibling);


// イベントハンドラ取り付け
document.onclick = function (event) {
/*@if (@_jscript)
    var node = window.event.srcElement;
@else@*/
    var node = event.target;
/*@end@*/
    
    if (node.tagName == 'DT') {
        while (node = node.nextSibling) {
            if (node.nodeName == 'DD') {
                while (div.hasChildNodes ()) {
                    div.removeChild (div.firstChild);
                }
                for (var df = node.ownerDocument.createDocumentFragment (),
                    n = node.firstChild; n; n = n.nextSibling) {
                    df.appendChild (n.cloneNode (true));
                }
                div.appendChild (df);
                return false;
            }
        }
    } else {
        while (div.hasChildNodes ()) {
            div.removeChild (div.firstChild);
        }
    }
};
    </script>

XHTML 用（拡張子は .xhtml か .xml）：
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>TEST</title>
  </head>
  <body>
    <dl id="test">
      <dt>Test1</dt>
      <dd><p>TEST1</p><p>TEST1</p><p>TEST1</p></dd>
      
      <dt>Test2</dt>
      <dd><p>TEST2</p><p>TEST2</p><p>TEST2</p></dd>
      
      <dt>Test3</dt>
      <dd><p>TEST3</p><p>TEST3</p><p>TEST3</p></dd>
    </dl>
    <script type="application/javascript"><![CDATA[

// dd 要素を隠す
document.insertBefore (
    document.createProcessingInstruction ('xml-stylesheet',
        'type="text/css" href="data:text/css,#test dd { display: none }"'),
    document.documentElement);


// 出力領域を作成
var dl = document.getElementById ('test');
var div = dl.parentNode.insertBefore (
    dl.ownerDocument.createElementNS ('http://www.w3.org/1999/xhtml', 'div'),
    dl.nextSibling);
var range = dl.ownerDocument.createRange ();


// イベントリスナ取り付け
document.addEventListener ('click', function (event) {
    var node = event.target;
    
    if (node.localName == 'dt') {
        while (node = node.nextSibling) {
            if (node.localName == 'dd') {
                event.preventDefault ();
                range.selectNodeContents (div);
                range.deleteContents ();
                range.selectNodeContents (node);
                div.appendChild (range.cloneContents ());
                break;
            }
        }
    } else {
        range.selectNodeContents (div);
        range.deleteContents ();
    }
}, false);

    ]]></script>
  </body>
</html>
3   名前： プロメテウス ： 2007/07/03（火） 17:21  ID:1UQTNQ65 sub-zk
ありがとうございます！
今からやってみます。

できるかな？
がんばってみます。
一覧へ戻る