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

テキストにマウスを置くと、新しい別のテキストを表示させたい場合の、
設定の仕方はいろいろありますが、2-3つ、mouseoverタグを使用した簡単な
ものを紹介します。

知っている人多いと思いますが、私もそろそろ歳なので忘れたときのために・・・・・・、メモしておきます。

先ずは、サンプルです。

【サンプル1】
 
1.このテキストにマウスを乗せる
 
(テキストにマウスを乗せると、別のテキストに変わる。)

【サンプル2】

2.このテキストにマウスを乗せる
   
 
(テキストにマウスを乗せると、空いてるスペースに別のテキストを表示する。)

 
 
【設定方法】

(1)テキストにマウスを乗せると、別のテキストに変わる
テキストにマウスオーバーで新しいテキストを表示する。更に、赤文字に変わる。
 

<span style="color:#0000ff;" 
onmouseover="this.style.color='#ff0000',
this.innerHTML='1a.新しく表示されるテキスト'" 
onmouseout="this.style.color='#0000ff',
this.innerHTML='1.このテキストにマウスを乗せる'">
1.このテキストにマウスを乗せる</span>

 
 
(補足)
『this.interHTML』は、『this.innerText』でも同じですが、ブラウザーによっては機能しない場合があります。

 
 
(2)テキストにマウスを乗せると、空いてるスペースに別のテキストを表示する。
テキストにマウスオーバーで右側の空きスペースに新しいテキストを赤字で表示する。
 

<span style="color:#0000ff;" 
onmouseover="document.all.item('txt01').
style.visibility='visible'" 
onmouseout="document.all.item('txt01').
style.visibility='hidden'">
2.このテキストにマウスを乗せる</span>
   <span ID="txt01" style="visibility:hidden; 
color:#ff0000;" >2a.新しく表示されるテキスト
</span>

 
 

(補足)
<span ID>...</span>のところ、<div ID>...</div>を
使えば、改行後、新しいテキストを表示する。

※※※ (注意) 上記のスクリプトで、”ID”名が同一ページ内で重複すると機能しなくなる。
ブログサイトでは特に注意、1つの記事内ではユニークであっても、他の記事のIDと重複していた場合、1ページに1記事では問題ないが、TOPページ、あるいはカテゴリページで1ページに複数の記事を表示した場合機能しない。ID名はユニークにすること。
 
 
(3)もう一つ、JAVASCRIPTを使用した、テキストの差し替え表示を紹介します。

1.下記のスクリプトを、表示するページの<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>

 
 
2.下記のスクリプトを設置・表示したいところに配置する。テキストは必要に応じて変更してください。
 

<SPAN ID="text3"
onmouseover='TextChange
("text3", "新しいテキストです。")'
onmouseout='TextChange
("text3", "マウスを乗せてください。")'>
マウスを乗せてください。
</SPAN>

 
 
※※※ (注意) 上記のスクリプトで、”ID”名が同一ページ内で重複すると機能しなくなる。
ブログサイトでは特に注意、1つの記事内ではユニークであっても、他の記事のIDと重複していた場合、1ページに1記事では問題ないが、TOPページ、あるいはカテゴリページで1ページに複数の記事を表示した場合機能しない。ID名はユニークにすること。
  
 
ブラウザーソフト、またはそのバージョンにより機能しない可能性があります。確認して使用してください。
 
 
上記は、基本的な設定ですので、他のタグと併せて使用する等、いろいろ応用してみてください。 また、他にも、javascript、 CSS等で設定する方法があります。それらはまた気が向いた時に・・・。
 
 
以上、今回は簡単に使用できるものを紹介しました。
 
 
 
参考までに、画像の場合の基本的なサンプル タグは、以下となります。
(マウスを画像に乗せると、別の画像を表示する)

<a href="クリックしたときの飛び先URL">
<img src="通常表示の画像URL" alt="xxxxxxxx" 
width="xxx" 
onmouseover="this.src='マウスの乗せたときの画像URL'" 
onmouseout="this.src='マウスを外したときの画像URL'">
</a>

 
 
 
 

カテゴリー WEB 使える小技

コメント

コメントを受け付けておりません。