none
ImageButton の画像をマウスが乗っている時に画像が変わるようにしたいのですが RRS feed

  • 質問

  • マウスが乗っているときに画像が変わるようにしたいのですが<asp:ImageButton>ではどのようにしたらいいのでしょうか?

    下記コードでスタイルシートで画像が変わるようにしてみたのですが<asp:ImageButton>でこのスタイルシートを使うことはできるのでしょうか?

    <%@ Page Language="VB" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>無題のページ</title>
    <style type="text/css">
      a.rabbit {
       background-image: url("images/rabbit.gif");
       display: block;
       width: 100px; /* 画像1枚分の横幅(※1) */
       height: 100px; /* 画像1枚分の高さ(※2) */
       text-indent: -5000px; /* 文字を消す */
      }
      a.rabbit:hover {
       background-position: top right;
      }
    </style>
    
    </head>
    <body>
      <form id="form1" runat="server">
      <div>
        <a href="sample.html" class="rabbit">うさぎリンク</a><br />
        <br />
        <br />
        <br />
        <br />
     <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/rabbit.gif" />
      </div>
      </form>
    </body>
    </html>
    
    2011年2月13日 8:13

回答

  • 答えがないまま放置しておくのも何なので例を書いておきます。

    先にも書きましたが、ImageButton を使用するなら、mouseover, mouseout
    イベントに以下のようにスクリプトを設定することで可能です。

    protected void Page_Load(object sender, EventArgs e)
    {
      ImageButton1.Attributes["onmouseover"] = "src='Images/test_ovr.jpg';";
      ImageButton1.Attributes["onmouseout"] = "src='Images/test.jpg';";
    }

     

    • 回答としてマーク komi1 2011年2月28日 9:33
    2011年2月26日 3:18

すべての返信

  • ImageButton が html にレンダリングされたときにどうなるかを調べて、それにスタイル
    をどのように適用するかを考えてみてください。css だけでなく JavaScript も必要かも
    しれません。
    2011年2月19日 9:41
  • html をみてみたら<input type="image"となっていました。

    JAVAScriptが必要ということですが、どのように使えば愛意のでしょうか?現在のコードでは

    Microsoft JScript 実行時エラー: 'document.getElementById(...)' は Null またはオブジェクトではありません。

    というエラーがでてしまいます。すみません。

    <%@ Page Language="VB" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
     <title>無題のページ</title>
    
    <script language="JavaScript">
     document.getElementById("Image1").src = "images/rabbit2.gif";
    </script>
    </head>
    <body>
     <form id="form1" runat="server">
     <div>
     <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/rabbit.gif" />
     <input type="image" src="images/rabbit1.gif" ID="Image1"/>
    
     </div>
     </form>
    </body>
    </html>
    
    2011年2月21日 13:52
  • エラーの原因は、<input type="image" src="images/rabbit1.gif" ID="Image1"/> が
    レンダリングされる前にスクリプトが実行されてしまうからです。順番を考えましょう。

    また、イベント(mouseover, mouseout)の使用を検討してみてください。

    2011年2月24日 2:23
  • 答えがないまま放置しておくのも何なので例を書いておきます。

    先にも書きましたが、ImageButton を使用するなら、mouseover, mouseout
    イベントに以下のようにスクリプトを設定することで可能です。

    protected void Page_Load(object sender, EventArgs e)
    {
      ImageButton1.Attributes["onmouseover"] = "src='Images/test_ovr.jpg';";
      ImageButton1.Attributes["onmouseout"] = "src='Images/test.jpg';";
    }

     

    • 回答としてマーク komi1 2011年2月28日 9:33
    2011年2月26日 3:18
  • いつもありがとうございます。

     Attributesプロパティ新しくおぼえさせていただきました。

    GridViewの選択行に色をつけたりといろんなことができるんですね。

    作ったページの使い勝手がよくなりそうな機能ですね。是非使って見たいと思います。

     ありがとうございました。

    2011年2月28日 9:40