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 2 of 8

by Bilal Haidar
Feedback

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

Article Contents:

Configuring the HTML ImageMap control with clickable hot spots

To start with, you need to create a new AJAX enabled web site from inside Visual Studio 2005. Creating a new website based on this template makes sure that the website is properly configured to run with AJAX. If you have any problems in creating such a website, please make sure you check one of the last two articles about AJAX that included a detailed section on how to create such a website.

Add a new ASPX page and add the following HTML tags:

Listing 1

<map name="ImageMap">
<area shape="rect" alt="" coords="0,0,85,20"
  onmouseover="javascript:GetAreaInfo(event, 'Lebanon');"
onmouseout="javascript:HidePopup();" />
<area shape="rect" alt="" coords="135,60,185,75"
 onmouseover="javascript:GetAreaInfo(event, 'Tripoli');"
onmouseout="javascript:HidePopup();" />
<area shape="rect" alt="" coords="120,105,160,120"
 onmouseover="javascript:GetAreaInfo(event, 'Byblos');"
onmouseout="javascript:HidePopup();" />                
<area shape="rect" alt="" coords="93,140,140,160"
 onmouseover="javascript:GetAreaInfo(event, 'Beirut');"
onmouseout="javascript:HidePopup();" />
<area shape="rect" alt=""  coords="70,240,105,260"
 onmouseover="javascript:GetAreaInfo(event, 'Tyre');"
onmouseout="javascript:HidePopup();" />
<area shape="rect" alt="" coords="140,175,205,190"
 onmouseover="javascript:GetAreaInfo(event, 'Beiteddine');"
onmouseout="javascript:HidePopup();" />
<area shape="rect" alt="" coords="200,85,245,100"
 onmouseover="javascript:GetAreaInfo(event, 'Bcharre');"
onmouseout="javascript:HidePopup();" />
<area shape="rect" alt="" coords="180,155,225,165"
 onmouseover="javascript:GetAreaInfo(event, 'Zahle');"
onmouseout="javascript:HidePopup();" />
<area shape="rect" alt="" coords="220,120,270,140"
 onmouseover="javascript:GetAreaInfo(event, 'Ballbak');"
onmouseout="javascript:HidePopup();" />
</map>
<img src="images/lebanon.gif" border="0" alt="" usemap="#ImageMap" />

What we have done in the above HTML tags is added a new image with several hot spots representing the major cities in Lebanon. If you notice, each hot spot has a onmouseover and onmouseout JavaScript functions calls. We will discuss these functions in a later section in this article. For the time being just note that each hot spot will fire some JavaScript functions whenever you place your mouse over the area or when you remove your mouse.

« (Page 1)

View Entire Article

(Page 3) »

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.