Pinterest Stumbleupon Whatsapp
Ads by Google

Images can be pretty lifeless and boring – unless they’re interactive and awesome, that is. And qTip makes this easy, with the power of jQuery. Read on to find out how you can add interactive labels that appear when the user hovers over parts of an image.

Why would you want to do this? Personally, I’m using the technique in a new eCommerce site – so the user can hover-over elements of a scene (like an Ikea catalogue), with the product title and add to cart button appearing dynamically. It could also be used to good effect on something like a campus or town map, where there’s lots of oddly shaped elements that could really do with a description without cluttering the map. A very simple example would also be Facebook tags, where hovering over a persons face will tell you who they are. Its uses are limited only by your imagination.

Note: I’m assuming a very basic knowledge of jQuery and HTML here – at least make sure you’ve read about selectors jQuery Tutorial - Getting Started: Basics & Selectors jQuery Tutorial - Getting Started: Basics & Selectors Last week, I talked about how important jQuery is to any modern web developer and why it's awesome. This week, I think it's time we got our hands dirty with some code and learnt how... Read More , methods Introduction To jQuery (Part 2): Methods & Functions Introduction To jQuery (Part 2): Methods & Functions This is part of an on-going beginners introduction to jQuery web programming series. Part 1 covered the jQuery basics of how to include it in your project, and selectors. In part 2, we'll continue with... Read More , and anonymous functions Introduction To jQuery (Part 3): Waiting For The Page To Load & Anonymous Functions Introduction To jQuery (Part 3): Waiting For The Page To Load & Anonymous Functions jQuery is arguably an essential skill for the modern web developer, and in this short mini-series I hope to give you the knowledge to start making use of it in your own web projects. In... Read More .

qTip

qTip is a comprehensive tooltip and labelling plugin for jQuery, with a variety of styles. We’ll be using it specifically with the image map functionality, but that’s certainly not all it can do. Take a look at the plugin page to learn more, or read on to get started.

qtip-1

Making an Image Map

Image maps themselves certainly aren’t a new thing – the markup elements have available for a long time, and way back in the day it was actually considered a good way of presenting a navigation system – with clickable parts of the image linking to different sections. The same basic image map code is still used for that portion of the functionality, so we’ll need to define that first.

Ads by Google

You can use a variety of tools to create an image map – Adobe Fireworks or Photoshop – but the easiest, and free, solution is an online tool like this one. It’s certainly not the only online tool and I’m not endorsing it particularly, but it seemed simple enough to use – let us know in the comments if you find a better one. You can define rectangular, circular, or even polygonal shapes.

image-map-1

Start by uploading a picture – in this case, I’m going to label a screenshot of the MakeUseOf website. You may need to zoom out to view your full image in the tool.

It should be fairly obvious how to use it like a basic painting program – the only thing to remember is that when drawing a poly shape, you need to hold SHIFT on the last point in order to close off and finish. Here I’ve defined 4 shapes.

image-map-creating-shapes

When you’re ready scroll down and copy out the code given.

image-map-code

Create a basic new HTML document, and clean up the code a little, adding an image tag to point to your original image. The easiest way to do test this is using a JSFiddle. Here’s my sample, in it’s initial state (the final code set is given later, don’t worry).

Remember to give the image a usemap attribute, pointing to #id of the map containing the coordinates (usemap=”#mymap”, for example).

fiddle

Adding in qTip

If you’re pasted your code at JSFiddle, you’ll see there’s an option on the sidebar to include jQuery. Make sure you enable that. We can also add other external resources here, so go ahead and add the URLs for CSS and JS listed on the qTip download page. Copy and paste the “all features and styles” links into JSFiddle – though in practice, you would use the configuration tool below that to build a custom set of features or styles.

The full implementation guide for qTip can be found here, but lets go ahead and create some simple text based tooltips. The following Javascript will target all area elements (the items that define the parts of our image map) on page load, telling qTip to work on them with content of whatever is in the alt attribute.


$(document).ready(function() {
$("area").each(function(index, element) {
var link = $(this);
$(link).qtip({
content: link.attr("alt")
});
});
});

done-but-ugly

The default design is pretty ugly – you can view a demo of it here – but that’s ok, let’s apply a custom design to the popups like this (I’ve omitted some of the code, showing only the qTip specific section).

$(link).qtip({
content: link.attr("alt"),
style: {
classes: 'qtip-bootstrap qtip-shadow'
}
});

I’ve also included the BootStrap CSS file as an external file, to sort out ugly standard browser fonts. This is very much overkill, I know. Still:  much better!

styled

One thing I now notice is that position default of bottom right is not really ideal. To adjust this, let’s use the position setting:

$(link).qtip({
content: link.attr("alt"),
style: {
classes: 'qtip-bootstrap qtip-shadow'
},
position: {
target: 'mouse',
adjust: {
mouse: true // Can be omitted (e.g. default behaviour)
}
}
});
});

Now hover over any element, and the tooltip will follow your mouse. You can view the finished demo here.

You can also make the popup modal (so everything else is dimmed away, and you need to click outside to get back to it), or even load in some content through an AJAX request. I think it’s a pretty neat little plugin that breathes new life into a fairly unused HTML standard – let’s see what you can come up, and do please let us know in the comments if you’ve made something with it.

  1. Kieran
    July 21, 2016 at 3:32 am

    Brilliant breakdown of how to set up and use qTip2 for image maps. This is just what I was looking for and helped a lot - thanks so much!

Leave a Reply

Your email address will not be published. Required fields are marked *