skypluto / 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

jquery.hotspot.js's Issues

Not really working when rezising screen

Hello,
I think, it does not work.
The picture is not proportionally resized and the hotsports are in different position.
The demo is not working as well

Unusable - sorry!

Frank

z-index issue

I can't seem to get z-index to work reliably - my hotspot panel is behind a left side nav panel. I tried setting z-index:9999 as per code below but it doesnt resolve it. In attached image you can see the hotspot (blue panel) behind the left side blue nav ...

#hotspotImg .hot-spot .tooltip {
  font-family: Arial;
  background-color: rgba(78, 115,223, 0.85);/* rgba(58, 95, 150, 0.7); */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  display: none;
  font-size: 14px;
  opacity: 1.0;
  left: 0px;
  padding: 15px 5px;
  position: absolute;
  text-align: left;
  top: -70px; /*30px*/
  width: 280px;
  z-index: 9999 !important;
}