在JavaScript图像控件的大小变化 [英] Change size of image control in javascript
问题描述
我想改变图像的大小在JavaScript的onmouseover
昏暗的文件作为字符串()= Directory.GetFiles(使用Server.Mappath(〜/资料夹/文件夹2 /),* .JPG)
为每个文件作为字符串在文件列表中
文件= File.Substring(File.LastIndexOf(/)+ 1,File.Length)
回复于(档案与< BR>中) 文件=档案与〜/资料夹/文件夹2 / 昏暗的图像作为图像=新形象()
image.ImageUrl =文件
image.Height = 50
image.Width = 50
Me.Controls.Add(图)
image.Attributes.add(的onmouseover,更改大小这里) Panel2.controls.add(图)
下一个
是否有可能在这里做到这一点?
下面是一些HTML
< ASP:按钮的ID =Button1的=服务器文本=按钮的ValidationGroup =无/>
< ASP:面板ID =Panel1的=服务器
风格=显示:无;背景颜色:透明;填充:1EM 6个像素;背景色=白>
< ASP:面板ID =是Panel2=服务器的风格=背景色:黑色; WIDTH =265px>
<表>
&所述; TR>
< TD ALIGN =右>
< ASP:ImageButton的ID =CancelButton的CssClass =bttnCancel=服务器文本=取消
的ImageUrl =〜/图片/ bttnCancel.gif的ValidationGroup =无/>
< / TD>
< / TR>
< /表>
< / ASP:面板>
< / ASP:面板>
我会建议设置这个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
< ASP:面板ID =是Panel2=服务器的CssClass =大拇指的风格=背景色:黑色; WIDTH =265px>
您也可以只添加/删除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屋!