Joomla Help

How to add your clickable map into Joomla 1.5+

For some reason it’s not so easy just to add your image map code into your Joomla page using the default WYSIWYG TinyMice Editor.

Even when you think you can edit in ‘source’ mode the editor strips away the image map ‘area’ tags that are essential for a clickable map to work. Also some other editors other than TinyMice may behave differently.

The quickest and most efficient way around this problem is to find a plug in that can be installed into Joomla 1.5+ that will make it possible to use these tags safely.

I recommend installing the excellent DirectPhp Joomla Plugin at http://www.kksou.com/php-gtk2/Joomla/DirectPHP-plugin.php

By including the clickablemaps.com code inside a php file… DirectPhp will allow the script to run without error.

I will be updating all my downloads to include a special php file specifically to help Joomla users add the code to their pages.

You can see an example of this at my Joomla test site, Joomla1-6…also at this purchased template from RocketTheme ……….. here

How to add my clickable maps to your Joomla page

I have a 3 part – 5 minute install and there shouldn’t be too many problems. Sometimes there are css and javascript conflicts but there are always solutions in the end.

1. You will upload 1 js folder with js files and sub folder with specific files for the clickable map…..in the root folder.

2. You will edit the Joomla template file that contains the header information(between the <head></head> tags.

In this header (usually in the template index,php file) …you will reference the clickable maps js files like you do with any script files.

3. You install the PHPDirect plugin and add the ‘include code’ in the WYSIWYG editor for your page.

Directly….like this:

<?php include ('js/usa/usa.php'); ?>

or if you have problems (joomla editors add <pre></pre> and that may be styled with too much padding) add this code in HTML mode:

&lt;?php include ('js/usa/usa.php');?&gt;

and save your page.

Thanks to Andy R for help on Joomla install issues.

Full instructions are included in my downloads and of course DirectPhp has full support at it’s own website.

DISCLAIMER
Although I found this works fine for adding imagemap code in Joomla I cannot accept any responsibility if it affects your website or has conflicts with any other plugin. Please always backup your database and check thoroughly with the plugin documentation before you install any plugins in Joomla. Use at your own risk.