CALENDAR
S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< July 2019 >>
ARCHIVES
CATEGORIES
RECOMMEND
RECOMMEND
MOBILE
qrcode
<< マウスを乗せると文字がでっかくなる! | main | ウッチャンボトル〜♪ >>
マウスを乗せると画像が変わる♪
ホームページを閲覧しているときに、何気なくマウスを画像の所へ持って行くと・・・・
その表示される画像が変わる時があるよね?
で、その画像の上からマウスをどけるとまた元の画像に戻るよね。。。

これは、マウスオーバー機能で、マウスがその指定したものの上に来たときに、どうしますか?という命令をhtmlに書き込んであるんよね。。。

で、Javaとかいろいろあるけど、今回は簡単なのを一つ・・・
基本的には、
ーーーーーーーーーーーーーーーーーーーー
<span onmouseout="changeimg.src='gif/news1.gif'"
onmouseover="changeimg.src='gif/news2.gif'">
<img src="gif/news1.gif" width="105" height="30"
border="0" name="changeimg">
</span>
ーーーーーーーーーーーーーーーーーーーー
この様に記載すればOKだろう〜。

マウスが無いときには「news1」という画像が表示され、
マウスがあるときには「news2」という画像が表示される。

こんな感じかなぁ・・・




また、同じページ内でこの機能をいくつか使用する場合には、
「name="☆☆☆"」で記載されているIDをそれぞれ異なる
様にしてやる必要が出てくる。単純には、番号などを振れば
OKだ。
ーーーーーーーーーーーーーーーーーーーー
<span onmouseout="changeimg1.src='gif/news1.gif'"
onmouseover="changeimg1.src='gif/news2.gif'">
<img src="gif/news1.gif" width="105" height="30"
border="0" name="changeimg1">
</span>
<span onmouseout="changeimg2.src='gif/profile1.gif'"
onmouseover="changeimg2.src='gif/profile2.gif'">
<img src="gif/profile1.gif" width="105" height="30"
border="0" name="changeimg2">
</span>
ーーーーーーーーーーーーーーーーーーーー

そうすれば、こんな感じになるはずだ・・・




ホームページの印象効果としては、まぁまぁ良いかもしれないよね☆
| インターネット | 17:05 | comments(0) | trackbacks(0) | pookmark |
コメント
コメントする









この記事のトラックバックURL
http://blog.kazushi.babyblue.jp/trackback/981687
トラックバック