Question

我在我的ASP.NET（C＃，VS2010）Web应用程序中创建了一个表，其行和单元格应该是动态创建的（从DB中读取），我在每行中都有一个动态创建的图像（在代码隐藏中）文件），我怎么能用鼠标改变它的图像（显示悬停）？使用一个小的JavaScript函数很容易为静态创建的控件，但如何为动态创建的控件做到这一点？我可以使用内联JS函数吗？我该如何实施呢？

感谢

Answer 1

使用CssClass属性动态创建您创建的图像：

// Dynamically create the image control in code behind
Image image = new Image();
Image.CssClass = "change-on-hover";
Image.ImageUrl = "image.jpg"; // Of course, this is dynamic from the database

// Save the alternative image URL in a data-attribute
Image.Attributes["data-alternate-image"] = "image-over.jpg";

parent.Controls.Add(image);

这会渲染每个图像：

<img src="image.jpg" class="change-on-hover" 
  data-alternative-image="image-over.jpg" />

然后在jQuery中，你可以找到这个类的所有图像来绑定行为：

$("img.change-on-hover")
  .on("mouseover", function(e) {
    // Save original src (image.jpg)
    $(this).data("original-image") = this.src;

    // Change src to alternative (image-over.jpg)
    this.src = $(this).data("data-alternate-image");
  })
  .on("mouseout", function(e) {
    // Change src back to original
    this.src = $(this).data("original-image");
  });

data-alternative-image属性是一种很好的方法，可以在代码后面的图像标记中存储一些信息，然后可以在JavaScript事件处理程序中读取。您可以按照自己喜欢的方式创建自己的数据属性。

有关数据属性的更多信息：http://ejohn.org/blog/html-5-data-attributes/

使用javascript更改动态创建的ASP.NET图像控件

1 个答案: