[toc]
jQuery - image hotspots
This plug-in will turn following HTML into image hotspots.
<div class="image-hotspots">
<img src="http://southernbite.com/wp-content/uploads/2012/05/SouthernBiteFruitSalad-21.jpg" width="500"/>
<ul>
<li posx='30' posy='30'><label>Blackberry</label>Lorem ipsum Velit sed amet qui.</li>
<li posx='100' posy='100'><label>Kiwi</label>Lorem ipsum Dolore velit sint in sunt tempor.</li>
</ul>
</div>
imgtag can be used to set up your image- Each hotspot can be expressed within
li- Use
posxandposyattributes onlito provide XY-coordinate from the top left corner of the image- For right expansion, top/left corner of the hotspot will be used for placement.
- For left expansion, top/right corner of the hotspot will be used for placement.
- Use
labelinsidelito provide title of the hotspot - The text of
libecomes the description of the hotspot - (Optional) Use
widthattribute to specify the with of the title. The defult is the width of the title. - (Optional) Use
heightattribute to specify the height of the description. The default is the height of the description. - (Optional) Use
directionattribute to specify the direction of expansion. The default behavior isrightif theposxvalue belongs to the left half of the image,leftifposxvalue exceeds the half of the image width.
- Use
$('.image-hotspots').hotspots();The generated DOM for a hotspot would look as follows. For right expansion,
<div class="img-hotspot-container right" style="width: 1px; display: inline-block; height: 1px; z-index: 1; position: relative; top: 30px; left: 30px;">
<table>
<tbody>
<tr>
<td class="img-hotspot-button right">
<div class="closed"></div>
</td>
<td>
<div class="img-hotspot-title right" style="width: 0px; display: none;">Blackberry</div>
</td>
</tr>
<tr class="img-hotspot-desc-body right">
<td colspan="2">
<div class="img-hotspot-desc right" style="height: 0px; display: none;">BlackberryLorem ipsum Velit sed amet qui.</div>
</td>
</tr>
</tbody>
</table>
</div>
For left expansion,
<div class="img-hotspot-container left" style="width: 1px; display: inline-block; height: 1px; z-index: 1; position: relative; top: 100px; left: 300px;">
<table style="float:right;">
<tbody style="z-index: 101;">
<tr>
<td>
<div class="img-hotspot-title left" style="width: 73px; display: block;">Blueberry</div>
</td>
<td class="img-hotspot-button left">
<div class="opened"></div>
</td>
</tr>
<tr class="img-hotspot-desc-body left">
<td colspan="2">
<div class="img-hotspot-desc left" style="height: 80px; display: block;">BlueberryLorem ipsum Dolore velit sint in sunt tempor.</div>
</td>
</tr>
</tbody>
</table>
</div>
- The button will have class
img-hotspot-buttonandclosedoropenedbased on the state of the hotspot. - The title will have class
img-hotspot-title - The description will have class
img-hotspot-desc
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent