jQuery Plugin To Wrap Block-Level Elements In A Hyperlink - hotSpot
File Size: | 5.37 KB |
---|---|
Views Total: | 510 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.