メッセージ リンクや写真の上にマウスが乗るとメッセージが出る、あるいは隠しボタンを仕込んでおいて、カーゾルが引っ掛かると警告が表示されるなど、色々なメッセージで訪問者に新鮮な驚きを与えたり、時にはうんざるさせることも面白いですね？
リンクや写真の上にマウスが乗るとメッセージが出る、あるいは隠しボタンを仕込んでおいて、カーゾルが引っ掛かると警告が表示されるなど、色々なメッセージで訪問者に新鮮な驚きを与えたり、時にはうんざるさせることも面白いですね？
リンクの上にカーソルが乗ると、コメントがバルーンに入って表示されます。でも表示が遅いですね？もっと反応が速いといいんですが...。これは簡単なんですよ。TITLE="メッセージ" をリンクのURLの後ろに入れるだけです。 『HTML4クイックスタートガイド』では「ツールチップ」と呼んでいいますが、ここではコメントと言うことにします。発売時の2000年12月1日現在では、Windows版のInternetExplorer5でしかサポートしていないとあります。でも今では、私のマック版IE5でも大丈夫です。コメントが長い場合や、内容をいくつかに分けたい場合は、改行したい位置に を入れます。 リンクしない画像にも入れられます。モンローのまん中の写真はリンクしていませんが、メッセージは出ますね？アルバムのサムネールに入れておけば格好いいですよ。問題は右の写真です。これはWindowsだけで、私のマックでは見られせんが、ALT="マリリンモンローの写真のサムネールです" と入れてあります。Windows の皆さんはいかがですか？
リンクの上にカーソルが乗ると、コメントがバルーンに入って表示されます。でも表示が遅いですね？もっと反応が速いといいんですが...。これは簡単なんですよ。TITLE="メッセージ" をリンクのURLの後ろに入れるだけです。
『HTML4クイックスタートガイド』では「ツールチップ」と呼んでいいますが、ここではコメントと言うことにします。発売時の2000年12月1日現在では、Windows版のInternetExplorer5でしかサポートしていないとあります。でも今では、私のマック版IE5でも大丈夫です。コメントが長い場合や、内容をいくつかに分けたい場合は、改行したい位置に を入れます。
リンクしない画像にも入れられます。モンローのまん中の写真はリンクしていませんが、メッセージは出ますね？アルバムのサムネールに入れておけば格好いいですよ。問題は右の写真です。これはWindowsだけで、私のマックでは見られせんが、ALT="マリリンモンローの写真のサムネールです" と入れてあります。Windows の皆さんはいかがですか？
サンプル
文字列の上にカーソルが乗ると、コメントがバルーンに入って表示されます。<P> タグの中に説明文を入れておくだけで、カーソルがその段落の上のどこかに乗ると、バルーンが現われます。改行したい位置に を入れるのも、リンクにツールチップを埋め込むのと同じです。サンプルはこの段落です。いかがですか？
status bar にはリンク先のURLが示されますが、これに代えてコメントを入れられます。それにはリンクを示すタグの中に次のように入れます。; の後ろには必ず半角のスペースを１個入れることに注意してください。returntrue; 以下で、マウスが他へ移動したときは元の状態に戻るようにしておかないと、一度マウスが乗ったら最後、そのページが開いている間ずーっと表示します。内容によってはそうなったほうが都合のいいこともありますね？サンプルにはマウスを乗せるだけで試してください。
このタグはリンクしていない画像にも使えます。いかがですか？通常のイメージの後ろに紫色の部分とコメントを加えただけです。
status bar のコメントを流すこともできます。あるサイトで人気投票ランキングに参加しているんですが、最低限１０票からランキングが掲示されます。ところが１ヶ月経っても９票なんですね。そこで次のようなコメントを流してみました。実例はメッセージが画面に現われるサンプルに入れました。 まず <HEAD> から <H/EAD> の間のHEADセクションに下のように入れます。msg0=" "; では空白を流すことで右端からスタートするようにしています。setTimeout("s_bar()",200);で速さを調整します。ゆっくり流す場合は数字を大きくし、速くする場合は小さくします。s_onegai は、適当につけたイベント名です。
status bar のコメントを流すこともできます。あるサイトで人気投票ランキングに参加しているんですが、最低限１０票からランキングが掲示されます。ところが１ヶ月経っても９票なんですね。そこで次のようなコメントを流してみました。実例はメッセージが画面に現われるサンプルに入れました。
まず <HEAD> から <H/EAD> の間のHEADセクションに下のように入れます。msg0=" "; では空白を流すことで右端からスタートするようにしています。setTimeout("s_bar()",200);で速さを調整します。ゆっくり流す場合は数字を大きくし、速くする場合は小さくします。s_onegai は、適当につけたイベント名です。
次に <BODY> タグの直後に次のタグを入れます。これでサンプルページの status bar には、コメントが流れるようになりました。いささか煩いかもしれませんね？
あらかじめ設定しておいたところにマウスが乗ると、ポーンという警告音と共に警告のボックスを出すことができます。コメントを改行する場合は\nを入れておきます。この場合のリンクはダミーで、仮にリンクをはっておいてもジャンプしません。快適人生のメニューに相当する部分を見えないようにして、リンクのアンダーラインを隠しておけば、目に見えないボタンになります。イタズラに使えそうですね？なおイタズラのサンプルページでは、ＯＫをクリックするとページが消滅することになっていますが、Netscape6 では上手くいきません。 なおPageMillでは、"" を自動的に "./" に変えてしまいますが、大丈夫です。もし気になるなら、ソースモードでアップロードすれば、"" のまま送れます。 <A HREF="" onmouseover="alert('ようこそ、快適な人生の部屋へ！\n初めて来られた方は下のボタンを押して、\nこのサイトの内容を知っておいてください♪')">快適人生のメニュー</A> 快適人生のメニュー イタズラのサンプル
あらかじめ設定しておいたところにマウスが乗ると、ポーンという警告音と共に警告のボックスを出すことができます。コメントを改行する場合は\nを入れておきます。この場合のリンクはダミーで、仮にリンクをはっておいてもジャンプしません。快適人生のメニューに相当する部分を見えないようにして、リンクのアンダーラインを隠しておけば、目に見えないボタンになります。イタズラに使えそうですね？なおイタズラのサンプルページでは、ＯＫをクリックするとページが消滅することになっていますが、Netscape6 では上手くいきません。
なおPageMillでは、"" を自動的に "./" に変えてしまいますが、大丈夫です。もし気になるなら、ソースモードでアップロードすれば、"" のまま送れます。
快適人生のメニュー イタズラのサンプル
アラートを出すボタンも作れます。まず次のものを、<HEAD> から </HEAD> に入れます。コメントを改行する場合は、\nを入れておきます。onegai は、適当につけたイベント名です。 <SCRIPT LANGUAGE="JavaScript"> <!-- function onegai(){ alert("アンケートに投票していただけますか\n内容、操作性、デザインを５段階で評価します\n３つとも「５」でお願いしま〜す♪"); } //--> </SCRIPT> 次にボタンを配置する場所に、次のものを入れます。 <INPUT type="button" value="投票前にお読み下さい" onClick="onegai()">
アラートを出すボタンも作れます。まず次のものを、<HEAD> から </HEAD> に入れます。コメントを改行する場合は、\nを入れておきます。onegai は、適当につけたイベント名です。
次にボタンを配置する場所に、次のものを入れます。
リンクの上にカーソルが乗ると、コメントが画面の指定したところに表示される魅力的なテクニックを学びました。まだ思案中ですが、これは使えそうですね？取りあえず飾りの部分を削除したソースとサンプルだけご覧下さい。 <SPAN onMouseover="oshirase.innerHTML='ホームページを作りながら培ったプチテク集の一覧です'" onMouseout="oshirase.innerHTML='お知らせはコチラ'"> <A HREF="../entrada/index.html">インデックス</A></SPAN> <SPAN onMouseover="oshirase.innerHTML='リンクのプチアイディアを集めました'" onMouseout="oshirase.innerHTML='お知らせはコチラ'"> <A HREF="../link/index.html">リンクの工夫</A></SPAN> <SPAN id="oshirase"> </SPAN> サンプル
リンクの上にカーソルが乗ると、コメントが画面の指定したところに表示される魅力的なテクニックを学びました。まだ思案中ですが、これは使えそうですね？取りあえず飾りの部分を削除したソースとサンプルだけご覧下さい。
<SPAN onMouseover="oshirase.innerHTML='ホームページを作りながら培ったプチテク集の一覧です'" onMouseout="oshirase.innerHTML='お知らせはコチラ'"> <A HREF="../entrada/index.html">インデックス</A></SPAN> <SPAN onMouseover="oshirase.innerHTML='リンクのプチアイディアを集めました'" onMouseout="oshirase.innerHTML='お知らせはコチラ'"> <A HREF="../link/index.html">リンクの工夫</A></SPAN>
<SPAN id="oshirase"> </SPAN>
マーキーは InternetExplorer だけで、NetscapeNavgator ではサポートしていません。PageMill もサポートしていないようです。それでもマーキーを実行したいときがありますから、試してみる価値はありますね？ マーキーの基本のHTML タグは、<MARQUEE WIDTH="n" HEIGHT="n" BEHAVIOR="scroll" DIRECTION="left" LOOP=infinite SCROLLAMOUNT=n SCROLLDELAY=n WIDTH="n" HEIGHT="n" HSPACE="n" VSPACE="n" ALIGN="n" BGCOLOR="#rrggbb">入れたい文など</MARQUEE> ですが、なんかややこしそうですね？そこで後で考えてもいいような茶色の部分を取ってしまって、単純化したものを作ってみました。最初は表に入れず、フォントも指定せず、ただ下のものをHTMLソースにコピーしただけですが。
マーキーは InternetExplorer だけで、NetscapeNavgator ではサポートしていません。PageMill もサポートしていないようです。それでもマーキーを実行したいときがありますから、試してみる価値はありますね？
マーキーの基本のHTML タグは、<MARQUEE WIDTH="n" HEIGHT="n" BEHAVIOR="scroll" DIRECTION="left" LOOP=infinite SCROLLAMOUNT=n SCROLLDELAY=n WIDTH="n" HEIGHT="n" HSPACE="n" VSPACE="n" ALIGN="n" BGCOLOR="#rrggbb">入れたい文など</MARQUEE> ですが、なんかややこしそうですね？そこで後で考えてもいいような茶色の部分を取ってしまって、単純化したものを作ってみました。最初は表に入れず、フォントも指定せず、ただ下のものをHTMLソースにコピーしただけですが。
これではセンスがないですから、全体を表の中に入れて中央に配置し、フォントのサイズや色を指定します。表に入っていることが分からないようにするには、枠を無くし、背景色を指定しなければＯＫです。<B></B>はセットで、ボールドタイプを指定しています。
これで一応は見られますが、さっき切り捨てた茶色部分で、さらに変更を加えることが可能です。いくつが見てみましょう。 BEHAVIOR="scroll" 反対側に消えます。slide で反対側で止まり、alternate で反対側から戻るります。 DIRECTION="left" 左へ流れ、right で右へ、up で上へ流れます。 LOOP=infinite 連続して流れます。n 回として流れる回数を指定します。 SCROLLAMOUNT=n n ピクセル単位で１回に移動する間隔を指定します。 SCROLLDELAY=n n ミリ秒単位で次に流れるまでの待ち時間を指定します。
これで一応は見られますが、さっき切り捨てた茶色部分で、さらに変更を加えることが可能です。いくつが見てみましょう。
BEHAVIOR="scroll" 反対側に消えます。slide で反対側で止まり、alternate で反対側から戻るります。 DIRECTION="left" 左へ流れ、right で右へ、up で上へ流れます。 LOOP=infinite 連続して流れます。n 回として流れる回数を指定します。 SCROLLAMOUNT=n n ピクセル単位で１回に移動する間隔を指定します。 SCROLLDELAY=n n ミリ秒単位で次に流れるまでの待ち時間を指定します。
マーキーでイメージも流せます。でもあまり大きなものは好ましくありませんね？以前見かけたのは、オフ会の主催者の幹事さんの小さな顔写真がいくつか流れるものでした。試みに MarilynMonroe-s.jpg を流してみましょう。MARQUEE の定義の SCROLLDELAY=1> の後ろ、<FONT の前に <IMG SRC="MarilynMonroe-s.jpg"> を入れるだけです。
映画やテレビドラマの最後に、キャストやスタッフの名前が流れますが、これもマーキーで作れます。かなり演出効果の高い方法ですが、残念ながら Netscape Navigator では使えません。また使い場所を誤るとくどくなるでしょう。驚きと好感で迎えられるような、シンプルなものがいいですね？工夫のし甲斐がありそうです。サンプルはこのサイトのフレーム無しの目次を単純化しました。 なおウィンドウに自動でスクロールする例を載せてありますので、参考にして下さい。
映画やテレビドラマの最後に、キャストやスタッフの名前が流れますが、これもマーキーで作れます。かなり演出効果の高い方法ですが、残念ながら Netscape Navigator では使えません。また使い場所を誤るとくどくなるでしょう。驚きと好感で迎えられるような、シンプルなものがいいですね？工夫のし甲斐がありそうです。サンプルはこのサイトのフレーム無しの目次を単純化しました。
なおウィンドウに自動でスクロールする例を載せてありますので、参考にして下さい。
