ASP.NET中鼠标悬浮，图片url改变的代码(js)

Question

五张图点的id分别为  image1,2,3,4,5
image1为主要显示。 2345为4张不同图片
当我鼠标移到image2的时候，image1的url变成image2的url
鼠标移到image3的时候，image1的url变成image3的url。。 以此类推表格如下 <table style="width: 483px; height: 402px; text-align: center">
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image2" runat="server" /></td>
                <td rowspan="4" style="width: 245px">
                    <asp:Image ID="Image1" runat="server" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image3" runat="server" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image4" runat="server" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image5" runat="server" /></td>
            </tr>
        </table>

Answer 1

这个不要用服务器端控件了直接下载一个jquery图片展示控件好多了

Answer 2

简单写个js就好了。<table style="width: 483px; height: 402px; text-align: center">
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image2" onmouseover="CgImgUrl(2)" runat="server" /></td>
                <td rowspan="4" style="width: 245px">
                    <asp:Image ID="Image1" runat="server" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image3" onmouseover="CgImgUrl(3)" runat="server" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image4" onmouseover="CgImgUrl(4)" runat="server" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Image ID="Image5" onmouseover="CgImgUrl(5)" runat="server" /></td>
            </tr>
        </table>
<script type="text/javascript">
    function CgImgUrl(flag){
        document.getElementById('Image1').src = '~/Common/Images/image' + flag + '.jpg';
    }
</script>

Answer 3

<table style="width: 483px; height: 402px; text-align: center">
        <tr>
            <td style="width: 100px">
                <asp:Image ID="Image2" onmouseover="CgImgUrl(this)" runat="server" />
            </td>
            <td rowspan="4" style="width: 245px">
                <asp:Image ID="Image1" runat="server" />
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
                <asp:Image ID="Image3" onmouseover="CgImgUrl(this)" runat="server" />
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
                <asp:Image ID="Image4" onmouseover="CgImgUrl(this)" runat="server" />
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
                <asp:Image ID="Image5" onmouseover="CgImgUrl(this)" runat="server" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        function CgImgUrl(img) {
            document.getElementById("<%=Image1.ClientID %>").src = img.src;
        }
    </script>
借用了楼上的模板

Answer 4

onmouseover=function(){..............}
onmouseout=function(){.................}
写下就可以实现吧.

Answer 5

现在大家的意见都很模糊，我说的是ASP.NET不是HTML  所以前台页面不能加img控件。
只能像那样<asp:image>这样写。
但是我在前台调用onmouseover时间又是无语
不报错也不是显示