Clickable Maps of Ireland Its ready!!……3 in one pack with photoshop editable images and ready to go images. Counties, regions and Provinces
Clickable maps for websites and blogs are notoriously time consuming to make. Not only do you need to spend time and care creating your map image. Tracing the correct state and county borders is a drag in itself and then you have to plot your image map coordinates which can take hours or days depending which software you use. If you plan to use MapHilight JQuery Plugin by David Lynch… that too could take you weeks in your precious spare time just to have a cool clickable map with a great hover effect.
At least there is help here for the humble webmaster or the busy professional web designer. Ready made clickable maps AND editable Adobe Photoshop map images are here to save you precious time.
Briefly, I have created a simple video tutorial showing one way how I go about making a clickable map ….in this instance a map of the USA for a blog page 600px width. Even my video tutorial is almost 25 minutes long! as I describe the process from making an original map of the United States, tracing the borders, plotting the coordinates and adding the result to a blog page.
The source of the USA map is wikipedia and I use Corel Photo Shop Pro v10 to make the image. Any good graphic software will do using the standard tools, brush, pen, and bucket. When the image is complete I import to MapEdit a great software for plotting lots of coordinates, basically its the best little peice of software for creating image maps. That’s all the software you need as MapEdit creates a html file and all you do is cut and paste the code from there to your webpage or blog.
Here are the links to the video tutorials I have submitted to YouTube:
How useful is a clickable map?..why would you want a clickable map of your country on your blog?
For a start, its great to separate your region specific information, your writings your products you have for sale??…I dont know…there are endless possibilities. So you will need to create a post for every clickable region, and for the United States that’s 50 posts, I don’t think there’s an easier way to do it but write them one by one. Think of the pages Google will love and the specific Google Adsense Ads that could earn you more revenue.
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.
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
…also at this more spohisticated 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/uk/uk_ireland.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:
<?php include ('js/uk/uk_ireland.php');?>
and save your page.
You will find the only browser issue is in IE8 as the MapHilight JQuery Plugin hasn’t been updated to accomodate IE8 yet.
So if you want full browser capability, don’t use my JQuery maps but use them as default clickablemaps with the WZ toolTip
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.
I just wanted to give a HUGE thank you to Gordon for his work on the clickable maps tutorial video on his site. I watched all of his videos multiple times and learned how to create the clickable maps through his basic tutorials. I have had to create some clickable maps for my own website and there is absolutely no way on earth it would have been accomplished without his examples.
I even contact Gordon via email and we were corresponding back and forth in almost real time. I was amazed how fast he was able to respond to my inquiry on his site. You can see my handy work on a clickable map of the entire state of Florida broken down my county at http://www.fivestarsmortgage.com/florida-counties. I am still learning and hope to be able to create even more beautiful clickable maps in the future for myself and my clients. I owe it all to Gordon for my new obsession!
