小さな門

テキストにマウスオーバーで、別のテキストを表示。

admin

テキストにマウスを置くと、新しい別のテキストを表示させたい場合の、
設定の仕方はいろいろありますが、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>

　
　
　
　

モバイルバージョンを終了