如何在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值來擺弄你的子元素到你想要的位置。