Create Image Maps for Joomla!

Thomas Klinkert

cool-map.com

November 4, 2014

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 1 / 26

What is Joomla!?

see www.joomla.org

Open Source Content Management System.

More than 30 million downloads.

Thousands of downloadable designs, themes.

Thousands of downloadable extensions, both paid and free.

visit extensions.joomla.org.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 2 / 26

Joomla!www.joomla.org

Figure: www.joomla.org

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 3 / 26

What are Image Maps?

See HTML Map and Area Tag

example: <img src='anImage.jpg' usemap='#my_map'>the map: <map name='my_map'>the area: <area shape='circle' coords='23,2,5' href='example.html'>end tag: </map>

Images with clickable areas

Areas connected with Javascript events like onmouseover, onclick,onmouseout, onreload etc.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 4 / 26

Example 1Click on the di�erences in the right image

Figure: Find the di�erences

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 5 / 26

Example 2A clickable map

Figure: Map of Germany

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 6 / 26

Example 2A clickable map

Figure: Map of Germany

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 7 / 26

Example 3Tag people

Figure: Tag images

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 8 / 26

Example 4Custom Input Field

Figure: Custom Input Field

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 9 / 26

What is Cool Map?

see www.cool-map.com

An extension for Joomla!

Cool Map let you create Image Maps for Joomla!

You can export and import Image Maps from any source of theinternet.

Cool Map Image Maps are full responsive, mobile ready.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 10 / 26

Cool MapCool-Map.com

Figure: cool-map.com

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 11 / 26

Cool MapDownload Cool Map

Figure: Download: cool-map.com

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 12 / 26

Cool MapInstall Cool Map

Figure: Install Cool Map on your Joomla! site.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 13 / 26

Cool MapActivate Cool Map Plugin and Module

Figure: Activate Cool Map Plugin and Module under Extensions Plugin andModule Manager.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 14 / 26

Cool MapOpen Cool Map

Figure: Open Cool Map under Components - Cool Map.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 15 / 26

Cool MapCool Map Overview

Figure: Cool Map OverviewThomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 16 / 26

Cool MapImport Cool Map

Figure: Import an Image Map from any Source.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 17 / 26

Cool MapCreate new Cool Map

Figure: Create an Image Map.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 18 / 26

Cool MapCreate new Cool Map

Figure: Choose Image Path, Name and Title and click Save.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 19 / 26

Cool MapDe�ne Areas

Figure: De�ne Areas and click 'Add Area'.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 20 / 26

Cool MapExport Image Map

Figure: Click Export to get a HTML-File with your image map.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 21 / 26

Cool MapCut Map Code

Figure: Select the Cool Map code and type Ctrl+C (Copy)

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 22 / 26

Cool MapPaste Map Code

Figure: Paste your Code in an article.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 23 / 26

Cool MapCreate the menu structure

Figure: Make your article accessible and you are done.

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 24 / 26

Cool Map

Thank You!

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 25 / 26

Cool Map

Author: Thomas Klinkert

Email: info@cool-map.com

Web: http://www.cool-map.com

cool-map.com

Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 26 / 26