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

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

テキストの文章や文字にマウスを当てると画像や写真が任意の場所に表示されるタグの紹介です。

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

テキスト文字にマウスを乗せると画像や写真が出るタグの紹介

狭いスペースで テキストに関連した画像や写真を表示させるときに
役立つタグです。使い方によっては、便利ですよ! (^^*

以前に説明した「画像にマウスを乗せると説明が出る」の逆です。

先ず、下のような感じのテーブルを作ります。
2つに分かれた、左右のセルを作って、テキストを置くセルと画像を
表示させるセルを作ります。テーブルの大きさやデザインは、任意

試しに、下のテーブルのねこの名前にマウスを乗せて見てください♪
右側のセル内に、そのねこちゃんの画像が表示されます。


我家のねこちゃん♪

チビタ

ネタロウ

マロン

左のねこの名前に

チビタ ・ ネタロウ ・ マロン

マウスを乗せてみてね♪

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

テーブルは、画像に合った大きさ、自由な形で作ってください。
上のタグを参考にして、テキストや表示画像を増やせます。

画像を表示する <td> 内に <span id="img1">
span タグの id= を指定します。ここでは、img1 としています。
そして、</span> タグを閉じる間に 最初に表示されている
メッセージを記述します。フォントタグも使えます。
テキスト以外の画像(img)でも、OKです。
<img src= を指定したりして、オープン時の表示を作ります。

各テキスト文字の <font color=  > をそれぞれ、<span=  >
</span> で囲みます。 span タグの閉じ忘れに注意。

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

imgタグを入れる時の注意上があります。
<img src="xxx.gif"> ← 通常はこうですが
これでは、ダメなのです。 " " ←これを入れるとダメです。

" " ←これを省いて、<img src=xxx.gif> こうします。
" " ←これが、あるとエラーになり、表示されません。
これは、<span onmouseover=" 内の記述の全て適応します。

ここでは、ねこの名前のフォントタグは、
<font color="orange" style="cursor:help;"> としてます。
style="cursor:help; ←これは、マウスが乗った時のポインター表示
を指定するスタイルシートです。省いても問題ありません。

画像表示には、フォントタグも使えて、画像と一緒に
テキストも表示させることができまが、フォントタグも
" " ←これが、あるとエラーになり、表示されませんので
注意してください! 例えば、
<font color="#ff0000"> では、ダメなんです。
画像表示欄は、img1.innerHTML='  ’で、囲まれているので
color=#ff0000 ←と記述します。 違いがわかりますか?
color="#ff0000" ←これは、ダメです。 ” ”で囲むとダメなんです。

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

カンマや半角スペースを空けるとろこなどで、ミスが多くなるので
注意しながら、タグの編集をしてください。
コピーしたタグをじっくりと見ながら、上意のことに注意しながら
自分独自の画像表示へ編集してくださいませ。

表示させる画像の大きさを考慮しながら
テーブルの大きさ(横幅や縦幅)を指定することも大切です。
画像が大きくて、テーブルが小さいと、マウスを乗せた時に
最初に表示されていた、テーブルより大きくなります。
そのために、大きくなった分テーブル表示が変になりますので
最初から、表示させる画像の大きさに合った、テーブルを
作っておくことも大事です。

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

これは、いろいろと工夫すると面白くて楽しい表示ができると
思うので、いろいろとチャレンジして、オリジナルを作りましょう♪

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

おしまい。。。








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