<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Making an Interactive Picture with jQuery
By Sam Dunn
2009 Build Internet!
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Making an Interactive Picture with jQuery | Build Internet!</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//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'}); //Change the width increase caption size
}, function () {
$(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
});
//Show description for selected item
$("#couch a").click(function(){
$("#couch_info").show();
});
$("#plant a").click(function(){
$("#plant_info").show();
});
$("#monitor a").click(function(){
$("#monitor_info").show();
});
$("#board a").click(function(){
$("#board_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;
});
});
</script>
<style type="text/css">
/* General Styles */
*{ padding:0px; margin:0px; }
img{ border: none; }
a:focus, a:active{ outline:none; }
body{ text-align:center; background:#FFF; }
h1{ font:bold 18px Helvetica, Arial, sans-sarif; color:#FFF; margin:20px 0 0 0; }
/* Picture Styles */
#picture{ position:relative; top:20px; width:600px; height:450px; margin:0px auto;background:#FFF url('http://localhost/localhost/miniaturas/1pic_graciela 026.jpg'); overflow:hidden;}
/* 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; }
/* Item Specific More Button */
#board1{margin-top:406px; margin-left:127px; position:relative}#board8{margin-top:293px; margin-left:273px; position:relative}#board9{margin-top:293px; margin-left:273px; position:relative}#board10{margin-top:293px; margin-left:273px; position:relative}#board13{margin-top:307px; margin-left:263px; position:relative}#board14{margin-top:307px; margin-left:263px; position:relative}#board16{margin-top:311px; margin-left:208px; position:relative}#board17{margin-top:323px; margin-left:153px; position:relative}#board18{margin-top:323px; margin-left:153px; position:relative}
/* 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; }
/* Close button for info box */
span.close{position:absolute; right:5px;margin-top :5px;}
/* The dimmed background when the info box is showing */
#fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('dim.png'); display:none;}
</style>
</head>
<body>
<h1>etiqueta estas imagenes</h1>
<div id="picture">
<!-- More Info Buttons -->
<div id='board position:relative1'>gg</div><div id='board position:relative8'>n</div><div id='board position:relative9'>n</div><div id='board position:relative10'>n</div><div id='board position:relative13'>nacional</div><div id='board position:relative14'>nacional</div><div id='board position:relative16'>x</div><div id='board position:relative17'>kkk</div><div id='board position:relative18'>kkk</div> </div>
</body>
</html>