asp.net - 如何在 ASP.NET 页面中制作此布局？

Question

我想在 ASP.Net 页面中进行此布局，并希望其中的每个圆圈都是一个 ImageButton，当将鼠标悬停在 ImageButton 上时，它会<div></div>在圆圈中间的标签中显示一个文本。

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style >
.modalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}
.modalPopup
{
    background-color:#ffffdd;
    border-width:3px; 
    border-style:solid;
    border-color:Gray; 
    padding:3px; 
    width:200px; 
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
    Welcome To SeearaBook 
</h2>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<a id="SeearaBook" runat="server" href="#">سيرة بووك</a>
<asp:Panel ID="pnlpopup" runat="server" Width="525px" BorderStyle="Solid"
BorderColor="#333737" BackColor="White" BorderWidth="3px" Height="170px" >
<cc1:hovermenuextender ID="HoverMenuExtender1" runat="server" 
TargetControlID="A" PopupControlID="Ages" PopupPosition="Left" HoverDelay="200">
</cc1:hovermenuextender>
<div id ="Ages" style="position: fixed; display: none; color:Blue; font-size:20px; background-color:transparent; width:auto;" >
سيتم دخولك الى عالم سيرة باختيارك للزمان
</div>
<cc1:hovermenuextender ID="HoverMenuExtender2" runat="server" 
TargetControlID="P" PopupControlID="Places" PopupPosition="Left" HoverDelay="200">
</cc1:hovermenuextender>
<div id ="Places" style="position: fixed; display: none; color:Blue; font-size:20px; background-color:transparent; width:auto;" >
سيتم دخولك الى عالم سيرة باختيارك للمكان
</div>
<cc1:hovermenuextender ID="HoverMenuExtender3" runat="server" 
TargetControlID="C" PopupControlID="Char" PopupPosition="Left" HoverDelay="200">
</cc1:hovermenuextender>
<div id ="Char" style="position: relative; display: none; color:Blue; font-size:20px; background-color:transparent; width:auto;" >
مازال العمل جاري عليها
</div>
<cc1:hovermenuextender ID="HoverMenuExtender4" runat="server" 
TargetControlID="E" PopupControlID="Events" PopupPosition="Left" HoverDelay="200">
</cc1:hovermenuextender>
<div id ="Events" style="position: relative; display: none; color:Blue; font-size:20px; background-color:transparent; width:auto;" >
مازال العمل جاري عليها
</div>
<cc1:hovermenuextender ID="HoverMenuExtender5" runat="server" 
TargetControlID="N" PopupControlID="Not" PopupPosition="Left" HoverDelay="200">
</cc1:hovermenuextender>
<div id ="Not" style="position: relative; display: none; color:Blue; font-size:20px; background-color:transparent; width:auto;" >
مازال العمل جاري عليها
</div>
<div align="right">
<asp:ImageButton ID="A" runat="server" BorderWidth="2px" Height="50px" 
        ImageUrl="~/Images/Ages.jpg" onclick="A_Click" Width="50px"  />
<br />
<asp:ImageButton ID="P" runat="server" BorderWidth="2px" Height="50px" 
        ImageUrl="~/Images/Places.jpg" onclick="P_Click" Width="50px" />
<br />
<asp:ImageButton ID="C" BorderWidth="2px" runat="server" Height="50px" 
        ImageUrl="~/Images/Characters.jpg" Width="50px" onclick="C_Click" />
<br />
<asp:ImageButton ID="E" runat="server" BorderWidth="2px" Height="50px" 
        ImageUrl="~/Images/Events.jpg" Width="50px" onclick="E_Click" />
<br />
<asp:ImageButton ID="N" runat="server" BorderWidth="2px" Height="50px" 
        ImageUrl="~/Images/5.jpg" Width="50px" onclick="N_Click" />
<br />
<div align="center">
<asp:Button ID="btnCancelpopup" runat="server" Text="Cancel" BorderStyle="Groove" />
</div>
</div>
</asp:Panel>
<cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="SeearaBook">
<Animations>
    <OnClick>
        <Sequence>
            <EnableAction Enabled="false" />
            <Parallel AnimationTarget="pnlpopup" Duration=".75" Fps="25">
                <Move Horizontal="25" Vertical="-50" />
                <Resize Height="350" Width="475" />
            </Parallel>
        </Sequence>
    </OnClick>
</Animations>
</cc1:AnimationExtender>
<cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnCancelpopup">
<Animations>
    <OnClick>
        <Sequence>
            <EnableAction Enabled="true"
                AnimationTarget="SeearaBook" />
            <Parallel AnimationTarget="pnlpopup" Duration=".75" Fps="25">
                <Move Horizontal="0" Vertical="0" />
                <Resize Height="170" Width="525" />
            </Parallel>
        </Sequence>
    </OnClick>
</Animations>
</cc1:AnimationExtender>
<cc1:RoundedCornersExtender ID="rce" runat="server"
TargetControlID="pnlpopup"
Radius="10"
BorderColor="#333737"
Corners="All" />
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
TargetControlID="A"
Radius="25"
BorderColor="#333737"
Corners="All" />
<cc1:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server"
TargetControlID="P"
Radius="25"
BorderColor="#333737"
Corners="All" />
<cc1:RoundedCornersExtender ID="RoundedCornersExtender3" runat="server"
TargetControlID="C"
Radius="25"
BorderColor="#333737"
Corners="All" />
<cc1:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server"
TargetControlID="E"
Radius="25"
BorderColor="#333737"
Corners="All" />
<cc1:RoundedCornersExtender ID="RoundedCornersExtender5" runat="server"
TargetControlID="N"
Radius="25"
BorderColor="#333737"
Corners="All" />
<cc1:DropShadowExtender ID="dse" runat="server"
TargetControlID="pnlpopup" 
Opacity=".8" 
Rounded="true"
TrackPosition="true" />
<cc1:ModalPopupExtender ID="mpe" runat="server" 
    TargetControlID="SeearaBook" 
    PopupControlID="pnlpopup"  
    CancelControlID="btnCancelpopup" 
    EnableViewState="true"
    DropShadow="true"
    BackgroundCssClass="modalBackground" />
</asp:Content>`

Answer 1

你可能想看看ImageMap控件。http://msdn.microsoft.com/en-us/library/cc295596.aspx如果你想要一些mouseover效果，你可能还需要 javascript。祝你好运！

编辑：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" language="javascript">


        function changeMiddleText(text) {
            //I don't have time to position this div. Find a way to do it
            //and that's it.
            document.getElementById("divContent").innerHTML = text;
        }
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="divContent">
    </div>
    <div style="text-align: center; width: 304px; margin-left: auto; margin-right: auto;">
        <img id="divMap" src="http://i.stack.imgur.com/slQsk.png" usemap="#map" border="0"
            width="304" height="306" alt="" />
        <map id="map" name="map">
            <area shape="poly" onmouseover="changeMiddleText('Text1');" coords="153, 2, 189, 31, 152, 67, 120, 36"
                href="#" alt="" title="" />
            <area shape="poly" onmouseover="changeMiddleText('Text2');" coords="267, 90, 297, 123, 266, 156, 235, 123"
                href="#" alt="" title="" />
            <area shape="poly" onmouseover="changeMiddleText('Text3');" coords="221, 231, 252, 263, 222, 295, 190, 264"
                href="#" alt="" title="" />
            <area shape="poly" onmouseover="changeMiddleText('Text4');" coords="77, 236, 108, 269, 76, 299, 46, 268"
                href="#" alt="" title="" />
            <area shape="poly" onmouseover="changeMiddleText('Text5');" coords="34, 92, 66, 120, 31, 152, 2, 122"
                href="#" alt="" title="" />
            <area shape="circle" id="middleContent" coords="153, 157, 67" alt="" />
        </map>
    </div>
</asp:Content>

JSFiddler

GL！

Answer 2

您可以使用元素的绝对定位。只需确保将元素包含在一个容器中，例如一个 div，它具有position:relative

例子：

<div style="position:relative; height: 400px; width: 500px; background-color: yellow;">
 <img id="topleft" style="position: absolute; top: 150px; left: 100px;">
 <img id="topright" style="position: absolute; top: 150px; right: 100px;">
 <img id="topcenter" style="position: absolute; top: 50px; left: 250px;">
 <img id="bottomleft" style="position: absolute; bottom: 50px; left: 100px;">
 <img id="bottomright" style="position: absolute; bottom: 50px; right: 100px;">
 <img id="center" style="position: absolute; left: 200px; top: 200px;">
</div>

我使用简单的 HTML 标签来传达绝对定位的概念。用您的 ImageButtons 等替换 img 标签。

您可以摆弄 top/left/bottom/top css 值以将您的子元素准确放置在您想要的位置。