検索サーチエンジンと動画リンク集byねっとねこ

画像にマウスポイントを乗せると説明が出るタグの使い方と説明

マウスを当てると画像の説明文が任意の場所に表示されるタグの紹介です。

ここで使用するスタイルシートは、WINDOWSの IE 6.0 7.0 にて
表示確認をしています。古いバージョンの IE や MAC専用の
ブラウザでの表示確認は しておりませんので、正しく表示され
るか?おかしな表示になるか?は ご自身で確認してください!

画像にマウスを乗せると説明が出るタグの使い方と説明

狭いスペースで 数枚の画像の説明を出すときに役に立ちます。
先ず、テーブルを作って画像と説明が出る場所を作ります。




ねこ達の写真に

マウスポイントを

乗せて見てください♪

画像をポイントした時に説明が出るタグです。
エリア内で 右クリック→ コピー

テーブルは、自由な大きさ、自由な形で作ってください。

メッセージを表示する <td> 内に <span id="msg1">
span タグの id= を指定します。ここでは、msg1 としています。
そして、</span> タグを閉じる間に 最初に表示されている
メッセージを記述します。フォントタグも使えます。

各画像ファイルの <img src=  > をそれぞれ、<span=  >
</span> で囲みます。 span タグの閉じ忘れに注意。

<span onmouseover="msg1.innerHTML='この中に msg を書く'"
<span onmouseover= は、マウスが乗った時という意味です。
メッセージは、改行をしないで、続けて書きます。
改行すると、エラーとなり、表示されません!

メッセージには、フォントタグも使えますが、例えば
<font color="#ff0000"> では、ダメなんです。
メッセージ欄は、msg1.innerHTML='  ’で、囲まれているので
color=#ff0000 ←と記述します。 違いがわかりますか?
color="#ff0000" ←これは、ダメです。 ” ”で囲むとダメなんです。

続けて、onmouseout="msg1.innerHTML='  '" も記述します。
これは、マウスが離れた時という意味で、離れた時に表示される
メッセージを記述します。 ここでは、元の msg を使っています。

カンマや半角スペースを空けるとろこなどで、ミスが多くなるので
注意しながら、タグの編集をしてください。
これは、リンクなどへも使えます。
ここでは、狭くて 見栄えが悪く感じますが、こんな感じです。


バナーにマウスを
乗せると
サイトの紹介文が
表示されます。


サイトの紹介文を付けて、たくさんの相互リンクをしている人には
この、タグは使えると思います。 どうしても、多くのリンクをすると
ページが縦長になって、下の方までスクロールしないといけないので
このタグを使えば、説明文のスペースを確保できます。

1つのテーブルで、<span id="msg1"> とすると
2つ目のテーブルでは、<span id="msg2"> とします。
3つ目は、<span id="msg3"> ・・・ こうして、テーブルの数だけ
id= を指定すれば、いくつでも この機能は 使えます。
onmouseover="msg2.innerHTML= ←ここも、msg2 や msg3 に
onmouseout="msg2.innerHTML= ←ここも、同じように変更です。

Javaスクリプトでも 似たようなものがありますが、タグでできることは
タグを使ってする方が いいと思います。

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング