You always wondered how to create a navigation system with an image? Nothing could be easier; just use the image map property of html.
But, obviously, it gets a little bit trickier when you have to add several links to an image. Moreovre, people are nowadays using a lot of Content Management Systems (CMS) to help in developping websites. I personnaly use Joomla a lot, and this article will explain how to add an efficient Search Engine Friendly (SEF) Image Map navigation system for Joomla.
Creation of Image Map
In order to easily create image maps with Joomla, I installed a plugin for TinyMCE. You can find it on it’s google project’s page a version for :
In order to use it, just follow their instructions for installation, and, when you edit an image, click on the new button that has been created. It will open the imagemap plugin.
Creation of a menu system
In order to have a coherent navigation system with Joomla, I mean, to have a coherent SEF strategy, you have to create a unique link for each page. In order to have a unique link for your content, the only solution is to use Joomla’s menu system. If you need to create two links for the same item, use an “alias” for the second one, in order to prevent duplicate URLs.
You could have avoided this menu creation if you don’t care about Search Engine Optimization (SEO), but my recommandation would be to follow the following steps.
This trick (of always using Joomla’s menu system) will allow you to publish coherent and working breadcrumbs. You won’t have the famous menu vs category dilemma.
Creation of links from article to Joomla content
The creation of SEF links with google when the SEF option is activited is not always obvious. The first trick that came in mind is to use the research tool, or to copy a link from a menu. But these options fails if our navigation system is an image and not a menu. If you unpublish the menu, the link won’t appear. If you change an alias for a menu-item you will loose the link you put in your article.
The only solution is to put a link which is not SEF. So you could unable the SEF option, copy/paste a link and activate the SEF option again. But it’s quite annoying for a hundreds of links isn’t it? So, we will use a famous plugin for that. This plugin allow you to create a link to articles in your Joomla! site when you are creating content. This plugin is called LinkR.
To use it : after the installation, when editing your article, you’ll see a new button bellow your article (click for a demo).
IMPORTANT : In order to use the trick of “menu system”, when you create a link with LinkR, don’t select an artcile (by clicking on “Article”) , but instead, the menu item you created (by clicking on “Menu”), and which is linked to the article.
Make everything working smoothly
So, you have everything installed and tested? Right, let’s go for the creation process!
- First, create your page with the image which will be your navigation system. Make a link from the menu, in order for it to be accessible.
- Second, create your content, and for each page, a link from the menu. It could be an hidden menu, so your visitors will only see the navigation image (in my case I put everything on the main menu, but the template doesn’t show more than one sub-menu hierarchy). But, when you create your content, be careful and use the “child property”, to get SEF URLs like “_http://www.mysite.com/parent-menu/parent2/item_“.
- Third, come back to your article with the image, and create (temporary) text links to your content, by using LinkR, and pointing to the menu items, and not the article items. Copy the URL that has been created. It should look like : index.php?option=com_content&view=article&id=23&Itemid=30 and nothing else.
- Edit your image, create your links map, and for the link, use the URL you just copied from the (temporary) text links.
- Finally you can choose to keep the text links or to remove it. I choosed to keep them to help my visitors who can’t see images. And it’s a safety measure in the case your image won’t show up.
Enjoy
It’s done. You can check that your image maps to SEF Url, that the links are going to your articles (specified by the menu), and that, if you change the menu link alias, the URL of your article will change coherently.
Moreover you can use breadcrumbs 