利用添加onmouseover事件，做一组鼠标经过时自动换图片的图形链接

首先把实现效果贴出来：

鼠标经过“战争”时，战争更换一个图片显示；下图显示当鼠标移过科幻时的效果：

看一下数据表结构：

Pic1中保存鼠标没经过时显示的图片的文件，而Pic2中记录的就是当鼠标移过时显示的图片的文件。为了把所有的图片按三列显示出来，把它们放在一个DataList中：

                <asp:DataList ID="dlMovieTypes" runat="server" DataKeyField="TypeID" DataSourceID="odsMovieTypes" RepeatColumns="3" RepeatDirection="Horizontal" Width="700px" OnItemDataBound="dlMovieTypes_ItemDataBound">
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("TypeID", "MovieList.aspx?TypeID={0}") %>'>
                            <asp:Image ID="imgTypes" runat="server" Height="40px" ImageUrl='<%# Eval("Pic1") %>' Width="200px" /><br />
                        </asp:HyperLink>
                    </ItemTemplate>
                </asp:DataList>
                <asp:ObjectDataSource ID="odsMovieTypes" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetMovieTypes" TypeName="QmxMovieBLL.MovieTypeBLL"></asp:ObjectDataSource>

这里，将pic1的值绑定到imgTypes的ImageUrl属性上。然后，在DataItem绑定完成之后，添加imgTypes的onmouseover和onmouseout属性如下：

 1    protected void dlMovieTypes_ItemDataBound(object sender, DataListItemEventArgs e)
 2    {
 3        QmxMovie.MovieTypeRow type = (QmxMovie.MovieTypeRow)((DataRowView)e.Item.DataItem).Row;
 4        Image image = (Image)e.Item.FindControl("imgTypes");
 5        if (!type.IsPic2Null())
 6        {
 7            image.Attributes.Add("onmouseover", "this.src='" + ResolveUrl(type.Pic2) + "'");
 8        }
 9        if (!type.IsPic1Null())
10        {
11            image.Attributes.Add("onmouseout", "this.src='"+ResolveUrl(type.Pic1)+"'");
12        }
13    }

第7行，当鼠标经过时，修改img的src属性为Pic2的路径。而第11行则当鼠标移开时，把图片再换回来。如果没有第11行，那么，鼠标经过一次图片以后，就一直显示Pic2的图片了。