Create or import responsive Image Maps with Joomla!. Use them in Joomla! articles or create standalone HTML-Files with your image map. Visit http://www.cool-map.com

1. 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

2. 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

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

4. 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

5. Example 1
Click on the dierences in the right image
Figure: Find the dierences
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 5 / 26

6. Example 2
A clickable map
Figure: Map of Germany
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 6 / 26

7. Example 2
A clickable map
Figure: Map of Germany
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 7 / 26

8. Example 3
Tag people
Figure: Tag images
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 8 / 26

9. Example 4
Custom Input Field
Figure: Custom Input Field
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 9 / 26

10. 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 the
internet.
Cool Map Image Maps are full responsive, mobile ready.
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 10 / 26

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

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

13. Cool Map
Install Cool Map
Figure: Install Cool Map on your Joomla! site.
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 13 / 26

14. Cool Map
Activate Cool Map Plugin and Module
Figure: Activate Cool Map Plugin and Module under Extensions Plugin and
Module Manager.
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 14 / 26

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

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

17. Cool Map
Import Cool Map
Figure: Import an Image Map from any Source.
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 17 / 26

18. Cool Map
Create new Cool Map
Figure: Create an Image Map.
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 18 / 26

19. Cool Map
Create 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

20. Cool Map
Dene Areas
Figure: Dene Areas and click 'Add Area'.
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 20 / 26

21. Cool Map
Export 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

22. Cool Map
Cut 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

23. Cool Map
Paste Map Code
Figure: Paste your Code in an article.
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 23 / 26

24. Cool Map
Create 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

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

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