Question

When my website/web app displays a picture, I need to allow the users to define ‘hotspots’ on the picture wherever they click. So for example, when the user clicks on a point on the picture – 1cm² around the co-ordinate that was clicked will become a link. To be more specific – when the user clicks there to define the hotspot – a dialog will open asking for a string.

I’m pretty much open to all suggestions as to how I can achieve this but want to steer clear of flash, I know it’d be easily achieved in flash but if I can keep this all javascript/jquery it’d be a huge help.

Thanks a lot for any ideas.

For a bit more context: It will be developed using asp .net C# 4.

Answer 1

I chose a bit of a different approach than what Deceze said.

Here’s the working jsFiddle outlining the process

I really went above and beyond, mostly because deceze really got me thinking.

This is the structure of the table. For our purpose, we named the table ‘coords’

-------------------------
|  id  |  xpos  |  ypos |
-------------------------
|  0   |   53   |  74   |
|  1   |  217   |  168  |
-------------------------

This is the click function for the ‘Overlay’ sitting on top of the image. ->

$("#imgOver").click(function(event) {
  var parentOffset = $(this).parent().offset(); 
  var defTop = event.pageY - parentOffset.top - 25;
  var defLeft = event.pageX - parentOffset.left - 25;

  $(this).append('<div class="addLink" style="top:'+defTop+'px;left:'+defLeft+'px;"> Link </div>')
  $.ajax({
    type: 'POST',
    url: 'hotspots.php',
    data: {'top' : defTop, 'left': defLeft  }
  });
});

In the above, we post the top and left values to our file to be parsed out and inserted into the DB. We can also create more relationships here, it’s just the ti of the iceburg.

We define hotspots.php as the file to serve / handle our coordinate requests.

This is the function to reteive the coordinates on page load and place them into the image.

$.ajax({
  type: 'GET',
  url: 'hotspots.php',
  data: 'hotspots=true',
  success: function(data){
    $(data).appendTo('#imgOver');
    $.each($('#imgOver').find('.addLink'), function(i,obj){
      var coordData = $(this).attr('rel');
      coordData = coordData.replace(' ', '');
      coordData = coordData.split('/');
      $(obj).css({'top' : coordData[1]+'px', 'left' : coordData[0]+'px' });
    });
  }
});

This is the PHP code we’re using to insert, and parse data retrieved from the DB.

if(!empty($_POST['top']) && !empty($_POST['left'])){
  $qstr = "INSERT INTO coords(xpos, ypos) VALUES('".$_POST['left']."', '".$_POST['top']."')";
  $q = mysql_query($qstr);
}
if(!empty($_GET['hotspots']) && $_GET['hotspots'] == 'true'){
  $qstr1 = "SELECT * from coords";
  $q1 = mysql_query($qstr1);
  while($row = mysql_fetch_array($q1)){
  ?>
    <div class="addLink" rel="<?php echo $row['xpos'] ?> /<?php echo $row['ypos'] ?>"> Link </div>
  <?php   
  }
}

Please note this is only an example, and not intended for production use. Obviously, you’ll have more than 1 image and will need to develop a relationship. Also, the SQL statements I’ve used are vulnerable and should be secured for live use.

Good luck!