BasicControls

Core

Basic Controls Extension Controls Community Extensions Aspects Effects Combinations

Why Gaia Ajax?
The ASP.NET world needed a fast, lightfoot and intelligent library.
Gaia boosts your webapp development using C# or VB.NET and your existing ASP.NET knowledge. Gaia only sends what has changed back to the browser.
The result: a rich and responsive user experience.

Runs on ASP.NET

Gaia Ajax: ImageMap

The Gaia Ajax Image displays an image on a page. When a hot spot region defined within the ImageMap control is clicked, the control either generates an Ajax callback (postback) to the server or navigates to a specified URL. It inherits from the ASP.NET ImageMap, and has built-in Ajax behaviour.

Today's task: Roughly click the sky, the forest and the water on the image

Sky

Forest

Water

ASPX Markup
C# code
VB.NET
styles.css

Markup (ASPX/.aspx)
  
 <div class="container-imagemap">
     <gaia:ImageMap ID="zScenery" runat="server" ImageUrl="~/media/collections/images/scenery/summer_lake.jpg"
         HotSpotMode="PostBack" OnClick="zScenery_Click">
         <asp:RectangleHotSpot Bottom="160" Right="350" AlternateText="Sky"
             PostBackValue="sky" />
         <asp:RectangleHotSpot Bottom="180" Right="350" AlternateText="Forest"
             Top="160" PostBackValue="forest" />
         <asp:RectangleHotSpot AlternateText="Water" Bottom="263" Right="350"
             Top="180" PostBackValue="water" />
     </gaia:ImageMap>
 </div>
 <div class="container-todays-task">
     <b>
         Today's task: Roughly click the sky, the forest and the water on the image</b>
     <gaia:Panel ID="zSky" runat="server" CssClass="answer-box answer-box-negative">
         Sky
     </gaia:Panel>
     <gaia:Panel ID="zForest" runat="server" CssClass="answer-box answer-box-negative">
         Forest
     </gaia:Panel>
     <gaia:Panel ID="zWater" runat="server" CssClass="answer-box answer-box-negative">
         Water
     </gaia:Panel>
 </div>
  
  