フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > マウスポインタが画像の上にくると色が変わる  

マウスポインタが画像の上にくると色が変わる

原案:平井 公大 氏 (2000/08/13 登録)

 マウスポインタが上にくると画像の色が変わります。画像の色そのものが変わるのではなくて色の違う画像に入れ替え、マウスポインタが離れると元の画像と入れ替えなおしています。

(注:サイズは最初に表示されている画像のサイズになりますので、入れ替え後の画像も同じサイズにしておく必要があります。)

表示サンプル

FHPG

FBGF

FWEBKK

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>マウスポインタが画像の上にくると色が変わる</title>
<script type="text/javascript">
<!--
function chgimg(f, n) {
  if( f=="fhpg")   document.fhpg.src   = f + n +".gif";
  if( f=="fbgf")   document.fbgf.src   = f + n +".gif";
  if( f=="fwebkk") document.fwebkk.src = f + n +".gif";
}
// -->
</script>
</head>
<body>
<div style="text-align:center"> 
  <p><a href="http://forum.nifty.com/fhpg/" 
    onMouseOver="chgimg('fhpg', 2 )" 
    onMouseOut ="chgimg('fhpg', 1 )"><img src="fhpg1.gif" 
    name="fhpg" alt="FHPG" width="100" height="20" border="0"></a></p>
  <p><a href="http://forum.nifty.com/fbgf/" 
    onMouseOver="chgimg('fbgf', 2 )" 
    onMouseOut ="chgimg('fbgf', 1 )"><img src="fbgf1.gif" 
    name="fbgf" alt="FBGF" width="100" height="20" border="0"></a></p>
  <p><a href="http://forum.nifty.com/fwebkk/" 
    onMouseOver="chgimg('fwebkk', 2 )"
    onMouseOut ="chgimg('fwebkk', 1 )"><img src="fwebkk1.gif" 
    name="fwebkk" alt="FWEBKK" width="100" height="20" border="0"></a></p>
</div>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.