|
Clickable maps (clickmaps) allow browser users to click on a region in a graphic, which acts as a hyperlink to a new web page. Ploticus 2.03+ can generate either server-side or client-side map files to accompany images (PNG, JPEG, or GIF); version 2.04+ supports clickable mapping in SVG. For images, map info is written to a separate file. For SVG, the mapping information is added to the .svg / .svgz output file (so the server-side vs. client-side distinction discussed below is moot).
You can map
pie slice labels
,
bars
,
scatterplot points
,
annotations
,
legend entries
, and
the plotting area
(either as a grid, or in its entirety).
ExamplesA number of live examples are provided below.Server-side maps vs. client-side mapsThere are two distinct types of clickmaps that can accompany PNG, GIF, or JPEG images: server-side maps and client-side maps . The two types are similar but have different syntaxes and are tied to an HTML web page slightly differently. Server-side maps have been around longer, but may need to be specifically enabled in your web server by the administrator. Client-side maps are more efficient, but are not supported by earlier browser versions, and may need to be embedded in the HTML of the web page loading the graphic.Linking to your web pageIn your web pages, you can use the following HTML construct to associate a server-side map file with an image: <a href="mypic.map"> <img src="mypic.png" ismap > </a> Here's an HTML example that uses an embedded client-side map for an image: <img src="mypic.png" usemap="#map1"> <map name="map1"> ... the map content that ploticus generates will go here ... </map>
Note: When ploticus generates a client-side map, it leaves off the opening <map>
and closing </map> tags. These tags will need to be added by the user.
For SVG, no special action is necessary; use the
normal construct.
Generating map filesTo generate a server-side map, use the -map option. To generate a client-side map, use the -csmap option. For SVG, use either option. A generated map file will have the same name as the accompanying graphic result file, except that a .map suffix will be used. If neither -map or -csmap are specified, then no map will be generated. Usage examples:
You will
need to supply URL information (discussed below) in your script or
prefab
for hyperlink purposes.
TroubleshootingIf the -debug command line option is used the mapped regions will be displayed in bright green. If -debug is used in X11 mode, the regions are displayed but no map file is generated.
Note that if two generated mapped regions overlap, they are stacked in the order generated
(the last generated is on "top").
Specifying URLsUsually the programmer supplies URL template(s) or URLs within the script file (eg. for pie graphs this is done within proc pie ; for the plotting area it is done within proc areadef ).For pie graphs, bar graphs, and scatterplots:
For annotations:
For legend entries:
For the plotting area to be a single region:
For grid regions within the plotting area:
To set a default URL for the entire image:
Notes: Embedded spaces and newlines that turn up within URLs will be converted to underscores.
Grid mapping may not be used with more than one plotting area per image.
ExamplesMost of the following examples have been run with -debug to add the green overlay showing where clickable regions are. Try clicking on these images.. they are mapped to a live CGI program that will echo the passed parameters.clickmap_pie ![]() Click on pie slice labels. clickmap_annot ![]() Click on annotations. clickmap_leg ![]() Click on legend entries. clickmap_area2 ![]() Mapped plotting area grid. Numeric in X and Y. Click on plotting area. To try the SVG equivalent click here. clickmap_area3 ![]() Same as above, but with finer granularity. This is done by executing an invisible X axis and an invisible Y axis for the clickmap (in addition to the visible axes) using the automatically determined stub increment, divided by 4. snpmap1 ![]() Mapped plotting area grid. Numeric in X; categories in Y. Note that the mapped grid (Y) is influenced by stubslide. colorgrid ![]() Data points are mapped. Click on any data point. clickmap_area ![]() Mapped plotting area grid. Months in X, numeric in Y. Note that month format is controlled using proc axis clickmapvalformat. clickmap_log ![]() Mapped plotting area grid in Y. Log example. Click on plotting area. clickmap_time2 ![]() Mapped timeline bars. clickmap_mouse ![]() Mapped plotting area grid. Categories in X. Note that the X stubs are (mostly) included in the mapped regions. This is done using the proc xaxis clickmapextent attribute. clickmap_hit ![]() Mapped plotting area grid. Datetimes in X. The datetimes are mapped in 6 hour increments, even though stubs appear every 24 hours. This is done by executing an invisible X axis for the clickmap, using 6 hour increments. |
![]() data display engine Copyright Steve Grubb ![]() |