<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageRotation.aspx.cs" Inherits="ImageRotation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
li
{
border:1px solid black;
padding:20px 20px 20px 20px;
width:110px;
background-color:Gray;
color:White;
cursor:pointer;
}
a { color:White; font-family:Tahoma; }
.a
{
height:50px;
width:50px;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul.level1 li").hover(function () {
$(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow");
}, function () {
$(this).stop().animate({ opacity: 1, width: "110px" }, "slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Chrysanthemum.jpg" Text="Home" Value="Home" />
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Desert.jpg" Text="About Us" Value="AboutUs" />
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Jellyfish.jpg" Text="Products" Value="Products" />
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Hydrangeas.jpg" Text="Contact Us" Value="ContactUs" />
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
li
{
border:1px solid black;
padding:20px 20px 20px 20px;
width:110px;
background-color:Gray;
color:White;
cursor:pointer;
}
a { color:White; font-family:Tahoma; }
.a
{
height:50px;
width:50px;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul.level1 li").hover(function () {
$(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow");
}, function () {
$(this).stop().animate({ opacity: 1, width: "110px" }, "slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Chrysanthemum.jpg" Text="Home" Value="Home" />
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Desert.jpg" Text="About Us" Value="AboutUs" />
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Jellyfish.jpg" Text="Products" Value="Products" />
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Hydrangeas.jpg" Text="Contact Us" Value="ContactUs" />
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
No comments:
Post a Comment