ImageMap Control in ASP.NET
If you want to split the image into different areas for navigation use ImageMap control in Asp.Net. ImageMap control allows to you to have different navigation sections in one image. For example you have some menu image with three menu items and for each menu item click we have to navigate to different location use ImageMap control. In this article we discuss about ImageMap control in Asp.Net.
Open Visual Studio => CreateAsp.Net Web Application => Add ImageMap control as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ImageMapExp._default" %>
<!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>ImageMap Control in ASP.NET</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="mapNavigate" ImageUrl="menupic.png" runat="server">
<asp:RectangleHotSpot NavigateUrl="https://drupal.org/" Left="0" Top="0" Right="150"
Bottom="70" AlternateText="Navigate to Drupal" />
<asp:RectangleHotSpot NavigateUrl="http://wordpress.com/" Left="150" Top="0" Right="300"
Bottom="70" AlternateText="Navigate to Wordpress" />
<asp:RectangleHotSpot NavigateUrl="http://magento.com/" Left="300" Top="0" Right="450"
Bottom="70" AlternateText="Navigate to Magento" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
As shown above we have image menupic.png with three menu items. We are splitting the image into three items and each item has different navigation. Run the application and the output is as shown below.
Now place cursor on image where DRUPAL is there it displays navigation section to DRUPAL web site as shown below. If you click on DRUPAL it redirects to drupal web site.
Place cursor on image where WORDPRESS is there it displays navigation section to WORDPRESS web site as shown below. If you click on WORDPRESS it redirects to wordpress web site.
Place cursor on image where MAGENTO is there it displays navigation section to MAGENTO web site as shown below. If you click on MAGENTO it redirects to magento web site.
