Making an Interactive Picture with jQuery

Making an Interactive Picture with jQuery

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.

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.

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.

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

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:

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)

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.

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.

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.

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.

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.

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

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.

Posted Friday, November 20th, 2009 · Back to Top

SPONSOR

Add Comment

122 Comments 106 Mentions

  1. Kawsar Ali Author Editor

    awesome love it!

    ·

  2. Design Informer Author Editor

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

    ·

  3. Eric B. Author Editor

    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 Author Editor

    very well done sam!!!

    ·

  5. Marco Author Editor

    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 Author Editor

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

    ·

  7. Callum Chapman Author Editor

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

    ·

  8. Guillaume Author Editor

    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 Author Editor

    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 Author Editor

    great tutorials

    thank you

    ·

  11. Janko Author Editor

    Nice idea and superb demo, as always :)

    ·

  12. Steve Mulder Author Editor

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

    ·

  13. Elcodigodebarras Author Editor

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

    Thanks mr. Dunn

    ·

  14. Kenan Author Editor

    Dotted lines You can remove with CSS:

    :focus {
    outline: 0;
    }

    ·

    • Sam Dunn Author Editor

      @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.

      ·

  15. xea Author Editor

    Nice! Thanks for sharing!

    ·

  16. Greg Author Editor

    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. tg2345 Author Editor

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

    ·

  18. Spenser Author Editor

    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?

    ·

  19. Soh Tanaka Author Editor

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

    ·

  20. Guest Author Editor

    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!

    ·

    • Zach Dunn Author Editor

      @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?

      ·

      • ubbo nieuwland Author Editor

        Zach, you are absolutely right, the only people making money with a couch are couch salesmen and psychiatrist. All other people make money with their Macs.
        I love the tutorials you make.

        ·

  21. Web Design Kent Author Editor

    Really very good, will find a good use for this

    ·

  22. Paul Author Editor

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

    awesome tutorial. I will be using it very soon…

    thanks very much.

    ·

  23. 2tone Author Editor

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

    Thank you

    ·

  24. Brian Author Editor

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

    ·

  25. Martin Author Editor

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

    ·

  26. John Campbell Author Editor

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

    ·

  27. Michael Szczepanski Author Editor

    Awesome office.

    ·

  28. NewBloggerTemplates Author Editor

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

    ·

  29. stk Author Editor

    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

    ·

  30. gentle Author Editor

    @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!

    ·

    • Zach Dunn Author Editor

      @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.

      ·

  31. Gopal Raju Author Editor

    Pure awesomeness! Definitely gonna use this!

    ·

  32. Lauren Author Editor

    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?

    ·

  33. stk Author Editor

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

    Zach – Well said. “Know your audience”.

    ·

  34. US724 Author Editor

    Thank you mate!

    ·

  35. lanxiaoxi Author Editor

    Thanks, great tutorial.

    ·

  36. Maicon Sobczak Author Editor

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

    ·

  37. Dan Author Editor

    This is absolutely stunning, thanks for sharing this !

    ·

  38. Hunter Satterwhite Author Editor

    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?

    ·

  39. razvan Author Editor

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

    ·

  40. Matt G Author Editor

    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.

    ·

  41. kaos murah halal Author Editor

    woooooow awesome

    ·

    • CCNA Training Author Editor

      which tool you are using? Adobe photoshop? Please share… Thanks

      ·

  42. ChichiMi7 Author Editor

    I can see one of you is reading Frontend drupal there. Great stuff huh?

    ·

  43. poperechny Author Editor

    Thanks! Great article!

    ·

  44. stihinarodov Author Editor

    Thanks for the interesting post!

    ·

  45. mironovpoet Author Editor

    Good luck! You are the best!

    ·

  46. malyarov Author Editor

    Thanks!I like this jQuery! Working!

    ·

  47. dvaberega Author Editor

    Yes… script is shared…

    ·

  48. yanvarev Author Editor

    Demo work! I can`t used.

    ·

  49. romochka Author Editor

    Use in my projects! Thanks!

    ·

  50. vronskaya Author Editor

    i have this script – very good!

    ·

  51. domtebe Author Editor

    Good idea!

    ·

  52. travias Author Editor

    Hi! You site in my favorits!

    ·

  53. nikolaevcity Author Editor

    Wery well!

    ·

  54. golubkova Author Editor

    Nice! Cool!

    ·

  55. postirayka Author Editor

    You are site the good!

    ·

  56. futaji Author Editor

    I wiil add in my favorits!

    ·

  57. rukami Author Editor

    help me pls… How it work?

    ·

  58. drums Author Editor

    its easy… work!

    ·

  59. inutina Author Editor

    Very well! Good site!

    ·

  60. sadohov Author Editor

    Amazing site!

    ·

  61. lubimir Author Editor

    COOOOL!

    ·

  62. Mark Author Editor

    Thanks a lot for the theme! Good luck!

    ·

  63. Poet Author Editor

    Thanks!I Working!

    ·

  64. Romain Author Editor

    Excellent tuto ! Ca faisait un moment que je cherchais a faire cet effet ! Merci beaucoup !

    ·

  65. Boris Author Editor

    The best post quality web design I have ever seen.

    ·

  66. Boldis Media Author Editor

    Oh, that jquery tool is very useful for me, thanks!

    ·

  67. Ahmad Ali Author Editor

    very very very very very COOL !!

    ·

  68. Koalatech Author Editor

    Very nice tutorial! I will be sharing this with my jr developers!

    Thanks

    ·

  69. Christopher Mitchell Author Editor

    One thing i’ve noticed is that this is not supported on Internet Explorer from what I’ve tested, unless i’m doing something wrong.

    Can anyone let me know if there is something i’m missing to get this to work with IE?

    ·

  70. Admin Author Editor

    Cool resource
    Thanks mr.Dunn

    ·

  71. infocyde Author Editor

    Cool post, I can see lots of uses for this.

    ·

  72. BooJiun Author Editor

    Nice! using it right now with a little tweak for my about page at

    http://www.hometuitionjob.com/about

    Thanks Dunn!

    ·

  73. SexyContent Author Editor

    Cool, cool!
    So many thanks for this tutorial. Excellent!

    ·

  74. Orthodontics Author Editor

    Fantastic effect, thanks a lot!

    ·

  75. Fany Lopez Author Editor

    Its GREAT!!! But I have some questions about this.

    I want to know… how I can move the “+” in the image?? I try all the things I can imagine, but all of my ideas are a total disaster… And when I duplicate them (the “+”, I mean) dont go at all … Can someone help me??? Thanks!!!

    PD: excuse my horrible english ^^U really i´m spanish and I don´t know a lot of english

    ·

  76. pixelzdesign Author Editor

    Very usefull! Thanks

    ·

  77. Zacuska Author Editor

    thanks a lot

    ·

  78. JPOpperman Author Editor

    This is neat, thank you! Used it in a bit different way on my open-cart frontpage:

    http://art.jpopperman.com

    ·

  79. Angel Author Editor

    Hello, that is great tutorials and very usefull, but I’ve wondering how could I add that code into a blogger ? how to excahnage the photos texts etc.. ?
    Helping please :)
    Regards

    ·

  80. Rahul R Author Editor

    Very nice.. .. its so helpfull

    ·

  81. jason Author Editor

    great! thank you

    ·

  82. isheepz Author Editor

    can debug in ie7 ?

    css #fade_bg not cover screen T-T

    ·

  83. iraq Author Editor

    thank you it’s vrey uesful
    use it on my site http://www.baghdadz.com

    ·

  84. ccna chennai Author Editor

    Nice Tips, Thanks for sharing with me

    ·

  85. eugeneK Author Editor

    Cheers, great one. Would definitely test it on few browsers and resolutions to check whether CSS positioning is correct and if so. Next project i’m using it.

    ·

  86. khalid Nobani Author Editor

    Awesome

    I like your technique …

    ·

  87. Jamie Cameron Author Editor

    thanks for the great tutorial. i’m sure i can find a use in a future web site!

    ·

  88. way Author Editor

    好强大!学习了!thanks a lot!

    ·

  89. James Author Editor

    Hi,

    Thanks for this! I’m very much a novice. I’ve tried to resize the more.png image to be smaller – 25 x 25 pixels – however when I now try to view the page, the image doesn’t show. What else do I need to do?

    Thanks!

    ·

  90. Damian Author Editor

    Very nice job Sam! I’m sure I’ll find a good use for this somewhere.

    ·

  91. reka Author Editor

    Thanks a lot for this! I’m trying to learn some jQuery and this has been a very motivating guide.

    I have one question though.
    When hovering the ‘more’ buttons, the field expands to the right. I want to make it expand to the left, which is possible by simply changing:
    /* Item Specific More Button */
    #couch{ top:240px; right:75px;} <— Here 'right' instead of 'left'

    However, when it expands to the left, the image (more button) keeps its position to the left of the box, and is hence animated to the left as well. I've tried searching online for a solution on how to keep the image in the same position, while still expanding the more field to the left on hovering and placing the text to the left of the button, but cannot find anything. Any tips are appreciated!

    ·

    • J Author Editor

      I added this to the css :-

      .more img {position:absolute;right: 0;}

      It seemed to fix it no problem and hold the image to the right.

      Cheers

      ·

  92. Android-pc Author Editor

    Thanks for article, very useful!

    ·

  93. puma123 Author Editor

    can i also add more pages and add interactive pictures to them? How can i do that?

    ·

  94. Gianfranco Author Editor

    This is great, thank you!

    How can add a link to the background image so that it also takes you somewhere?

    thanks again!

    ·

  95. dma Author Editor

    Very cool tut, thank you.
    I just have one question – how would you alter it for a responsive site?

    ·

  96. ERNESTO Author Editor

    hello, i just want to know, how can i change the “more” button to a custom image, thanks

    ·

  97. ERNESTO Author Editor

    another thing, how can i add another more button?

    ·

  98. Uwe Author Editor

    Many thanks for this great tutorial, Sam! I did costumize, it works great!!!

    ·

  99. Omar Ludera Author Editor

    Just desire to say your article is as astounding. The clarity on your post is simply spectacular and that i can suppose you are knowledgeable on this subject. Fine with your permission let me to seize your feed to stay updated with coming near near post. Thank you a million and please continue the gratifying work.

    ·

  100. Rinka Author Editor

    Wonderful.. Is it possible that the animation instead of going to left, can it go to the right? how?

    thanks

    ·

  101. Kate Author Editor

    Sorr\y im really confused,
    where do I place all the code if i am doing this on dreamweaver?
    I have my image (similar to yours but of a retail store) and im not sure where to place all the code?
    An answer/help would be of so much help to me
    im desperate and new to jquery!! :’(
    TIA

    ·

  102. Tanie dekoracje ścienne Author Editor

    I’ve to try modify my presta-powered web shop.

    ·

  103. ccna master Author Editor

    Nice tutorials… But which tool you are using? Adobe Dreamweaver? Please share… Thanks…

    ·

  104. Hernan Author Editor

    Great!!

    ·

  105. Customer Service Blog Author Editor

    Very nice Tutorial. Thank you
    What would be the best program for Mac to create Interactive Image map?
    I have tried several Mac options but none of the Mac programs allows you to add hyperlink including the Ipage.

    Thank you

    ·

  106. ccna training chennai Author Editor

    nice tool . can i have the reference point ?

    ·

  107. jensen Author Editor

    awesome , thank you .

    ·

  108. Chrity Author Editor

    Hi there, awesome tutorial there!

    Just want to ask if anyone figured out how to animate the slider to the left or expand the content to the bottom?

    I have read the comments above but it seems like a workaround.

    Anyone has a good explanation? Thanks a bunch! =)

    ·

  109. Retina Author Editor

    Until now i haven’t thought about doing this using jQuery. I was trying out with blender to integrate with html, php but this seems to be far more time saving and easy implementation for similar output …i was trying for. Superb… gonna try it.. best of luck…hope to see you more ..

    ·

  110. Mycase Author Editor

    Great article about the jQuery, be sure to try the effects on my website!

    ·

  111. handbag hardware supplies Author Editor

    where do I place all the code if i am doing this on dreamweaver?
    I have my image (similar to yours but of a retail store) and im not sure where to place all the code?
    An answer/help would be of so much help to me
    im desperate and new to jquery!! :’(
    TIA

    ·

  112. HomeTuitionMalaysia Author Editor

    Thanks for your info. It has truly been beneficial. Still building my website at http://www.hometutormalaysia.com
    All comments are welcomed

    ·

  113. Sensible Advice Of sweet wedding For 2012 Description: Suggest your speaker to take some help of … Author Editor

    When opting for personalize sweets are your wedding favors, you have
    to make self-confident that you decide out sweets that you
    essentially like and consider to take in. 1 KATU reports
    that Aaron Klein, the owner of the bakery also reportedly
    told the couple that he thought they were an abomination, however, now he denies saying so.
    While most of the dresses in the Platinum line are floor-length sweeping ball gowns, there are a few very eye-catching shorter styles,
    including one sleek, chic slim silhouetted mini-dress that features a
    hem embellished with about a foot and a half
    of chiffon, tulle and ostrich feather roses.

    ·

  114. ipokupay Author Editor

    Great article about the jQuery, be sure to try the effects on my website!

    ·

  115. tutorialspark Author Editor

    Awesome and superuseful , i am gonna use it with some variations on my website http://www.tutorialspark.com/

    ·

 

Build Internet by One Mighty Roar. Since 2008.