Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Create Image Maps for Joomla! 
Thomas Klinkert 
cool-map.com 
November 4, 2014 
Thomas Klinkert (Cool Map) Create Image Ma...
What is Joomla!? 
see www.joomla.org 
Open Source Content Management System. 
More than 30 million downloads. 
Thousands o...
Joomla! 
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...
Example 1 
Click on the dierences in the right image 
Figure: Find the dierences 
Thomas Klinkert (Cool Map) Create Image ...
Example 2 
A clickable map 
Figure: Map of Germany 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2...
Example 2 
A clickable map 
Figure: Map of Germany 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2...
Example 3 
Tag people 
Figure: Tag images 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 8 / 2...
Example 4 
Custom Input Field 
Figure: Custom Input Field 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! Novemb...
What is Cool Map? 
see www.cool-map.com 
An extension for Joomla! 
Cool Map let you create Image Maps for Joomla! 
You can...
Cool Map 
Cool-Map.com 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 11 / 26
Cool Map 
Download Cool Map 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 12 / 26
Cool Map 
Install Cool Map 
Figure: Install Cool Map on your Joomla! site. 
Thomas Klinkert (Cool Map) Create Image Maps f...
Cool Map 
Activate Cool Map Plugin and Module 
Figure: Activate Cool Map Plugin and Module under Extensions Plugin and 
Mo...
Cool Map 
Open Cool Map 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 15 / 26
Cool Map 
Cool Map Overview 
Figure: Cool Map Overview 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November ...
Cool Map 
Import Cool Map 
Figure: Import an Image Map from any Source. 
Thomas Klinkert (Cool Map) Create Image Maps for ...
Cool Map 
Create new Cool Map 
Figure: Create an Image Map. 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! Nove...
Cool Map 
Create new Cool Map 
Figure: Choose Image Path, Name and Title and click Save. 
Thomas Klinkert (Cool Map) Creat...
Cool Map 
Dene Areas 
Figure: Dene Areas and click 'Add Area'. 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! N...
Cool Map 
Export Image Map 
Figure: Click Export to get a HTML-File with your image map. 
Thomas Klinkert (Cool Map) Creat...
Cool Map 
Cut Map Code 
Figure: Select the Cool Map code and type Ctrl+C (Copy) 
Thomas Klinkert (Cool Map) Create Image M...
Cool Map 
Paste Map Code 
Figure: Paste your Code in an article. 
Thomas Klinkert (Cool Map) Create Image Maps for Joomla!...
Cool Map 
Create the menu structure 
Figure: Make your article accessible and you are done. 
Thomas Klinkert (Cool Map) Cr...
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 (...
Upcoming SlideShare
Loading in …5
×

Create Image Maps for Joomla!

3,525 views

Published on

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

Published in: Internet
  • Be the first to like this

Create Image Maps for Joomla!

  1. 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. 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. 3. Joomla! www.joomla.org Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 3 / 26
  4. 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. 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. 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. 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. 8. Example 3 Tag people Figure: Tag images Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 8 / 26
  9. 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. 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. 11. Cool Map Cool-Map.com Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 11 / 26
  12. 12. Cool Map Download Cool Map Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 12 / 26
  13. 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. 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. 15. Cool Map Open Cool Map Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 15 / 26
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. Cool Map Thank You! Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 25 / 26
  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

×