Image Map

  • Used for clickable image in webpage.
  • Do Postback

Inheritence: WebConctrol à Image àImageMapmm

Primary Property:

  • HotSpotMode
    • Postback
    • Navigate
  • NavigateUrl
  • PostbacekValue
  • Target: get, set
    • Frame
    • WebPage
  • HotSpot
    • CircleHotSpot
      • Radious
      • X
      • Y
    • RactangleHotSpot
      • Bottom
      • Left
      • Right
      • Top
    • PolygonHotSpot
  • HotSpot Method
    • GetCoordinates
    • New

Code:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”MctsWeb._Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >

<head runat=”server”>

<title></title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div style=”height: 844px; width: 772px; font-weight: 700;”>

<asp:Label ID=”lblInfo” runat=”server”></asp:Label>

<br />

<asp:ImageMap ID=”imgMap” ImageAlign =”Middle” runat=”server”

ImageUrl=”~/Images/friends.jpg” style=”width:431px; height:422px”

onclick=”imgMap_Click1″></asp:ImageMap>

</form>

</body>

</html>

Code Behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace MctsWeb

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

imgMap.AlternateText = “This is a friends Image”;

imgMap.HotSpotMode = HotSpotMode.PostBack;

//  imgMap.HotSpotMode = HotSpotMode.Navigate; //to Navigate

CircleHotSpot chs;

RectangleHotSpot rhs;

PolygonHotSpot phs;

//added a circular hotspot

chs = new CircleHotSpot();

chs.X = 297;

chs.Y = 271;

chs.Radius = 100;

chs.PostBackValue = “On the Image>>”;

imgMap.HotSpots.Add(chs);

rhs = new RectangleHotSpot();

rhs.Right = 2044;

rhs.Left = 100;

rhs.Top = 100;

rhs.Bottom = 1500;

rhs.PostBackValue = “On the Image”;

imgMap.HotSpots.Add(rhs);

}

protected void imgMap_Click1(object sender, ImageMapEventArgs e)      {

lblInfo.Text = “You Clicked: ” + e.PostBackValue;

}

}

}

Advertisements