[ 座標の求め方 ]

まずは基本です。 座標は、左上の端がx=0,y=0になります。
そこから右側に何px移動したかがx座標、下側に何px移動したかがy座標になります。
右に10px,下に15px移動したなら、x=10,y=15ということです。

【補足】左上の(0,0)を基準として右・下への移動を測るので、-の座標は絶対にありません。

では、肝心の座標はどうやって求めるかというと・・・
画像を作成・加工するソフトには、マウスが今どこにいるのかを表示する機能があるので、今回はそれを使うことにします。

例えば、windowsのPaintで四角形を作る場合。
画像を加工してる時、マウスポインタを動かしていたら、画面右下の方にいろいろと値がかわる数字が表示されます。
← これ。
これは、左側が作成している画像の座標始点で、右側は座標始点から何px移動したかを示しています。なので、この画像の正式な座標は始点が(50,60)、終点が(150,120)になります。

もうひとつ例を。Adobeから出ているPhotoshopでは、「ウィンドウ」→「情報の表示」で下のようなウィンドウが表示されます。


←Photoshop5.0の情報ウィンドウ画面です。
赤線で囲まれた所がx,yの座標を示しているので、ここを見ればすぐにわかります。

この他の画像ソフトにも、マウスポインタの座標を表示する機能があるはずです。
まだ見つけていない人は、お手持ちのソフトで探してみてください。

[ もっと手軽に作るには ]

いちいち座標を調べるなんて面倒くさいっ!て人は、簡単にクリッカブルマップを作れるソフトがあるのでそれを使うのも手です。
ここで特定のソフト名はあげませんが、検索したりVectorなどのダウンロードサイトに行けば、フリーでもシェアでも見つかります。
わかりやすく、使い勝手の良いソフトを見つけてください。


[ クリッカブルマップを使う時の注意 ]
  • 画像を全て読み込むまでは機能しません。
    (閲覧者のブラウザが画像を読み込まない設定になっていても機能しません)
  • リンク箇所はわかりやすく。凝りすぎてると見つけるのが大変です^_^;)
  • 未対応ブラウザのために、テキストのリンクも用意しましょう。

前のページへ 次のページへ 忘れちゃうから書いとこうへ☆