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>

Add some of what the HTML looks like when its sent to the client. — BigBlondeViking
– BigBlondeViking, Commented Jul 24, 2009 at 15:38
I might suggest taking a look at imageresizing.net, as that will allow you to perform true image resizing, rather than javascript faking. To use the library, just add "?width=100" to the image URL from your javascript snippet. — Lilith River
– Lilith River, Commented Jul 13, 2011 at 17:54

BigBlondeViking · Accepted Answer · 2009-07-24 18:37:54Z

4

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

edited Jul 24, 2009 at 18:37

answered Jul 24, 2009 at 15:36

BigBlondeViking

3,9631 gold badge34 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Over a year ago

i am getting an object expected error for the script you recommended above. Do I have this set up correctly? Does Jquery know to use the correct img tag?

Collectives™ on Stack Overflow

Change size of image control in javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related