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

时间:2009-07-24 15:24:30

标签: c# asp.net javascript vb.net image

我想在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>      

1 个答案:

答案 0 :(得分:4)

我建议设置这个JS功能cleint:

取决于您的图片添加到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,使用在线文档来帮助你,但这就是答案