Change size of image control in javascript

Question

I want to change the size of the images in 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

Is it possible to do this here?

Here is some 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

I would recommend setting this JS functionality cleint side:

Depending on how your images are added to the html doc. you can use jQuery to listen to the events and alter the size of ur images...

look into 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");
    })

});

add to code behind

image.CssClass = "thumbImg";

Add the css class to Panel2

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

You could also just add / remove CssClasses, you might need to fine tune the js to match ur html, use the the online documentation to help you, but this is the answer