Question

I’m building a chart populated from the database. Now, I wanted to click each point to drill down some information to users. I don’t know how to integrate image mapping to each element of the chart dynamically created on the fly. Can you please provide as sample codes, links or articles regarding this subject. Thanks and more power to SO.

Answer 1

Client-side image maps are basically set areas overlayed on an image configured to be click-able links. The links can either be javascript or point to other pages. The area shape options are rectangle (rect), circle (circle), and polygon (poly), and you can set the area dimensions and locations relative to spots on the image. The link above shows examples. When you build the image map from server side script, you’d have full control over the areas (perhaps an entire bar) and their associated links (perhaps leading to a query script with the ID number of the label attached).

Basically, you have to build the chart twice in your scripts: 1st script building and serving the image, 2nd script (the main html view) building a matching map with set of coordinates to fit over the image.

You might also be interested in Server-side image maps. When you set an IMG element property of ismap and wrap the image element in a clickable hyperlink, it allows it so the user can click anywhere on the image, and the coordinates of where they clicked (x,y) will be automatically sent as extra GET parameters along with the hyperlink. On the server side script, look for the $_GET key that looks like coordinates (IE the keyname will be “355,71” if the client clicked on x355, y71 on the image). You’d then translate these numbers to areas on the dynamic chart.