在JavaScript图像控件的大小变化 [英] Change size of image control in javascript

问题描述

我想改变图像的大小在JavaScript的onmouseover

昏暗的文件作为字符串（）= Directory.GetFiles（使用Server.Mappath（〜/资料夹/文件夹2 /），* .JPG）

 为每个文件作为字符串在文件列表中
    文件= File.Substring（File.LastIndexOf（/）+ 1，File.Length）
    回复于（档案与＆LT; BR＆gt;中）    文件=档案与〜/资料夹/文件夹2 /    昏暗的图像作为图像=新形象（）
    image.ImageUrl =文件
    image.Height = 50
    image.Width = 50
    Me.Controls.Add（图）
    image.Attributes.add（的onmouseover，更改大小这里）    Panel2.controls.add（图）
下一个
 

是否有可能在这里做到这一点？

下面是一些HTML

 ＆LT; ASP：按钮的ID =Button1的=服务器文本=按钮的ValidationGroup =无/＆GT;
                            ＆LT; ASP：面板ID =Panel1的=服务器
                                风格=显示：无;背景颜色：透明;填充：1EM 6个像素;背景色=白＆GT;
                                    ＆LT; ASP：面板ID =是Panel2=服务器的风格=背景色：黑色; WIDTH =265px＆GT;
                                    ＆LT;表＆gt;
                                        ＆所述; TR＆GT;
                                            ＆LT; TD ALIGN =右＆GT;
                                                ＆LT; ASP：ImageButton的ID =CancelButton的CssClass =bttnCancel=服务器文本=取消
                                                的ImageUrl =〜/图片/ bttnCancel.gif的ValidationGroup =无/＆GT;
                                            ＆LT; / TD＆GT;
                                        ＆LT; / TR＆GT;
                                    ＆LT; /表＆gt;
                                    ＆LT; / ASP：面板＆gt;
                                ＆LT; / ASP：面板＆gt;
 

解决方案

我会建议设置这个JS功能cleint端：

根据您如何将图像添加到HTML文档。你可以使用jQuery来听的事件和乌尔改变图像大小...

看到jQuery的： http://docs.jquery.com/Main_Page

  $（文件）。就绪（函数（）{
    $（img.thumbImg）。鼠标指向（函数（）{
    $（本）.attr（高度，100），ATTR（宽度，100）;
    }）。鼠标移开（函数（）{
    $（本）.attr（高度，50）ATTR（宽度，50）;
    }）}）;
 

添加到code后面

  image.CssClass =thumbImg;
 

CSS类添加到是Panel2

 ＆LT; ASP：面板ID =是Panel2=服务器的CssClass =大拇指的风格=背景色：黑色; WIDTH =265px＆GT;
 

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

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>

解决方案

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

这篇关于在JavaScript图像控件的大小变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！