HIT()

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'.

E.g.:

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

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

Example-Array:

$pages=array('Heading1'=>array('Prefix'=>'./img/h1/','Suffix'=>'_tn.jpg'),
             'Heading2:Subpage'=>array('Prefix'=>'./img/h2/','Suffix'=>'_tn.gif'));

→ 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.
 $pages=array('Head1'=>array('Prefix'=>'./img/h1/',
                             'Suffix'=>'_tn.jpg',
                             'Template'=>'Hover'),
              'Head2:SubHeading'=>array('Prefix'=>'www.google.de',
                                        'Suffix'=>'',
                                        'Template'=>'Link'),
              'Head3:MailLink'=>array('Prefix'=>'info@cmsimplewiki.com',
                                      'Suffix'=>'',
                                      'Template'=>'Mailto'));

→ 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)

Example:

 $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'.

Demo

For a Demo, take a look on my Playground:

http://www.mv-web-design.de/playground/?HIT%28%29

Download

addons/hit.txt · Last modified: 2018/04/05 14:48 (external edit)
Webdesign: NMuD chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0