Making an Interactive Picture with jQuery
24 Kasım 2009 Salı

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
http://buildinternet.com/2009/11/making-an-interactive-picture-with-jquery/
Demo | Download
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; }
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>
- /* General More Button */<span style="white-space: pre;"> </span>
- .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; }
- /* Item Specific More Button */
- #couch{ top:240px; left:75px;}
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"> </div>
- /* General Info Box */
- #infobox{ position:absolute; bottombottom:-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; rightright: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();
- });
- //Hide all item descriptions in the info box
- $("#infobox > div").css("display", "none");
- //Call in the info box
- $(".more a").click(function(){
- $("#infobox").animate({bottom: '233px' }, 300);
- $("#fade_bg").fadeIn();
- return false;
- });
- //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'});
- });
- //Show description for selected item
- $("#couch a").click(function(){
- $("#couch_info").show();
- });
- //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.













Top