“HTMLMap” for Joomla!1.5Version 1.0.5

User guide

Copyright © Christophe Demko 2009contact@chdemko.com

http://joomlacode.org/gf/project/htmlmap/

User Guide English translation by Christophe Demko and Stephen Jones

Table of contentsI.Introduction........................................................................................................................................1II.Installation........................................................................................................................................2III.Using HTMLMap............................................................................................................................3

III.1.Image map creation with HTMLMap......................................................................................3III.2.Adding Links to your Image Map............................................................................................5III.3.Component parameters............................................................................................................8III.4.Adding the Image Map to your Menu.....................................................................................9III.5.Implementing the rollover effect...........................................................................................11III.6.Hide all modules....................................................................................................................13III.7.An image map on the home page...........................................................................................14

IV.Making the Image Map appear in a module..................................................................................16V.Plugin use: adding your Image Map to an article...........................................................................18

© Christophe Demko Introduction

I. IntroductionThe “HTMLMap” component allows administrators of a Joomla site to create their own image maps. An image map is composed of an image and a set of coordinates that define active areas which link to various destinations, either internal or external to a site. The module can display a (clickable) image map in a module and the plugin allows you to embed image maps in the content of articles.

- page 1 -

© Christophe Demko Installation

II. InstallationThe installation process requires the administrator to install

1. The component,

2. the module and

3. The plugin.

All 3 are installed using the usual method via the administrator interface of Joomla (e.g. Joomla 1.5 - Extension Manager>Install).

Through the installation process a folder is automatically created in images/htmlmaps. Please note the images used by this component must be stored in this folder. Two tables are also created: one #__htmlmap is used to store image maps, the other #__htmlmap_links is used to store links to image maps.

- page 2 -

© Christophe Demko Using HTMLMap

III. Using HTMLMap

III.1. Image map creation with HTMLMap

The first step to create an image map is to upload the image you wish to use as the image map.

This image must be uploaded to the images/htmlmaps folder using the “Media manager” (Site>Media Manager>Images>HTMLMaps and then browse for the image you wish to upload).

Please Note: if you require an image/rollover effect on the hotspots (links) of your image map, whilst in Media Manager, create a folder within ‘images/htmlmaps’ and then add another image inside of the newly created folder. (if you require more detail on the rollover effect please see item).

The second step is to use the administrator interface to access the “HTMLMap” component. An image map is created by pressing the “New” button from the administrator interface.

- page 3 -

© Christophe Demko Image map creation with HTMLMap

The fields are:

• The type of title to use (either using your own text title or using the existing title of the image)

• The title text version of the image map (if you use your own text title this is the field where you write this).

• Selecting the image to use as your image map (if you have uploaded your images via Media Manager they will appear, otherwise there will be no images to choose from).

• (Optional) If you require an image rollover effect on a hotspot/link and have followed the instructions (in V1 above) you will be able to select the folder that contains your “rollover” image.

Once you have saved your Image Map (or clicked ‘Apply’, if you do not wish to leave the Edit mode) you will be able to apply the Links and their co-ordinates.

- page 4 -

© Christophe Demko Image map creation with HTMLMap

Links to the image map will be available when the map has been saved. A click on the”Apply” button brings up the “Links” button

III.2.Adding Links to your Image Map

Either..

• In the Main View (Components>HTML Map) click directly on the links icon (to the right of the map’s title) or highlight the map (with a tick) and click on Links button in the top left

- page 5 -

© Christophe Demko Adding Links to your Image Map

menu.

Or..

• In the Edit Mode (Components>HTML Map> Open your chosen map) click on the “Links” button in the top left menu (as mentioned above this only appears once you have saved your image map or clicked Apply).

Once you have clicked “Links” and you are now in the Links Editing Mode, and you are ready to add your first hotspot/link to your Image Map.

Click ‘New’ in the top left menu.

- page 6 -

© Christophe Demko Adding Links to your Image Map

The fields are:

• The menu item associated with the link (the destination of your hyperlink).

• The title type used (the 3 choices are 1. A specific text title of your choosing, 2. The title of the rollover image 3. The title taken from the menu item/destination)

• The title text version (if you use title type this is the field you use)

• The link description

• The presence of a tooltip on the map

• The shape of the link

• The coordinates of the link

• (optional) The image used for your rollover effect (if you do not want an image rollover effect or have not specified a folder or an image this will not be an option.

Depending on your choice of Rectangle, Circle or Polygon you will need to add the relevant coordinates...

• X,Y,R in the case of a circular shape e.g. 20,20,10 (equates to 20 pixels from the left, 20 pixels from the top and a radius of 10 pixel).

• X0,Y0,X1,Y1 in the case of a rectangular shape

• X0,Y0,X1,Y1,...,Xn,Yn in the case of a polygonal shape

- page 7 -

© Christophe Demko Adding Links to your Image Map

III.3.Component parameters

The global parameters of the component can be adjusted by selecting the “Parameters” button from the main view of the component.

The parameter enables you to state whether or not the Image Map is set up within a div and whether that div is set to a left, right or center position.

- page 8 -

© Christophe Demko Adding the Image Map to your Menu

III.4.Adding the Image Map to your Menu

1. Go to the menu you want to add the image map to e.g. Menus>Main Menu

2. Click “New” in top left

3. Click HTMLMap> Image map/ Image map layout

4. In addition to the usual fields such as Title, Alias, Parent item

The specific parameters to choose are:

• “Parameters (Basic)”: Choose your image map and the option to hide/show modules

• “Parameters Advanced” Option to hide/display the title of the map

- page 9 -

© Christophe Demko Adding the Image Map to your Menu

• “Parameters (Component)” Option to include the image map in a division.

(On the frontend of the site) The link to the image map will appear in the menu and clicking on this will display the image map.

Rolling over the hotspot on the image map will display tooltips if they have been enabled, additionally if the rollover image will display if this has been uploaded and enabled.

Clicking on the hotspot will display the menu item that the hotspot has been linked to.

- page 10 -

© Christophe Demko Adding the Image Map to your Menu

III.5. Implementing the rollover effect.

A rollover effect can be implemented on the hotspots links of your Image Map.

The first step is to create a directory in the images/htmlmaps folder using the “Media Manager”. Then upload the image files that will be used for the rollover effect.

The second step, in Edit Mode (Component>HTMLMap> and click on the image Map), is to “Select a Folder” in order to choose the folder that the rollover images are in.

- page 11 -

© Christophe Demko Implementing the rollover effect.

The third step, within the Links Edit Mode, assign an image to the link by clicking on “Select an Image”.

(In the frontend of the site) When rolling over the hotspot of the Image Map the original image will be swapped for rollover image.

- page 12 -

© Christophe Demko Implementing the rollover effect.

III.6.Hide all modules

The component can display an image map without any modules. Simply choose “Hide all modules” when editing a menu item.

(In the frontend of the site) Clicking on the menu item will display the Image Map without any modules of the site visible.

- page 13 -

© Christophe Demko Hide all modules

III.7.An image map on the home page

To get the Image Map on the home page, in the Menu Item manager, highlight the map menu item and click “default”

Now the homepage of the site will consist solely of the Image Map.

- page 14 -

© Christophe Demko An image map on the home page

- page 15 -

© Christophe Demko Module creation

IV.Making the Image Map appear in a moduleWith “HTMLMap” an image map can be positioned within a module

After creating your image map, and enabling the image map module (Extensions>Module Manager>HTMLmap module) the only two parameters to be set within here are:

• Choosing your Image Map

• Including (or not) the Image Map within a div.

The display of the selected image map takes place in the module.

- page 16 -

© Christophe Demko Module creation

- page 17 -

© Christophe Demko Plugin use: adding your Image Map to an article

V. Plugin use: adding your Image Map to an article(To add your Image Map to an article).

Please note the HTMLMap plugin should be activated (Extensions>Plugin manager>Content-HTMLMap)

Then in the content of an article, simply place the following code

{htmlmap number position}

where:

• number is the ID of the image map

• position is the image alignment that will be applied. It must be chosen from among the following values: left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

- page 18 -

© Christophe Demko Plugin use: adding your Image Map to an article

(In the front end) the article will now display the image map.

- page 19 -