jQuery Plugin For Responsive Image Hotspot - hotSpot.js

hotSpot.js is a lightweight jQuery plugin which can be used to annotate images with custom, animated, responsive hotspots. Click or hover the hotspot you will see more information about the image annotation in a tooltip popup. The plugin also has the ability to re-position the image hotspots on init and resize events.

How to use it:

1. Add hotspots to the image following the markup structure as these:

<div id="hotspotImg" class="responsive-hotspot-wrap">

    <img src="image.jpg" class="img-responsive">

    <div class="hot-spot" x="300" y="43">
      <div class="circle"></div>
      <div class="tooltip">
        <div class="img-row">
            <img src="1.jpg">
        </div>
        <div class="text-row">
          <h4>Title 1</h4>
          <p>More Description</p>
        </div>
      </div>
    </div>

    <div class="hot-spot" x="1052" y="108">
      <div class="circle"></div>
      <div class="tooltip">
        <div class="img-row">
            <img src="2.jpg">
        </div>
        <div class="text-row">
          <h4>Title 2</h4>
          <p>More Description</p>
        </div>
      </div>
    </div>

    ...

</div>

2. The required CSS/CSS3 styles for the image hotspots.

/* Animation */
@-webkit-keyframes 
pulsate {  0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0.8;
}
 45% {
 -webkit-transform: scale(1.75);
 transform: scale(1.75);
 opacity: 0;
}
}
@keyframes 
pulsate {  0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0.8;
}
 45% {
 -webkit-transform: scale(1.75);
 transform: scale(1.75);
 opacity: 0;
}
}

/* Hotspot */

#hotspotImg {
  background-color: #ededed;
  background-size: cover;
  background-position: center center;
  position: relative;
}

#hotspotImg .img-responsive { max-width: 100%; }

#hotspotImg .hot-spot {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 5px;
  left: 5px;
  text-align: center;
  background-color: rgba(229, 0, 137, 0.6);
  color: #fff;
  border-radius: 100%;
  cursor: pointer;
  transition: all .3s ease;
}

#hotspotImg .hot-spot .circle {
  display: block;
  position: absolute;
  top: 45%;
  left: 45%;
  width: 2em;
  height: 2em;
  margin: -1em auto auto -1em;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  border-radius: 50%;
  border: 1px solid #E5008A;
  opacity: 0;
  -webkit-animation: pulsate 3s ease-out infinite;
  animation: pulsate 3s ease-out infinite;
}

#hotspotImg .hot-spot .tooltip {
  background-color: 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: 30px;
  width: 280px;
  z-index: 999;
}

#hotspotImg .hot-spot .tooltip .img-row {
  padding: 10px;
  text-align: center;
}

#hotspotImg .hot-spot .tooltip .text-row { padding: 15px; }

#hotspotImg .hot-spot .tooltip h4 {
  margin-bottom: 10px;
  border-bottom: 1px solid #ffffff;
}

#hotspotImg .hot-spot .tooltip p {
  font-size: 14px;
  line-height: 1.4em;
  margin-bottom: 10px;
}

#hotspotImg .hot-spot .tooltip p:last-child { margin-bottom: 0; }

3. Import jQuery JavaScript library and the jQuery hotSpot.js script into the html page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.hotspot.js"></script>

4. Initialize the plugin with default options.

$(document).ready (function() {

  if ($('#hotspotImg').length > 0) {
    $('#hotspotImg').hotSpot();
  }
  
});

5. Full plugin options to customize the image hotspots.

$('#hotspotImg').hotSpot({

  // default selectors
  mainselector: '#hotspotImg',
  selector: '.hot-spot',
  imageselector: '.img-responsive',
  tooltipselector: '.tooltip',

  // or 'click'
  bindselector: 'hover'
  
});

---

This awesome jQuery plugin is developed by skypluto. For more Advanced Usages, please check the demo page or visit the official website.