Question

Let me preface this question with the fact that I am new to ASP.NET and web application development so there are many aspects and nuances I don’t fully understand. Please forgive me if this is a relatively simple question.

I’ve been tasked with creating some hotspots for a skeleton where the user will click the hands or feet, the image will zoom in (rather load a zoomed in image of a) skeleton hand or ankle. From there the user can click on the joints and a list is built based on what joints have been selected.

I’ve been playing around with ASP ImageMap and it seems to be ok, but I can’t get the hotspots to highlight (a common problem it seems). Also, I have to point it to another page, but what I really want is to “zoom in” (again, loading up another image) and then be able click on parts of the image and build a list (very similar to how WebMD System Checker works, but not that fancy).

I feel like I’m taking the wrong approach with ImageMap and there are better means of achieving my goal. What are some suggested techniques I can use to do this?

I appreciate any help thrown my way.

Answer 1

Using an image map is a legitimate approach, but that is only the beginning of the solution. This is really a javascript question. The functionality you’re looking can’t be done just with asp.net on the server, because you need to interact with the client and their actions against your image.

If you’re using jquery, you can use my plugin imagemapster to help with the highlighting of the images.

To make this work you need to do the following:

1) Set up an image map for your main image. There are a number of web sites out there that you can use to create the map data for the hotspots.
2) Capture click events on the client with javascript, and load the new “zoomed” image
3) For the “zoomed” images, you’ll have to do much the same thing as your main image – capture click events, and then do something based on the areas’s they’re clicking (build a list).

This is entirely doable, but it’s not trivial, because you’ve got a lot of moving parts. I’d definitely recommend using jQuery as a framework to help you with the client coding. But if you’re pretty green there’s going to be a learning curve to putting all this together. Take it one step at a time. First get the main image map set up with hotspots. Write some code that can capture the click events and know which area’s been clicked. Learn how to swap an image from the client with javascript/jquery. Then start to put it all together.