Making an Interactive Picture with jQuery

Sam Dunn on November 20th, 2009 Posted in Tutorials

In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).

The original inspiration for this tutorial came from the IKEA website, which uses Flash to accomplish something similar, although admittedly with a few extra features.

Tutorial Outline

  1. This tutorial will show you how to set up the basic structure for your own interactive picture.
  2. Create/Position “more info” buttons
  3. Add captions to buttons
  4. Link buttons to descriptions in popup info boxes

This tutorial will be most effective if used as a guide to customize the downloadable files.

Set Up Your Picture

Before we can place any buttons, we first have to get the image ready (I’ve chosen a picture of our office) . Let’s make the div #picture, which will act as our canvas.

#picture{ position:relative; top:20px; width:700px; height:466px; margin:0px auto; background:#FFF url('office.jpg'); overflow:hidden; }

You will want to customize your dimensions and background image to match your selected image. Everything we will be doing will take place inside of this div tag.

Positioning Info Buttons

If you’ve taken the time to check out the live demo, you’ve probably also noticed the large “+” buttons scattered throughout the picture. These buttons are going to be the foundation of what we do, acting as markers within the image.

That being said, here is the HTML structure of a sample button, complete with comments to explain it.

<div class="more" id="couch"> <!-- id refers to specific item -->
<a href="#"><img src="more.png"/></a> <!--defines button image, don't change link -->
<span>IKEA Klippan Couch</span> <!-- The caption for the button -->
</div>

Each button pulls from a few CSS styles, the first is the general button styles, which you probably won’t have to customize much/at all.

/* General More Button */ 
.more{ position:absolute; width:50px; height:50px; background:url('dim.png'); border:1px solid #444; padding:5px; text-align:left; overflow:hidden; }
.more span{ position:absolute; left:60px; width:160px; padding:15px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; }

The second bit that affects a button is the unique CSS that positions the button over the corresponding area of the image.

/* Item Specific More Button */
#couch{ top:240px; left:75px;}

Using this structure you can make as many buttons as you need for your image. We will be revisiting the buttons again in the jQuery section, where we will make the captions appear on hover.

The Info Box

When a visitor clicks any of the buttons, we want an info box to pop up from the bottom with the additional information inside. When this box pops up, the background should dim to call attention to the info box (I have done this before in my Lights Out tutorial).

The HTML for this goes as follows:

<!-- Info Boxes -->
<div id="infobox">
<span class="close"><a href="#"><img src="close.png"/></a></span>
<br/>
<div id="couch_info">
<img src="klippan.jpg"/><br/>
<a href="http://www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>
</div>
</div>
<!-- Dimmed Background -->
<div id="fade_bg">&nbsp;</div>

The CSS for this positions the info box in the dead center of the image, slaps a close button in the upper right, and covers the background in the semi-transparent png which dims the background. (Note: This will all be triggered by jQuery, so it will not show up yet)

/* General Info Box */
#infobox{ position:absolute; bottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
#infobox a, #infobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; }
#infobox a:hover{ text-decoration:underline; }
span.close{position:absolute; right:5px; top:5px;}
#fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('dim.png'); display:none;}

Bringing It Together with jQuery

There is a bit a jQuery involved, so here’s the breakdown – ready, set, go.

This removes the dotted blue lines in all browsers when links are clicked.

//Blur Links (Prevents Outline)
$('a').click(function() {
this.blur();
});

In order to trim down the amount of markup, we are using the same info box for all the descriptions, and hiding the ones not in current use. This line runs through and hides all of the divs contained #infobox by default when the page loads.

//Hide all item descriptions in the info box
$("#infobox > div").css("display", "none");

When a button is clicked, the info box gets triggered and slides in from the bottom. The dimmed background also fades in to view and we end the function by returning false so the link is not actually executed.

//Call in the info box
$(".more a").click(function(){
$("#infobox").animate({bottom: '233px' }, 300);
$("#fade_bg").fadeIn();
return false;
});

The info button expands to show it’s caption when the visitor hovers over it. Here you can customize the exact width it expands/retracts to. To prevent overlap between buttons, the button that is hovered over gets a high z-index temporarily.

//Expand more info button on hover
$(".more").hover(function(){
$(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'});
}, function () {
$(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
});

An example of a item description display function – you will need to duplicate this function for each button you have. This displays the correct item description in the info box when it slides into view.

//Show description for selected item
$("#couch a").click(function(){
$("#couch_info").show();
});

When the dimmed background or close button gets clicked, the info box and background disappear and the descriptions are again all hidden.

//Remove background, info box and hide all descriptions
$("#fade_bg, .close").click(function(){
$("#fade_bg").fadeOut();
$("#infobox").animate({bottom: '-200px' }, 300, function() {
$("#infobox > div").css("display", "none");
});
return false;
});

Final Product

I would strongly suggest using the downloadable files as a launching point, as it is easier to customize them for your own purposes rather than go from scratch. Lastly, I hope you enjoyed this tutorial and find it useful for a future project.

Related posts:

  1. Lights Out – Dimming/Covering Background Content with jQuery
  2. Crafting an Animated Postcard With jQuery
  3. Animate Image Filling Up Using jQuery

Tags:

Sponsored Links

  • Stumble It!
  • Bookmark It!
  • Tweet it!

About Sam Dunn

Sam is a designer and co-founder of One Mighty Roar from Massachusetts, USA. He takes particular interest in all things aesthetically pleasing. He can be found online at Vivalasam and Twitter.

 

Discussion

  1. Kawsar Ali

    November 20th, 2009 at 12:08 AM

    awesome love it!

  2. Design Informer

    November 20th, 2009 at 12:11 AM

    Awesome Sam! That is an excellent effect. Can’t wait to try it out on a future project.

  3. Eric B.

    November 20th, 2009 at 12:22 AM

    Thanks! I’ve always wondered how to do this! You make it seem so easy.

    Now I just need to find a project where I can use this.

  4. josh

    November 20th, 2009 at 2:10 AM

    very well done sam!!!

  5. Marco

    November 20th, 2009 at 3:04 AM

    Very, VERY cool – well done. Now to make a jQuery tool to easily detect at which position the boxes will be placed (it’ll generate the code for you :P ).

    Keep up the great work!

  6. Callum Chapman

    November 20th, 2009 at 3:30 AM

    Great tutorial! I really love the office guys – looks like a lot of time, effort and money went into that ;)

  7. Callum Chapman

    November 20th, 2009 at 3:30 AM

    Great tutorial! I really love the office guys – looks like a lot of time, effort and money went into that ;)

  8. Guillaume

    November 20th, 2009 at 4:45 AM

    Nice tutorial.

    Just one tip I could give you, try to user CSS property:

    a{
    outline:none
    }

    rather than doing it via JQuery

    $(‘a’).click(function() {
    this.blur();
    });

    Keep up these nice tuts ;)

  9. Dave

    November 20th, 2009 at 4:48 AM

    Awesome effect. I’m just getting into jQuery and this is a great one to practice on. More importantly, I want your office!

  10. designfollow

    November 20th, 2009 at 6:21 AM

    great tutorials

    thank you

  11. Janko

    November 20th, 2009 at 8:44 AM

    Nice idea and superb demo, as always :)

  12. Steve Mulder

    November 20th, 2009 at 9:25 AM

    Very,very neat…. doesn’t work in Opera.

  13. Elcodigodebarras

    November 20th, 2009 at 9:47 AM

    Cool resource; applied in a map if you don´t wanna work with google API is handly.

    Thanks mr. Dunn

  14. Kenan

    November 20th, 2009 at 9:54 AM

    Dotted lines You can remove with CSS:

    :focus {
    outline: 0;
    }

  15. xea

    November 20th, 2009 at 10:41 AM

    Nice! Thanks for sharing!

  16. Greg

    November 20th, 2009 at 11:07 AM

    Very nice! Thanks for sharing. I like how it serves up any number of visual techniques and rolls them into one demo.

    @Steve Mulder — works fine for me in Opera 10 for XP.

  17. Sam Dunn

    November 20th, 2009 at 11:30 AM

    @Kenan
    I actually did include that in the demo, but in order to make everyone happy I made mention of the jQuery technique as well.

  18. tg2345

    November 20th, 2009 at 11:32 AM

    That is awesome and gives me some great ideas for other uses in which I was wondering how I would go about doing, thanks.

  19. Spenser

    November 20th, 2009 at 11:54 AM

    So awesome! Just learning the J and this kind of stuff is a blessing. Also, how is the Samsung? Is it your favorite monitor you have owned?

  20. Soh Tanaka

    November 20th, 2009 at 1:04 PM

    Very cool, I can see this coming in handy for component builders in ecommerce sites :) Thanks for the inspiration and well written tutorial~!

  21. Guest

    November 20th, 2009 at 1:18 PM

    Haha, The office in the picture.. If they would not have wasted so much money on the mac they could have bought a decent couch. That ikea one is complete crap.

    Great tut though the result looks great!

  22. Web Design Kent

    November 20th, 2009 at 1:41 PM

    Really very good, will find a good use for this

  23. Paul

    November 20th, 2009 at 1:45 PM

    Would rather have a mac than a nice couch any day.

    awesome tutorial. I will be using it very soon…

    thanks very much.

  24. Zach Dunn

    November 20th, 2009 at 1:46 PM

    @Guest

    Awkward. That’s actually our office. We don’t do a whole lot of sitting, so we didn’t need a fantastic couch. We love our Macs dearly, and we don’t for a second think that it was a waste of money. Which is more important for a web design company to invest in? A couch or a computer?

  25. 2tone

    November 20th, 2009 at 2:17 PM

    What i like of your tutorials is that they are carefully coded as well as carefuly designed.

    Thank you

  26. Brian

    November 20th, 2009 at 3:50 PM

    @Guest
    As someone who has sat in said couch, I can say with some assurance that it is indeed comfy.

  27. Martin

    November 20th, 2009 at 4:15 PM

    Seriously awesome idea. Love it! Great office btw. Looks like a really creative environment.

  28. John Campbell

    November 20th, 2009 at 4:23 PM

    Really great tutorial. Different take on some well put together techniques. I enjoyed it a bunch!

  29. Michael Szczepanski

    November 20th, 2009 at 6:42 PM

    Awesome office.

  30. NewBloggerTemplates

    November 20th, 2009 at 11:54 PM

    This is a suggestion and a very good tutorial and I really liked this article and very good to try…

  31. stk

    November 21st, 2009 at 1:22 PM

    All the fading, sliding & rounding is nice and everything, but boy it sure fails miserably when JavaScript is disabled.

    You can do this (and more) with CSS. Show the text and image on-hover, plus link to another site (more detail than these pictures). Best part? Everyone gets to see it.

    Here’s a demo: http://is.gd/50tO4

  32. gentle

    November 21st, 2009 at 2:36 PM

    @stk
    If someone has disabled JS, then he/she miss a lot on the web. It’s really a small percentage that has turned off JS, so I wouldn’t care.

    Nice tut guys!

  33. Zach Dunn

    November 21st, 2009 at 3:16 PM

    @stk (and gentle)

    JavaScript usage is surprisingly simple to figure out using traffic analytics. Keep in mind, you don’t have to care about the world’s JS usage — just your visitor’s. If your site has a 98% JS enabled audience, go for it. If not, you’ll have to explore other options. These (like most tutorials online) is just an idea — not a universal plug-in. It’s up to the web designer to figure out what will work for the specific audience.

  34. Gopal Raju

    November 22nd, 2009 at 10:20 PM

    Pure awesomeness! Definitely gonna use this!

  35. Lauren

    November 24th, 2009 at 2:12 PM

    Great tutorial. One question, if I wanted to have the “more” flyouts going in the opposite direction to the left instead of to the right, I’m having trouble getting it to work using marginLeft without the animation getting jumpy. Do you have any thoughts on that?

  36. stk

    November 24th, 2009 at 5:39 PM

    Gentle – I care about all my readers (think “accessibility”) ;)

    Zach – Well said. “Know your audience”.

  37. US724

    November 25th, 2009 at 5:02 AM

    Thank you mate!

  38. lanxiaoxi

    November 26th, 2009 at 9:12 AM

    Thanks, great tutorial.

  39. Maicon Sobczak

    November 30th, 2009 at 12:08 PM

    Ow! A fresh and powerful tutorial. A liked the animation.

  40. Dan

    December 1st, 2009 at 10:31 AM

    This is absolutely stunning, thanks for sharing this !

  41. Hunter Satterwhite

    December 2nd, 2009 at 3:05 PM

    This is really nice. Thanks for the contribution.

    Is there any way to to make the width animate to the left of the plus sign, rather than the right?

  42. razvan

    December 10th, 2009 at 5:51 AM

    extra super mega usefull! I will defenetly use it!!! Thx a lot!! Gr8 post/tutorial!

  43. Matt G

    December 18th, 2009 at 3:14 PM

    I’m not a programmer but I can tweek code (slightly).

    I reasearched and labeled this massive painting containing a bunch of historical figures. You can see it here:
    http://cliptank.com/PeopleofInfluencePainting.htm

    Your technique would be awesome to use, and I’ve started using it here :
    http://howtoto.com/history/

    I’ve labeled four of the people (in the top left corner) but I’m having trouble figuring out how to move the infobox so it appears close to the person the visitor just clicked on. Is it possible to have the box appear in a relative position just below where they clicked the link?

    I’m sure you’re busy so I thank you in advance.

  44. kaos murah halal

    December 25th, 2009 at 6:05 PM

    woooooow awesome

Join the Conversation!

Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.

CommentLuv is Enabled

 

Sponsors

Advertise on Build Internet!