HIT() originally was written to create for the CMSimple-Menu (toc()) CSS-Pop-Up’s, that will show for every menupoint a preview-image (thumbnail) for the page. That’s why this tools is named HIT() (→ Hoverimages In Toc()). HIT() can be downloaded in two versions, V.0.26 and V.0.27. The newer Version V.0.27 has more options but is more complicated.

Note: HIT() is not as easy to implement as e.g. xtoc() or advancedtoc().
To include HIT() you need basic knowledge in HTML, CSS and PHP!

HIT() is ~7kB Code, that have to be inserted in your template.htm of your active template. If you want to use CSS-Code, HIT() must be copied inbetween <HEAD> </HEAD>, but in any cases BEFORE toc() is called.

HIT() can do much more modifications than CSS-Pop-Up’s to toc(), and can be configured by following parameters:

HIT() V.0.26

  • $pages: array, including the headings, image-suffix and -prefixes you whish to change. All subpages of this heading will become pop-up’s. The images in each popup MUST be named: ‘Prefix’+’Heading_subpage’+’Suffix’.


      Prefix = './images/folder/pic_'
      Heading_subpage = 'Freestyle'
      Suffix = '/dokuphp/addons/hit/_thumb.jpg'

→ the images MUST be located in subfolder ./images/folder/ and MUST be named ‘pic_Freestyle_thumb.jpg’!!



→ Creates Pop-Up’s in Heading ‘Heading1’ and ‘Heading2:Subpage’ using different paths and different file-endings.

  • $exclude: array which lets you decide which heading will not be changed. Note as following: $exclude=array(’name1’,’name2’);
  • $lowercase: changes all subpage-headings to lowercase. Keep in mind that most server handle files case-sensitive, so check your images if letters are written un upper/lowercase! If all images are lowercase, change this parameter to TRUE!
  • $include_folders: if you want popups also added to folders (which include subpages) set this paramter to TRUE.
  • $include_subfolders: if you want all subheadings in a folder changed, set this paramter to TRUE.
  • $include_active page: if you want the active page also changed, set this paramter to TRUE.
  • $whitespace_to_underscore: Converts all whitespaces from the heading in undescores ( _ ). The most pictures are saved in this convention, but headings always are used with whitespaces. → ‘Test heading’ becomes something like ‘Test_heading.gif’

HIT() V.0.27

HIT() V.0.27 has the same options as V.0.26, but can handle something like a ‘Template’. This template is stored in an array called $template and is assigned to a heading in $pages-Array. Means, that $pages differs a bit from V.0.26.

  • $pages: array that holds all the information, which heading will be replaced by which template.
              'Head3:MailLink'=>array('Prefix'=>'[email protected]',

→ Creates Pop-Up’s in Heading ‘Head1’, ‘Head2:SubHeading’ and ‘Head3:MailLink’ using different paths and different Templates.

  • $template: array. Stores the data, which will replace the original heading. Some placeholders can be used to transfer CMSimle-Data to the replace-data.
  Placeholder: {{HEADING}} = Inserts the (original) name of this heading
               {{PREFIX}}  = Prefix, which is declared in $pages
               {{SUFFIX}}  = Suffix, which is declared in $pages
               {{URI}}     = CMSimple-URI of this page 
               {{FILENAME}}= Filename (Prefix+Heading+Suffix)


 $template=array('Hover'=>'<span class="hoverimg"><img src="{{FILENAME}}" alt="{{HEADING}}" title="{{HEADING}}"><br>{{HEADING}}</span>{{HEADING}}',
                 'Link'=>'</a><a target="_blank" href="http://{{PREFIX}}">{{HEADING}}',
                 'Mailto'=>'</a><a href="mailto://{{PREFIX}}">{{HEADING}}');

→ Declares three templates ‘Hover’, ‘Link’ and ‘Mailto’. The Links have to be declared in $pages→‘prefix’.


For a Demo, take a look on my Playground:



addons/hit.txt · Last modified: 2007/12/14 11:16 by