jQuery Plugin To Wrap Block-Level Elements In A Hyperlink - hotSpot

hotSpot is a small yet useful JQuery plugin used to wrap multiple Html elements in a hyperlink. The plugin has the ability to wrap block-level elements like images, heading tags, and paragraph tags with basic <a> elements.

How to use it:

1. Include the jQuery hotSpot plugin after jQuery library before the closing body tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dist/ct-jquery-hotSpot.js"></script>

2. Create Html elements you want to wrap into a hyperlink.

<div class="demo">
<h2>
<a href="#">Heading 1</a>
</h2>
<div>
<img alt="" src="1.jpg" />
</div>
<p class="more">
<a  href="#">Find out more</a>
</p>
</div>

3. Call the plugin on the parent element and set the child elements which control the hotSpot.

<script>
$('.demo').hotSpot({
hotSpot_children: 'h2,img'
});
</script>

4. Default settings.

<script>
$('.demo').hotSpot({
hotSpot_children: false, // a list of child elements which control the hotSpot || [false] for all child elements
hotSpot_over_classname: 'hotSpot_over',
hotSpot_over_target_link_callback_name: false, /* name of function to trigger */
hotSpot_out_target_link_callback_name: false, /* name of function to trigger */
hotSpot_click_target_link_callback_name: false, /* name of function to trigger */
hotSpot_debug: false // false || true to enable visual highlighting and console logging
});
</script>

---

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