huxfrank / jquery.hotspot.js

Jquery Hotspot Plugin

jquery.hotspot.js

jQuery Hotspot Plugin

Using the plugin is simple.

Installation

• Clone and include the plugin

Usage

• Default selector

mainselector: '#hotspotImg',
selector: '.hot-spot',
imageselector: '.img-responsive',
tooltipselector: '.tooltip',
bindselector: 'hover'

• Sample HTML ** Defining the x and y position which is the absolute position of the image in full size.

<div id="hotspotImg" class="responsive-hotspot-wrap row">
  <img class="img-responsive" src="img/banners/main.png">
	<div class="hot-spot" x="800" y="223">
		<div class="tooltip">
			<div class="col-sm-6">
				<img src="img/index/col1.png">
			</div>
			<div class="col-sm-6">
				<h4>Lorem Ipsum Title 1</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
			</div>
		</div>
	</div>
	<div class="hot-spot" x="1534" y="487">
		<div class="tooltip">
			<div class="col-sm-6">
				<img src="img/index/col2.png">
			</div>
			<div class="col-sm-6">
				<h4>Lorem Ipsum Title 2</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
			</div>		
		</div>		
	</div>
	<div class="hot-spot" x="361" y="408">
		<div class="tooltip">
			<div class="col-sm-6">
				<img src="img/index/col3.png">
			</div>
			<div class="col-sm-6">
				<h4>Lorem Ipsum Title 3</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
			</div>
		</div>		
	</div>	
</div>

• Triggering the hotspot

$('#hotspotImg').hotSpot(); // Use hover event on the hotspot

• Triggering the hotspot by overriding the hover event

$('#hotspotImg').hotSpot({bindselector: 'click'}); // Use click event on the hotspot