News

Add hotspot tooltips with jQuery

Here we show you how to add click or hover hotspots to your web images with the iPicture2 jQuery plugin

Add-hotspot-tooltips-with-jQuery

Add hotspot tooltips with jQuery

DOWNLOAD TUTORIAL FILES

Pick up iPicture2

For this example we’re going to use the iPicture2 plugin by Sara D’Alia. What this plugin does is allow you to very quickly overlay hotspot ‘dot’ buttons on an image, offering tooltip text for annotation purposes. These can easily be toggled between hover or click modes, requiring no code whatsoever. To start, head over to ipicture-square.justmybit.com/getting_started.html and click the download link to save the zip.

Essential plugin files

Unpack the zip archive and we’ll start by isolating the basic files we’ll need. From the ‘css’ folder we need ‘iPicture.css’, along with ‘jquery.picture.js’ from the ‘js’ folder. Copy them into the root of a new HTML document. We also need the ‘images’ folder, so copy that too. However, if you wish, you can dispense of the contents apart from the ‘moreblack’ and ‘morewatergreen’ folders inside.

Attach the plugin

In the head of the page we need to link iPicture2’s stylesheet, then the latest jQuery CDN. After that we can attach the ‘jquery.ipicture.js’ file as follows:

001    <link rel=”stylesheet” type=”text/
css” media=”screen” href=”css/
iPicture.css”/>
002    <script src=”http://code.jquery.com/
jquery-1.11.0.min.js”></script>
003    <script type=”text/javascript” src=
”js/jquery.ipicture.js”></script>

The wizard’s way

Referring back to the original plugin files, among the demos you’ll find ‘wizard.html’, so open this page in your browser. iPicture2 neatly provides this ‘wizard’ tool for dragging and dropping the dot icons onto a selected image. So, browse for your chosen graphic and position as many as you require before clicking the ‘Get code’ button below. This will generate the code you need to copy and paste into your page body:

001    <div id=”iPicture” data-interaction
=”hover”>
002    <div class=”ip_slide”>
003            <img class=”ip_tooltipImg” 
src=”myimage.jpg”>
004            <div class=”ip_tooltip ip_img32”
style=”top: 348px; left: 153px;
” data-button=”moreblack” data-
tooltipbg=”bgblack” data-round=
”roundBgW” data-animationtype=
”ltr-slide”>
005                <p>
006                </p>
007            </div>
<!--Extra dots appear here-->
008        </div>
009    </div>
010    <script>
011        $(“#iPicture”).iPicture();
012    </script>

Add your text

The previous code will add the default black dots with blank black bubbles to your image. As long as you have the corresponding folder in your images folder you can change this as we have to ‘morewatergreen’ or any of the other supplied colours. You then add your bubble text by just adding a string between the <p> tags of each hotspot <div> element, like so:

001    <div id=”iPicture” data-
interaction=”hover”>
002    <div class=”ip_slide”>
003        <img class=”ip_tooltipImg” src=
”myimage.jpg”>
004        <div class=”ip_tooltip ip_img32
” style=”top: 348px; left: 153px;
” data-button=”morewatergreen” 
data-tooltipbg=”bgblack” data-
round=”roundBgW” data-
animationtype=”ltr-slide”>
005    <p>Silver Sands hotel and casino</p>
006    </div>

From hover to click

To switch iPicture2 between hover or click interactions, you only have to change a single line. Simply amend the data-interaction field of the main ‘iPicture’ container <div> to ‘hover’ or ‘click’ as desired. Like our example, you might also like to change the default cursor to the pointer by extending the’ .ip_tooltip’ CSS class. Add the lines, save the page and preview!

001    CSS:
002    <style>
003    .ip_tooltip {
004         cursor: pointer;
005    }
006    </style>
HTML:
001    <div id=”iPicture” data-
interaction=”click”>

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×