ペットギャラリー
テキストにマウスオーバーで、別のテキストを表示。
テキストにマウスを置くと、新しい別のテキストを表示させたい場合の、
設定の仕方はいろいろありますが、2-3つ、mouseoverタグを使用した簡単な
ものを紹介します。
知っている人多いと思いますが、私もそろそろ歳なので忘れたときのために・・・・・・、メモしておきます。
先ずは、サンプルです。
【サンプル１】
１．このテキストにマウスを乗せる
（テキストにマウスを乗せると、別のテキストに変わる。）
【サンプル2】
２．このテキストにマウスを乗せる ２a．新しく表示されるテキスト
(テキストにマウスを乗せると、空いてるスペースに別のテキストを表示する。)
【設定方法】
（１）テキストにマウスを乗せると、別のテキストに変わる
テキストにマウスオーバーで新しいテキストを表示する。更に、赤文字に変わる。
<span style="color:#0000ff;" onmouseover="this.style.color='#ff0000', this.innerHTML='１a．新しく表示されるテキスト'" onmouseout="this.style.color='#0000ff', this.innerHTML='１．このテキストにマウスを乗せる'"> １．このテキストにマウスを乗せる</span>
（補足）
『this.interHTML』は、『this.innerText』でも同じですが、ブラウザーによっては機能しない場合があります。
（２）テキストにマウスを乗せると、空いてるスペースに別のテキストを表示する。
テキストにマウスオーバーで右側の空きスペースに新しいテキストを赤字で表示する。
<span style="color:#0000ff;" onmouseover="document.all.item('txt01'). style.visibility='visible'" onmouseout="document.all.item('txt01'). style.visibility='hidden'"> ２．このテキストにマウスを乗せる</span> <span ID="txt01" style="visibility:hidden; color:#ff0000;" >２a．新しく表示されるテキスト </span>
（補足） <span ID>...</span>のところ、<div ID>...</div>を 使えば、改行後、新しいテキストを表示する。
※※※ （注意） 上記のスクリプトで、”ID”名が同一ページ内で重複すると機能しなくなる。
ブログサイトでは特に注意、1つの記事内ではユニークであっても、他の記事のIDと重複していた場合、1ページに１記事では問題ないが、TOPページ、あるいはカテゴリページで1ページに複数の記事を表示した場合機能しない。ID名はユニークにすること。
（３）もう一つ、JAVASCRIPTを使用した、テキストの差し替え表示を紹介します。
１．下記のスクリプトを、表示するページの<HEAD>・・・</DEAD>内に コピペで設置する。
<SCRIPT TYPE="text/javascript">
<!--
function TextChange(id, text){
if(document.all){
document.all(id).innerHTML = text;
}else if(document.getElementById){
document.getElementById(id).innerHTML = text;
}
}
//-->
</SCRIPT>
</HEAD>
２．下記のスクリプトを設置・表示したいところに配置する。テキストは必要に応じて変更してください。
<SPAN ID="text3"
onmouseover='TextChange
("text3", "新しいテキストです。")'
onmouseout='TextChange
("text3", "マウスを乗せてください。")'>
マウスを乗せてください。
</SPAN>
※※※ （注意） 上記のスクリプトで、”ID”名が同一ページ内で重複すると機能しなくなる。
ブログサイトでは特に注意、1つの記事内ではユニークであっても、他の記事のIDと重複していた場合、1ページに１記事では問題ないが、TOPページ、あるいはカテゴリページで1ページに複数の記事を表示した場合機能しない。ID名はユニークにすること。
ブラウザーソフト、またはそのバージョンにより機能しない可能性があります。確認して使用してください。
上記は、基本的な設定ですので、他のタグと併せて使用する等、いろいろ応用してみてください。 また、他にも、javascript、 CSS等で設定する方法があります。それらはまた気が向いた時に・・・。
以上、今回は簡単に使用できるものを紹介しました。
参考までに、画像の場合の基本的なサンプル タグは、以下となります。
（マウスを画像に乗せると、別の画像を表示する）
<a href="クリックしたときの飛び先URL"> <img src="通常表示の画像URL" alt="ｘｘｘｘｘｘｘｘ" width="ｘｘｘ" onmouseover="this.src='マウスの乗せたときの画像URL'" onmouseout="this.src='マウスを外したときの画像URL'"> </a>
