Locator Maps » Version 4.0

ID #1025

17. How to display some data on the page when a user clicks a region?

Sometime you may want to display some info on the page rather than in the popup window. In the Locator Map you can do this. Here is a step-by-step:

1. Open the locator_map.xml in any text editor and find the region you want to associate with some text.

2. In the <link> tag put the following text:

javascript:displayText('id');

The id here is some name that will identify this particular region. For instance:

...
<state>
  <id>7</id>
  <name>Michigan</name>
  <link>javascript:displayText('michigan');</link>
  <comment></comment> 
  <color_map>0x7798BA</color_map>
  <color_map_over>0x0054A6</color_map_over>
  <frame></frame>
  <image></image>
</state>
...

3. In the page where the map is displayed add the following script to the source HTML file after the <HEAD> tag:

<script type="text/javascript">
function displayText(div_name)
{
document.getElementById('main_text').innerHTML=document.getElementById(div_name).innerHTML;
}
</script>

Basically, this script finds the "main_text" DIV block and replaces its contents with contents of the given DIV identified by the div_name variable, in our case it is 'michigan'. Obviously, you should place those DIVs somewhere in the source of the HTML file, for example:

...
<DIV id=main_text>This text will be replaced when you select a region on the map</DIV>
...
<DIV id=michigan style="DISPLAY: none">
Michigan dealer
Address: 
Phone:
Fax:
</DIV>
...

The same way you can assign a text for every region on the map. Make sure, though, you are using a unique id for each region and provide a DIV with the text for each region as well. You need only one main_text DIV, however.

Tags: -

Related entries:

Last update: 2012-03-14 12:30
Author: Fla-shop Team
Revision: 1.2

Digg it! Share on Facebook Print this record Send FAQ to a friend Show this as PDF file
Please rate this FAQ:

Average rating: 0 (0 Votes)

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry