Dopeless Hotspots is Jquery plugin, that allows you to convert any static image to interactive presentation. It features:

  • Ease of use
  • Unlimited hotspots amount
  • Support of touchscreen devices
  • Ability to use multiple instances on a single page
  • Automatic positioning of hotspots based on hotspot content and image size
  • Ability to add images to hotspots content to sow detailed view of your product
  • Nice modern design

Please feel free to contact me about bugs. (Current ver. 1.0)

Dopeless Hotspots usage examples

Dopeless Hotspots


12.03.2013 - Update to version 1.1

Touch device detection fixed.

06.02.2013 - Version 1.0 released

How to use

1. Download Dopeless Hotspots, that includes:

  • dopelessHotspots

    • css

      • style.css –main CSS

      • arrow.png – arrow icons for zoom-in image frame

      • hide_hotspots.png – hide hotspots icon

      • show_hotspots.png –unhide hotspots icon

      • hotspot_plus.pngexpand hotspot icon

      • hotspot_minus.pngcollapse hotspot icon

    • scripts

      • dopelessHotspots.js – Jquery plugin

      • dopelessHotspots.min.js –Plugin minified version


2. Extract package contents somewhere on your server.

3. Include dopelessHotspots.js plugin in <head> section of your HTML after Jquery main library connection.

<script type="text/javascript" src=""></script>

<script type="text/javascript" src="dopeless_hotspots/scripts/dopelessHotspots.min.js"></script>

4. Provide Link to CSS file in <head> section of your HTML

<link rel="stylesheet" href="dopeless_hotspots/css/style.css" type="text/css" media="screen" />

5.Add <div> container to your HTML, specify it's ID:

<div id='my_hotspot'></div>

6. Add an image to newly created <div> element

<div id='my_hotspot'>

   <img src='images/my_image.jpg'/>


7.Add an<a> element with a class 'sethotspot' after an image for every hotspot you want to appear. You must specify some attributes for every <a> element:

title: hotspot title

posix: horisontal position (in percents, relative to image width)

posiy: vertical position (in percents, relative to image height)

href: relative path to hotspot zoom-image (optional)

content of an <a> element: text to appeat on hotspot (optional)

<div id='my_hotspot'>

   <img src='images/my_image.jpg'/>

   <a class='sethotspot' href='#' title='My Title' posix='12' posiy='72'></a>

   <a class='sethotspot' href='dopeless_hotspots/images/ethernet.jpg' title='Other title' posix='46' posiy='76'>My hotspot text</a>


8. Add plugin call somewhere after image


   $(document).ready(function() {





To use multiple instances on a single page you have to add several <div> containers with unique IDs. Then you have to run plugin for every image. For example:


   $(document).ready(function() {







9. You can specify theese options:



default value




Title of hotspots menu



Maximal width of hotspot, relative to image width



If to show navigation menu



If to show hide button


Example of using options:


   $(document).ready(function() {







Dopeless Hotspots licensed under Creative Commons Attribution-NonCommercial 3.0 license.

You can freely use Dopeless Hotspots for your personal non-commercial projects.
If you want to use Dopeless Hotspots for commercial purposes, you have to pay a fee.

You must provide a link to this page by repost.

Created by Dopeless Design