0

私の Web サイト/Web アプリが画像を表示するとき、ユーザーがどこをクリックしても画像の「ホットスポット」を定義できるようにする必要があります。たとえば、ユーザーが画像上のポイントをクリックすると、クリックされた座標の周囲 1cm² がリンクになります。より具体的には、ユーザーがホットスポットを定義するためにそこをクリックすると、文字列を求めるダイアログが開きます。

私はこれをどのように達成できるかについてのすべての提案にかなりオープンですが、フラッシュを避けたいと思っています。フラッシュで簡単に達成できることはわかっていますが、これをすべてjavascript/jqueryに保つことができれば、それは巨大になりますヘルプ。

アイデアをありがとう。

もう少しコンテキストについては、asp .net C# 4 を使用して開発されます。

4

2 に答える 2

2

これは Javascript で簡単に行うことができます。画像のすべてのクリックをインターセプトするクリック ハンドラーを追加します。ユーザーが画像のどこをクリックしたかを把握します。最良の方法は、画像の上端と左端が0、下端と右端が である画像サイズに対してこれを相対的に作成すること1です。そのため、 の値0.5,0.5は、ユーザーが中央で右クリックしたことを意味します。次に、これらの座標を使用<div>して、クリック可能、色付き、または必要な要素を画像上に配置できます。

必要なのは、クリック イベントの座標、画像のサイズとオフセット、および少しの計算を取得するのに十分な Javascript だけです。

于 2012-07-04T14:29:24.600 に答える
1

私は、Deceze が言ったこととは少し異なるアプローチを選択しました。

これは、プロセスの概要を示す作業中の jsFiddle です。

主に deceze が本当に考えさせられたので、私は本当に上を行きました。

これがテーブルの構造です。私たちの目的のために、テーブルに「coords」という名前を付けました

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

これは、画像の上にある「オーバーレイ」のクリック機能です。->

$("#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  }
  });
});

上記では、上と左の値をファイルにポストして、解析して DB に挿入します。ここでより多くの関係を作成することもできます。これは氷山の一角です。

hotspots.php座標リクエストを提供/処理するファイルとして定義します。

ページ読み込み時に座標を取得し、画像に配置する機能です。

$.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' });
    });
  }
});

これは、DB から取得したデータの挿入と解析に使用している PHP コードです。

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   
  }
}

これは単なる例であり、本番環境での使用を意図したものではないことに注意してください。明らかに、複数の画像があり、関係を築く必要があります。また、私が使用した SQL ステートメントは脆弱であり、実際に使用できるように保護する必要があります。

幸運を！

于 2012-07-04T14:32:49.010 に答える