画面の真ん中に表示


■Q&A

■Question

無題 2003.3.16.Sun No.1565

JavaScript は書けないのでサンプルを探しています。
3個の画像ボタンをクリックするとそれぞれテキストが入れ替わるようなページを作成したいと思っています。

テキストフィールドのテキストが入れ替わるものだとリンクがはれないものしか見つかりませんでした。(つまりタグが使えなかったです)
レイヤーのテキストを入れ替えるものだと、タグは使用可でリンクははれますが、真ん中揃えの横600ピクセルのページなのでレイヤーをどの表示サイズでもド真ん中に持ってくる事ができませんでした。

テキストフィールドでもタグが使えてリンクがはれたり、レイヤーでもド真ん中にもってこれたりする事は可能なのでしょうか?
そういうサンプルがありましたら是非教えて頂きたいと思います。
宜しくお願い致します。

■Complement

Re: 無題 2003.3.16.Sun No.1566

補足になります。
今、サンプルになるサイトを見つけました。
http://www.docomo113.com/phs/faqmail_index.html
このページのQ&Aのようなものが作りたいのです。
クリックして入れ替わるテキストです。
JavaScript がよく分からないのでタグや外部ファイルを見ても理解できませんでした。
これは DWMX のようなソフトでは作成できないのでしょうか?
サンプルとなるスクリプトを配布している所をご存知の方がいらっしゃれば教えて頂きたいと思います。
再度、よろしくお願い致します。

■Answer

Re: 無題 ぴろあき 2003.3.17.Mon No.1568

「テキストフィールド」が <textarea> を指すなら、タグは使えません。
レイヤーをド真ん中に持ってくる方法を採ることになります。

あと、このQ&A、テキストが入れ替わってるように見えますが、クリックした時にページが移動してますよ? つまり変わったテキスト部分以外、全部同じソースにしてあるだけです。
普通なら管理が面倒くさく、とても非現実的な方法なのですが、おそらくサーバーの方でプログラムが動いてるとかSSIを使ってるとか、それなりのことをやっていると思われます。

また、ページを移動しなくても、JavaScript で同じことはできます。
でも高度な命令が必要になるため、非対応ブラウザをどうするかが問題になりますし、さらに作るページによって変わる部分も多く、それなりの知識がどうしても必要になります。

以上のことから、サンプルで雛形を用意するのはかなり骨の折れる所業です。それは DreamweaverMX でも変わらないと思います。(使ったことないので可能かはわかりません)

■Question

ありがとうございました 2003.3.17.Mon No.1569

ぴろあきさん、ありがとうございます。
確かに眺めているとページ自体が移動している事に気付きました。
スクリプトがまったく分からないので、メニューに使われているものを見て、これがそうか…と思い込んでいました。
結果的には、アドバイスの後部にあるように初心者には高度すぎる技なのですね。
ちなみにレイヤーならタグが使えるのでその方法を採りたいですが、レイヤーをド真ん中に持ってるくる方法ってあるのでしょうか?
クリックしてド真ん中にもってくるものは見つけましたが、元々ブラウザの大きさを変化させられた時に常時ド真ん中に持ってくる方法が分かりません。
もしご存知であれば教えてください。
宜しくお願い致します。

■Answer

Re: 無題 ぴろあき 2003.3.18.Tue No.1571

「クリックして」の部分のタグに onclick="………" というのが入ってると思います。これをコピーして <body> に放りこみ、onresize="………" と修正して、<body onresize="………"> にしてみてください。

見てなんとなくわかると思いますが、この修正は「ウィンドウがリサイズされた時に実行」するイベントってのを追加します。これにより、リサイズされた時にスクリプトを実行して、レイヤーをド真ん中へ持ってきます。
うまくいくかどうかはスクリプトによりますが、やってみてください。

ついでに、俺なりのサンプルも作ってみました。


■実行結果

画像ボタン0 画像ボタン1 画像ボタン2

■スクリプトの概要

画像をクリックすると、画面の真ん中にメッセージを表示します。レイヤーをクリックすると消えます。

設置方法はソースをご覧ください。


■このスクリプトの対応ブラウザ

IE4以降・Netscape6以降・Opera7
動作します。
Opera6
動作しますが、表示が少しずれます。
Netscape4.x
なんとか動きますが、表示が少しずれて、クリックしても消えません。10秒経つと自動的に消えます。
それ以外・JavaScript オフ
動きません。画像は表示されますが、クリックしてもなにも起きません。

■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)