0

イメージマップを覚えていますか? 彼らは90年代にいたるところにいました。ウェブページには画像があり、それをクリックすると、画像だけでなく、クリックした正確なピクセルに基づいて何らかのアクションを実行できます.

ここで、等幅フォントでレンダリングされ、2D グリッドとして配置された div にテキストがあるとします。そのグリッド内の任意の文字をクリックすると、スクリプトがトリガーされ、クリックした文字のインデックスが与えられるように、div に Javascript を配置する方法はありますか?

グリッド内のすべての文字を独自のカスタマイズされたタグで囲むことで、これを強引に実行できることはわかって<a>いますが、それを行う簡単な方法はありますか?

4

1 に答える 1

1

これは、概念を証明し、機能しているように見える jsfiddle です。クリックするたびに、クリックされた文字のマトリックス インデックスがコンソールに記録されます。(0ベースで列、行です)

  • テキストを等幅グリッドに入れる
  • 含まれている要素の onClick にハンドラーをアタッチします
  • 1文字のみの非表示要素を使用して、1文字(「m」など)の寸法を計算します
  • テキスト内でクリックされた文字の座標を取得するために、単一の文字の寸法で除算event.clientXします。event.clientY

javascript でテキスト幅を計算するも参照してください。

于 2012-04-04T23:49:03.933 に答える