JA Image Hotspot

Free Joomla 2.5 and Joomla 3 extensions

If you are new to Joomla, you can check our detail guide of how to install extensions in your Joomla site. This guide shows you not only how to install extensions but also how to set up the new installed extensions.

Documentation

Enable Module

  • Enable the module
  • Assign the module to a specific position
  • Assign the module to menu items

Global Configuration

Back-end settings

Front-end Appearance

Change static image

Browse image to replace current image. The added pointers will not be removed.

Add new pointer

To add new pointer, click on "Add New" button then add information for the pointer.

Front-end Appearance

JA Image Hotspot module support number of pointer types with different colors.

To add new pointer type, please follow the instructions.

Step 1: Add new icons

Copy your icons to modules/mod_jaimagehotspot/assets/images.

Icons with different colors are stored in modules/mod_jaimagehotspot/assets/images/colors folder.

Step 2: Define pointer type name

Open file: imgextrafields.xml in modules/mod_jaimagehotspot/assets/elements/jaimgextrafields.

<field  
name="ptype" 
type="list" 
label="JAI_POINT_TYPE" 
description="JAI_POINT_TYPE_DESC"> 
<option value="">Default</option> 
<option value="cloud">Cloud</option> 
<option value="star">Star</option> 
<option value="study">Study</option> 
<option value="truck">Truck</option> 
</field>

Step 3: add style for new pointer type in back-end

Open file: imgextrafields.css in modules/mod_jaimagehotspot/assets/elements/jaimgextrafields.

#jform_params_imgpath_preview_img .ja-marker-cloud { 
background: url("../../../assets/images/icon-marker-cloud.png"); 
} 

#jform_params_imgpath_preview_img .ja-marker-study { 
background: url("../../../assets/images/icon-marker-study.png"); 
} 

#jform_params_imgpath_preview_img .ja-marker-star { 
background: url("../../../assets/images/icon-marker-star.png"); 
} 

#jform_params_imgpath_preview_img .ja-marker-truck { 
background: url("../../../assets/images/icon-marker-truck.png"); 
}

Step 4: add style for new pointer type in front-page

Open file: style.css in modules/mod_jaimagehotspot/assets/css.

.jai-map-container .ja-marker-default { 
background: url("../images/icon-marker-default.png"); 
} 

.jai-map-container .ja-marker-cloud { 
background: url("../images/icon-marker-cloud.png"); 
} 

.jai-map-container .ja-marker-drop_study { 
background: url("../images/icon-marker-study.png"); 
} 

.jai-map-container .ja-marker-star { 
background: url("../images/icon-marker-star.png"); 
} 

.jai-map-container .ja-marker-truck { 
background: url("../images/icon-marker-truck.png"); 
}