ロールオーバー時の画像切り替え

Posted by muchag | CSS,JavaScript |
初回投稿:2011-05-28 (土) 13:33:34 | 最終更新:2011-05-28 (土) 13:35:32

画像の切り替えは JavaScript でやっていたけど
CSS でもできることを知り
更には、切り替え用の2枚の画像を1枚の画像にする手法を見つけ
ビックリした。
 

CSS

タグ毎に様々な手法があるようで
以下に記したのはその中のごく一部。
 

一般画像(2枚)
  1. <div id="menu_top"><a href="index.html"></a></div>
  1. #menu_top {
  2.     width: 180px;
  3.     height: 50px;
  4.     background: url(out.png) no-repeat;;
  5. }
  6.  
  7. #menu_top a {
  8.     width: 180px;
  9.     height: 50px;
  10.     display: block;
  11. }
  12.  
  13. #menu_top a:hover {
  14.     background: url(over.png) no-repeat;;
  15. }

 

一般画像(1枚)
  1. <a href="index.php" id="menu_top">TOP</a>
  1. a#menu_top {
  2.     width: 300px;
  3.     height: 34px;
  4.     display: block;
  5.     background: url(menu_top.png) left top no-repeat;
  6.     text-indent: -9999px;
  7. }
  8. a:hover#menu_top {
  9.     background-position: 0 -34px;
  10. }

参考元サイト:nplll CSSだけでマウスオーバーして画像に色を付ける(RobGoodlatte.comの場合)
 

input タグ画像(2枚)

マウスオーバー時の画像を背景画像として配置し
マウスオーバー時にはマウスアウト時の画像を透過処理し
背景画像を見えるようにする手法。

  1. div.over {
  2.     background:url("over.png") no-repeat left top;
  3. }
  4. input:hover {
  5.     opacity: 0.0;
  6. */
  7.     /* IE */
  8.     /* filter: alpha(opacity=0); */
  9. /*
  10. }

参考元サイト:WebCreator Note inputボタンのロールオーバーをCSSで指定
 

button タグ画像(2枚)

button タグでもできるようだ。
参考元サイト:パソコンQ&A 現在最良の画像置換法(IR[Image Replacement]法)
 

JavaScript
2枚の画像

一般画像でも

  1. <img src="out.png" onmouseout="this.src='out.png'" onmouseover="this.src='over.png'" alt="メニュー1" />

ボタン画像でも

  1. <input type="image" src="out.png" onmouseout="this.src='out.png'" onmouseover="this.src='over.png'" value="submit" alt="送信" />

簡単♪

Posted by muchag | CSS,JavaScript |
初回投稿:2011-05-28 (土) 13:33:34 | 最終更新:2011-05-28 (土) 13:35:32

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment