Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <h4>Click image area maps to shift background position</h4>
  
  <p> Bottom left diagonal half is clickable. src is image, has bkg with bkg position. </p>
  
  <map id="map" name="map">
    <area href="javascript:void(0);" shape="poly" coords="0,0,0,40,40,40,0,0" style="cursor: pointer;" />
  </map>
  <img id="map-img" src="http://static.jsbin.com/images/github-32.png" usemap="#map" style="height: 40px; width: 40px; background: url(http://static.jsbin.com/images/favicon.png) 12px 12px "/>
  
  <p>Top right diagonal half is clickable. src is 1px x 1px transparent gif, has bkg with bkg position. </p>
  
  <map id="map2" name="map2">
    <area href="javascript:void(0);" shape="poly" coords="0,0,40,00,40,40,0,0" style="cursor: pointer;" />
  </map>
  <img id="map2-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" usemap="#map2" style="height: 40px; width: 40px; background: url(http://static.jsbin.com/images/favicon.png) 12px 12px;"/>
  
  
</body>
</html>
 
​
 
$('area').click(function(){
 var imgId = $(this).parent().attr('id') + '-img';
 var $img = $('#'+imgId);
 var bp = $img.css('backgroundPosition').split(' ');
 var bpx = (parseFloat(bp[0]) + 5) + 'px';
 $img.css('backgroundPosition', bpx + ' ' + bp[1] );
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers