Tutorial: Make an OmniGraffle Imagemap
About OmniGraffle
OmniGraffle is the premier diagramming software for Macs. It has the ability to make HTML imagemaps. BoxPress is designed to use these maps. This section assumes familiarity with OmniGraffle terminology and use.
- In Tinderbox, make a container. Put aliases of every note that your imagemap refers to inside of it. This will be your Imagemap Exporter—that is, your imagmap will export at the position of this note. Unlike Tinderbox imagemaps, OmniGraffle imagemaps cannot use a separate Mapmaker off to the side. This means that every OmniGraffle imagemap must be its own (original) note with its own collection of aliases.
- In OmniGraffle, make a diagram of some sort. Nearly any object in the diagram (including lines) can be a “clickable area” that will link to one of the notes in your Imagemap Exporter.
- For best appearance, use the Canvas Inspector to manually set a canvas size. Otherwise, the export will contain lots of surrounding whitespace.
- To make an object clickable, select it and open the Properties Inspector. Then select Action > Opens a URL. In the box, type in the filename (not the full path) of the exported Tinderbox note you want to view.
- If you have already exported your TBX, you can look to the Finder to find this name, which will usually be the note name minus spaces and punctuation, plus .html.
- You can also find the name inside of Tinderbox. It’s the text after the final slash in the
$HTMLExportPath
attribute. For example, if the$HTMLExportPath
is /index/Pages/Mapmuseum/LinkGraffleGalentoMesmer/RobertFludd.html, then in the Action > Opens a URL box I would type RobertFludd.html. To make batch naming your OmniGraffle Actions, make a column (View > Use Columns) in your Tinderbox Outline View that lists this attribute .
- Once all your clickable areas have been loaded with their URL-opening actions, it’s time to export. Go to File > Export. Set your Format to HTML imagemap and Export Area to Entire Document. Leave everything else as-is (Scale at 100%, Bitmap Resolution at 150 DPI, and Image Type at PNG).
- Export your folder to the IMAGEMAPS folder, which is inside the img folder of your export folder. Each canvas will export as two files—a PNG and an html file—each with the same filename but different extensions. (Make sure you have set Local IMAGEMAPS Path in the Directories Dash.)
- Go to your Imagemap Exporter and enter the exported folder plus the canvas (minus extension) you want to use in the
$blogMapGraffle
key attribute. If I exported my OmniGraffle file as PSYCHO and I want to use the Mesmer canvas, then I would enter PSYCHO/Mesmer. - An OmniGraffle Imagemap can be either a LinkMap or a FillMap. A LinkMap loads the clicked note’s webpage. a FillMap inserts the body text of the clicked note into a frame. Your Imagemap Exporter is already a LinkMap by default. To make it a FillMap, set its prototype to fillmap_note.
- Select your Imagemap Exporter, click Preview in your Text Pane Selector, and behold!
Orange alert!
The OmniGraffle Imagemap you export cannot be alias because it needs to have children inside of it. For every clickable area on its map there must be a child. So if you want an OmniGraffle Imagemap to appear in multiple places on your website, you will need to use Copy and Paste, not Duplicate (since this does not duplicate children).
Here is the result:
OmniGraffle LinkMap.