Change size of image control in javascript

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>      

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.