请教imagebutton修改图片url的问题

蓝天之紫 2013-09-17 07:03:59

写了个很简单的imagebutton，实现功能：
1. 点击后修改图片。比如点击前，imagebutton图片为‘.../Clickme.png'，点击后图片为'.../ThankYouClicking.png'.
2. 触发后台一个方法；

现在用javascript去写，但是点击后并没有改变图片,请教大家问题处在哪里呢？谢谢！

<script type="text/javascript">

       function changeImage()

        {

         document.getElementById("ImageTestButton1").setAttribute("ImageUrl", "~/Images/ThankYouClicking.png");

         }

</script>

......

<asp:ImageButton ID="ImageTestButton1" runat="server" ImageUrl="~/Images/ClickMe.png" OnClick="ImageButton1_Click" OnClickClient="changeImage()"/>

...全文

207 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

H_Gragon 2013-09-19

打赏
举报

引用 9 楼 u011388067 的回复:

   protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            ImageTestButton1.ImageUrl = "~/Images/BtnSubmit_J2.png";

            Response.Write("Test!");
            System.Threading.Thread.Sleep(4000);
        }

 protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            ImageTestButton1.ImageUrl = "~/Images/BtnSubmit_J2.png"; //把下面2行去了
        }

蓝天之紫 2013-09-18

打赏
举报

引用 2 楼 guwei4037 的回复:

另外setAttribute方法应该是修改客户端的html。所以客户端并没有ImageUrl，而是src。这个你可以查看html源文件。由于ImageButton实际上就是一个submit，所以单纯这样设置还不行，实际上会提交两次。你可以通过别的按钮来控制ImageButton自己的图片。附完整的例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var a = $("ImageTestButton1");
            a.setAttribute("src", "2.gif");
        };
        function change() {
            var a = $("ImageTestButton1");
            a.setAttribute("src", "1.jpg");
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ImageButton ID="ImageTestButton1" runat="server" />
            <input type="button" id="test" value="测试" onclick="change()" />
        </div>
    </form>
</body>
</html>

不好意思刚回错了。但需求是通过点击这个imagebutton后完成两步。请问如果不通过imagebutton，像点击image可以完成这两步么？（即修改背景图片、提交）谢谢！

蓝天之紫 2013-09-18

打赏
举报

引用 2 楼 guwei4037 的回复:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var a = $("ImageTestButton1");
            a.setAttribute("src", "2.gif");
        };
        function change() {
            var a = $("ImageTestButton1");
            a.setAttribute("src", "1.jpg");
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ImageButton ID="ImageTestButton1" runat="server" />
            <input type="button" id="test" value="测试" onclick="change()" />
        </div>
    </form>
</body>
</html>

蓝天之紫 2013-09-18

打赏
举报

引用 7 楼 cnceohjm 的回复:

你把代码放button按钮单击事件中，点击马上变啊！

你的意思是这样么？这样是先执行sleep，response，然后才是改变图片。

   protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            ImageTestButton1.ImageUrl = "~/Images/BtnSubmit_J2.png";

            Response.Write("Test!");
            System.Threading.Thread.Sleep(4000);
        }

Net攻城狮 2013-09-18

打赏
举报

这个你可以再页面生成后看下浏览器源代码看看你的imagebutton 变成什么了再改

H_Gragon 2013-09-18

打赏
举报

你把代码放button按钮单击事件中，点击马上变啊！

蓝天之紫 2013-09-18

打赏
举报

引用 5 楼 cnceohjm 的回复:

后台更改不就行了嘛
ImageTestButton1.ImageUrl="~/Images/ThankYouClicking.png";

做过了，不可以。要求点击后立刻改变图片，这样是执行完所有语句才会改变。

H_Gragon 2013-09-18

打赏
举报

后台更改不就行了嘛

ImageTestButton1.ImageUrl="~/Images/ThankYouClicking.png";

全栈极简 2013-09-17

打赏
举报

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var a = $("ImageTestButton1");
            a.setAttribute("src", "2.gif");
        };
        function change() {
            var a = $("ImageTestButton1");
            a.setAttribute("src", "1.jpg");
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ImageButton ID="ImageTestButton1" runat="server" />
            <input type="button" id="test" value="测试" onclick="change()" />
        </div>
    </form>
</body>
</html>

全栈极简 2013-09-17