By
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”>
