Extending the ImageMap HTML Control with AJAX 1.0 Extensions: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
Extending the ImageMap HTML Control with AJAX 1.0 Extensions

page 1 of 8

Published: 15 Jun 2007

Abstract
In this article, Bilal Haidar will show you how to extend the HTML ImageMap control by adding clickable hot spots so that when hovered over will popup a tiny window informing the user with more information on the spot selected using the AJAX Services.

by Bilal Haidar
Feedback

Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 37565/ 40

Article Contents:

Introduction

This is the third article in my series of articles that are targeting the new AJAX 1.0 extensions in ASP.NET 2.0.

In this article we are going to show how to easily integrate an HTML Image Map control with AJAX 1.0 extensions using the coolest feature of AJAX 1.0 which is AJAX Services. What we will show in this article is very handy and useful. For instance, you can have a facility on your applications to show a map with clickable areas in such a way, when an area is clicked, a popup window will show more detailed information about the clicked area. Without the use of AJAX, the user would have to wait for the page to post back to the server, get the data and then show them! However, this is unfeasible and makes user experiences very poor. Another option would be when the page loads, it loads all related data for all clickable areas on the page, but this has its own performance weaknesses and also is not a preferred way for solving such an issue.

The above discussion shows the importance of using AJAX to populate the popup window with the related data from the server by utilizing the new features of AJAX and mainly AJAX Service.

A snapshot of what you are expecting from this article can be shown in Figure 1

Figure 1: Expected Ajaxified ImageMap HTML control

As you can see above, a map of Lebanon (author’s mother country) is shown and a hover over of the word Lebanon on the image caused a tiny and elegant popup window to show up giving more details about the area hovered over. In this example the popup will only echo the text in the hovered over area.

View Entire Article

(Page 2) »

AJAX Resource Center

User Comments

Title: xdxd
Name: dxdx
Date: 2012-07-08 8:00:06 PM
Comment:
xdxdxd

Title: feedback
Name: fegef
Date: 2010-01-11 9:06:18 AM
Comment:
not working, check it properly and in all browsers

Title: Thanks a Lot Dude
Name: Johns
Date: 2009-01-25 3:46:50 AM
Comment:
This is what i looking for....greate example man.....thank you very much.....

Title: Just what I was looking for, but having some issues
Name: IG
Date: 2008-12-10 5:24:44 AM
Comment:
This is a great example, I am however getting an error:

Microsoft JScript runtime error: 'window.location.hash' is null or not an object.

I am not too clued up with Java, so any guydance would be appreciated.

Thanks,

Ian

Title: Thanks for the example, works great!
Name: KC
Date: 2008-04-16 9:10:25 AM
Comment:
Thanks for the example. Been looking for something just like this and has really helped! Never thought of using a service.

One comment: Currently, the code only seems to work in IE but a quick change will quickly resolve this...

Might I suggest that you change the very last part of your javascript file to look something like this:

// Register the class
MyServices.Location.registerClass("MyServices.Location");

var myLocation = "blah";
function pageLoad(sender, args) {
// Create a new instance of the class
myLocation = new MyServices.Location("modal", "modalBody", "updateProgress");

// Hide the popup div
myLocation.HidePopupInfo();
}

// Method called by the page controls
// to update the UI with the information
// from the ajax service
function GetAreaInfo(event, args) {
myLocation.ShowPopupinfo(event, args);
}

function HidePopup() {
// Hide the popup div
myLocation.HidePopupInfo();
}

If you notice, I changed "var Location = null;" to "var myLocation = null;". For some reason, the former would cause all non-IE browsers to redirect to whatever location was equal to (even when it was not null.)

Hope this helps and again, great example!

KC

Title: Why use web services?
Name: BWG
Date: 2007-08-29 10:30:54 AM
Comment:
Interesting, but why is it necessary to use web services to achieve this?

Title: This example is working ...
Name: WebDev
Date: 2007-07-27 6:12:02 AM
Comment:
... only in IE.

Title: Not working Example
Name: WebDev
Date: 2007-07-27 6:02:09 AM
Comment:
I've been redirected from Default.aspx to null. Code doesn't work.