create image maps for joomla!
TRANSCRIPT
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: [email protected]
Web: http://www.cool-map.com
cool-map.com
Thomas Klinkert (Cool Map) Create Image Maps for Joomla! November 4, 2014 26 / 26