This week I have worked on a job for a client creating a set of web pages which are maps of links for different topic areas. The maps are now on the web and visible to his global group of collaborators. Unfortunately he does want me to share the maps publically but I thought I would remind you (as I did for myself when doing this) or inform you for the first time about customising the clickable image map web export. The process below is not complete and assumes some knowledge of the MindManager web exports and HTML.
- Structure: An index map with links to child maps.
- Copy the Clickable Image Map web export template folder and give it a new relevant name.
- Create the child maps first.
- Drag and drop the favicon next to the URL of the required web page, from your browser to the map. This will create a topic with the link, the title text of the web page and the favicon
- When you have all the required links, arrange and format the map to suit the purpose. You can save this as a Style to use with the next child.
- Save the child map in map folder for this project.
- Create a sub-folder where all the web exports will be saved.
- Export the map using the NEW clickable image map web export. Enter the folder path for the above folder and use a unique name (e.g. the topic name without no spaces) for the Root Export File Name for each map.
- Repeat this for all the child/topic maps. Save them all to the same folder.
Create the Parent or Index map by dragging the *.html files of the Child maps to the Index map.- Note: I used floating topics and hid the hyperlink icon.
- Format and arrange as required. Try and make this a compact map.
- Save to the same folder as the child maps.
- Export the Index map using the clickable image export to the same folder as the other web exports.
- If you open the index.html with your browser the links to the child web exports won’t work! Open the index.html with a text editor and search and replace “../” with nothing. Save. Reload index.html and it should work now.
- Edit the ImgmapPage.htm in your new template
- Add the opening <body> below the </head> tag (It had gone AWOL in mine. So you might want to do that in the original one as well)
- Open the index.html file. Copy the text from <!–START CLICKABLE IMAGEMAP–> to <!–END CLICKABLE IMAGEMAP–>.
- Paste this into the ImgmapPage.htm after <body>
- Save
Run all the child map web exports again and they will have an index map at the top.- Check that it works.
- Transfer all the contents of web export folder to a folder on your web server and it should work there as well.
The complete ImgmapPage.htm should have this structure:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=%WebExport.CharacterSet%”>
<title>%CustomParameter.PageTitle%</title>
</head>
<body>
<!–START CLICKABLE IMAGEMAP–>
html from index.html
<!–END CLICKABLE IMAGEMAP–>
<!– Command: Expand(“Imgmap.mmbas”) –>
</body>
</html>
Using more html you can:
- Add <div> tags with CSS style commands you can position the index map.
- Add some text to the header alongside the index map
- Add a footer.
. In the mean time here is a Mindjet Player version I upload during one of my presentations “
