Page History

...

A clickable map is an image on a html page containing 'hot spots' where the cursor change from the normal 'arrow' to a 'pointing finger' during a mouse-over event. These hot spots can contain hyperlinks to other pages.

Image Removed

When adding the string "usemap="{5}" to the mapFormat (see above) the outcome in the html page will be (printed in bold).

The part describing the hot spots for this map are defined in the \[map\] tag. In this example below, three areas are 'clickable'. Every hot spots links to another html page in the set of reports.

<div style="TOP:{1, number, #}px; 
LEFT:{0, number, #}px;
position:absolute;Z-index:0">
<img border="0" src="{4}" 
width="{2,number,#}" height="{3, number, #}" 
usemap="{5}">
</div>

When adding the string "usemap="{5}" to the mapFormat (see above) the outcome in the html page will be (printed in bold).

The part describing the hot spots for this map are defined in the \[map\] tag. In this example below, three areas are 'clickable'. Every hot spots links to another html page in the set of reports.

<img border="0" src="northeast.png" width="503" height="595" *usemap="#clickmap"*>

<!-- Here the clickable map starts: SHOULD BE IN THE TEMPLATE -->
<map name="clickmap">
<area alt="Northumbria Area" href="northumbria/area_status.html" shape="polygon" coords="138, ...,...,34

<img border="0" src="northeast.png" width="503" height="595" *usemap="#clickmap"*>

<!-- Here the clickable map starts: SHOULD BE IN THE TEMPLATE -->
<map name="clickmap">
<area alt="Northumbria Area" href="northumbria/area_status.html" shape="polygon" coords="138, ...,...,34">
<area alt="Dales Area" href="dales/area_status.html" shape="polygon" coords="266, ..., ..., 285">
<area alt="RidingsDales Area" href="ridings/area_status.html" shape="polygon" coords="359, ..., ..., 379">
</map>

To avoid hot spots on a map, do not include the "usemap="{5}" in the mapFormat.

Hyperlinks

Hyperlinks can be added to the overlayFormat. By using the following option, hyperlinks to individual reports will be added automatically. They will have a fixed (non-configurable) name, "forecastlocation.html" and assuming it is located in a directory with the same name as the locationId compared to where this report with the map is located in the directory structure.

...

dales/area_status.html" shape="polygon" coords="266, ..., ..., 285">
<area alt="Ridings Area" href="ridings/area_status.html" shape="polygon" coords="359, ..., ..., 379">
</map>

To avoid hot spots on a map, do not include the "usemap="{5}" in the mapFormat.

Hyperlinks

Hyperlinks can be added to the overlayFormat. By using the following option, hyperlinks to individual reports will be added automatically. They will have a fixed (non-configurable) name, "forecastlocation.html" and assuming it is located in a directory with the same name as the locationId compared to where this report with the map is located in the directory structure.

<div style="TOP:{1,number,#}px;
LEFT:{0,number,#}px;
position:absolute;Z-index:1">
<a href="{5}">
<img border="0" src="{2}" title="{4}: {3}">
</a>
</div>\n

When adding href="{5}" to the overlayFormat (at that location) a hyperlink is being added to the icon placed on the map. In html it will look like this.

<!-- map -->

...

<div style="TOP:160px;LEFT:5px;position:absolute;Z-index:0">

...

<img border="0" src="derwent.png" width="503" height="578" usemap="#clickmap">

...

</div\>

...

<!-- icons -->

...

<div style="TOP:467px;LEFT:427px;position:absolute;Z-index:1">

...

<a href="BOYNTN1/forecastlocation.html"><img border="0" src="fluvial_site_data.gif"

...

title="Boyntn1: No threshold exceeded"></a>

...

</div>

...

Report section

A summary can be added to a report configuration as shown below.

...