在javascript中更改图像控件的大小

Question

我想在 javascript onmouseover 中更改图像的大小。

Dim files As String() = Directory.GetFiles(Server.MapPath("~/Folder1/Folder2/"), "*.jpg")

For Each File As String In files
    File = File.Substring(File.LastIndexOf("/") + 1, File.Length)
    'Response.Write(File & "<br>")

    File = File & "~/Folder1/Folder2/"

    Dim image As Image = New Image()
    image.ImageUrl = File
    image.Height = 50
    image.Width = 50
    Me.Controls.Add(image)
    image.Attributes.add("onmouseover","change size here")

    Panel2.controls.add(image)
Next

这里可以这样做吗？

这是一些 HTML

<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup = "none"/>
                            <asp:Panel ID="Panel1" runat="server" 
                                style="display:none; background-color:Transparent; padding:1em 6px;" BackColor="White">
                                    <asp:Panel ID="Panel2" runat="server" style="background-color:Black;" Width="265px">
                                    <table>
                                        <tr>
                                            <td align="right">
                                                <asp:ImageButton ID="CancelButton" CssClass="bttnCancel" runat="server" Text="Cancel"
                                                ImageUrl="~/images/bttnCancel.gif" ValidationGroup = "none" />                                       
                                            </td>
                                        </tr>
                                    </table>
                                    </asp:Panel>
                                </asp:Panel>      

Answer 1

我建议设置这个 JS 功能客户端：

取决于您的图像如何添加到 html 文档中。你可以使用 jQuery 来监听事件并改变你的图片大小...

查看 jQuery：http://docs.jquery.com/Main_Page

$(document).ready(function() {


    $("img.thumbImg").mouseover(function() {
    $(this).attr("height", "100").attr("width", "100");
    }).mouseout(function() {
    $(this).attr("height", "50").attr("width", "50");
    })

});

添加到后面的代码

image.CssClass = "thumbImg";

将 css 类添加到 Panel2

<asp:Panel ID="Panel2" runat="server"  CssClass="thumbs"  style="background-color:Black;" Width="265px">

您也可以只添加/删除 CssClasses， 您可能需要微调 js 以匹配您的 html，使用在线文档来帮助您，但这就是答案