Image Map Tools

In This Topic

The ThinWeb control provides a set of tools, which when present the controller tools collection emulate the functionality of a HTML image map. The following table lists each tool and provides a short description of the tool functionality:

Type	Description
NBrowserRedirectTool	Navigates the client browser to the URL specified in the Url interactivity attribute of the chart or diagram document element that is below the mouse.
NTooltipTool	Shows a tooltip text or HTML specified in the Toolip interactivity attribute of the chart or diagram document element that is below the mouse.
NCursorTool	Changes the browser cursor to the cursor attribute of the chart or diagram document element that is below the mouse.

The following code snippets show to use these tools in the context of the chart and diagram ThinWeb controls.

Nevron Chart ThinWeb

C#	Copy Code
protected void Page_Load(object sender, EventArgs e) { if (!NThinChartControl1.Initialized) { // get the default chart NChart chart = NThinChartControl1.Charts[0]; // add bar serires to the chart NBarSeries bar = new NBarSeries(); chart.Series.Add(bar); // add one bar bar.Values.Add(10); bar.Values.Add(20); NInteractivityStyle interactivityStyle = new NInteractivityStyle(); // configure the interactivity style interactivityStyle.Cursor.Type = CursorType.Hand; interactivityStyle.Tooltip.Text = "Click here to jump to <b>Nevron website</b>"; interactivityStyle.UrlLink.Url = http://www.nevron.com; bar.InteractivityStyle = interactivityStyle; // configure the controller // Create a cursor tool NThinChartControl1.Controller.Tools.Add(new NCursorTool()); // Create a tooltip tool NTooltipTool tooltipTool = new NTooltipTool(); // time in milliseconds before showing a tooltip tooltipTool.InitialDelay = 1000; // time in milliseconds showing the the tooltip tooltipTool.PopDelay = 5000; // // time in before showing another tooltip tooltipTool.ReshowDelay = 0; // time in milliseconds fading out the tooltip tooltipTool.FadeOutDelay = 500; // whether the tooltip follows the mouse tooltipTool.FollowMouse = true; NThinChartControl1.Controller.Tools.Add(tooltipTool); // Create a browser redirect tool NBrowserRedirectTool browserRedirectTool = new NBrowserRedirectTool(); // whether to open the url link in a new browser window browserRedirectTool.OpenLinkInNewWindow = true; NThinChartControl1.Controller.Tools.Add(browserRedirectTool); } }

Copy Code

protected void Page_Load(object sender, EventArgs e)

{

if (!NThinChartControl1.Initialized)

{

// get the default chart
NChart chart = NThinChartControl1.Charts[0];

// add bar serires to the chart
NBarSeries bar = new NBarSeries();
chart.Series.Add(bar);

// add one bar
bar.Values.Add(10);
bar.Values.Add(20);

NInteractivityStyle interactivityStyle = new NInteractivityStyle();

// configure the interactivity style
interactivityStyle.Cursor.Type = CursorType.Hand;
interactivityStyle.Tooltip.Text = "Click here to jump to <b>Nevron website</b>";
interactivityStyle.UrlLink.Url = http://www.nevron.com;
bar.InteractivityStyle = interactivityStyle;

// configure the controller
// Create a cursor tool
NThinChartControl1.Controller.Tools.Add(new NCursorTool());

// Create a tooltip tool
NTooltipTool tooltipTool = new NTooltipTool();

// time in milliseconds before showing a tooltip

tooltipTool.InitialDelay = 1000;

// time in milliseconds showing the the tooltip
tooltipTool.PopDelay = 5000;
// // time in before showing another tooltip
tooltipTool.ReshowDelay = 0;
// time in milliseconds fading out the tooltip
tooltipTool.FadeOutDelay = 500;
// whether the tooltip follows the mouse
tooltipTool.FollowMouse = true;
NThinChartControl1.Controller.Tools.Add(tooltipTool);

// Create a browser redirect tool
NBrowserRedirectTool browserRedirectTool = new NBrowserRedirectTool();

// whether to open the url link in a new browser window
browserRedirectTool.OpenLinkInNewWindow = true;

NThinChartControl1.Controller.Tools.Add(browserRedirectTool);

}

Nevron Diagram ThinWeb

C#	Copy Code
protected void Page_Load(object sender, EventArgs e) { if (!NThinDiagramControl1.Initialized) { // add the client mouse event tool NDrawingDocument document = NThinDiagramControl1.Document; document.BeginInit(); document.BackgroundStyle.FrameStyle.Visible = false; document.AutoBoundsPadding = new Nevron.Diagram.NMargins(10f, 10f, 10f, 10f); document.Style.FillStyle = new NColorFillStyle(Color.White); NBasicShapesFactory factory = new NBasicShapesFactory(document); NShape circle = factory.CreateShape(BasicShapes.Circle); circle.Bounds = new NRectangleF(0f, 0f, 200f, 200f); document.ActiveLayer.AddChild(circle); NInteractivityStyle interactivityStyle = new NInteractivityStyle(); // configure the interactivity style interactivityStyle.Cursor.Type = CursorType.Hand; interactivityStyle.Tooltip.Text = "Click here to jump to <b>Nevron website</b>"; interactivityStyle.UrlLink.Url = "http://www.nevron.com"; circle.Style.InteractivityStyle = interactivityStyle; NThinDiagramControl1.SizeToContent(); // configure the controller // Create a cursor tool NThinDiagramControl1.Controller.Tools.Add(new NCursorTool()); // Create a tooltip tool NTooltipTool tooltipTool = new NTooltipTool(); // time in milliseconds before showing a tooltip tooltipTool.InitialDelay = 1000; // time in milliseconds showing the the tooltip tooltipTool.PopDelay = 5000; // // time in before showing another tooltip tooltipTool.ReshowDelay = 0; // time in milliseconds fading out the tooltip tooltipTool.FadeOutDelay = 500; // whether the tooltip follows the mouse tooltipTool.FollowMouse = true; NThinDiagramControl1.Controller.Tools.Add(tooltipTool); // Create a browser redirect tool NBrowserRedirectTool browserRedirectTool = new NBrowserRedirectTool(); // whether to open the url link in a new browser window browserRedirectTool.OpenLinkInNewWindow = true; NThinDiagramControl1.Controller.Tools.Add(browserRedirectTool); } }

Copy Code

protected void Page_Load(object sender, EventArgs e)

{

if (!NThinDiagramControl1.Initialized)

{

// add the client mouse event tool

NDrawingDocument document = NThinDiagramControl1.Document;
document.BeginInit();
document.BackgroundStyle.FrameStyle.Visible = false;
document.AutoBoundsPadding = new Nevron.Diagram.NMargins(10f, 10f, 10f, 10f);
document.Style.FillStyle = new NColorFillStyle(Color.White);

NBasicShapesFactory factory = new NBasicShapesFactory(document);
NShape circle = factory.CreateShape(BasicShapes.Circle);
circle.Bounds = new NRectangleF(0f, 0f, 200f, 200f);

document.ActiveLayer.AddChild(circle);
NInteractivityStyle interactivityStyle = new NInteractivityStyle();

circle.Style.InteractivityStyle = interactivityStyle;

NThinDiagramControl1.SizeToContent();

// configure the controller

// Create a cursor tool
NThinDiagramControl1.Controller.Tools.Add(new NCursorTool());
// Create a tooltip tool
NTooltipTool tooltipTool = new NTooltipTool();
// time in milliseconds before showing a tooltip
tooltipTool.InitialDelay = 1000;
// time in milliseconds showing the the tooltip
tooltipTool.PopDelay = 5000;
// // time in before showing another tooltip
tooltipTool.ReshowDelay = 0;
// time in milliseconds fading out the tooltip
tooltipTool.FadeOutDelay = 500;
// whether the tooltip follows the mouse
tooltipTool.FollowMouse = true;
NThinDiagramControl1.Controller.Tools.Add(tooltipTool);

// Create a browser redirect tool
NBrowserRedirectTool browserRedirectTool = new NBrowserRedirectTool();

// whether to open the url link in a new browser window
browserRedirectTool.OpenLinkInNewWindow = true;

NThinDiagramControl1.Controller.Tools.Add(browserRedirectTool);

}

Related Examples

Chart\Web Forms\ThinWeb\Image Map Tools
Chart\Mvc\ThinWeb\Image Map Tools

Diagram\Web Forms\ThinWeb\Image Map Tools
Diagram\Mvc\ThinWeb\Image Map Tools