人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ページ上に表示された任意の画像がウィンドウ内のどの座標に表示されているか知りたいです。
具体的には正確にはウィンドウ内のどこに表示されるかわからない450X540の大きさの地図上に23X23のレイヤーを配置しその中にアイコンを表示したいのです。
ページ上に表示されるTABLEなどのすべての要素に対して縦横の数値を指定すれば大まかな表示されるであろう位置はわかりますがレイアウトが変わった場合に対応できないのでターゲットとなる画像が現在表示されている座標を取得できればJavaScriptで対応できると思うのですが、取得する手段が思いつきません。
サーバサイド、クライアントサイド両方での解決策をお聞きしたいです。

●質問者: trapon
●カテゴリ:ウェブ制作
✍キーワード:JavaScript いるか アイコン ウィンドウ クライアント
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● いのくに
●10ポイント

http://tohoho.wakusei.ne.jp/css/reference.htm#position

450x540 の地図画像の位置をスタイルシートの絶対指定(absolute)で指定して、 23x 23 のレイヤーの位置をその地図からの継承指定(inherit)でスタイルシートで指定するってのはいかがでしょうか?

◎質問者からの返答

レイヤーの入れ子ですか。参考になります。試してみます。ただ、地図画像が絶対位置指定ができないので引き続き回答を受け付けています。


2 ● nansya
●10ポイント

http://www16.big.or.jp/~nansya/fw/FW_MENU/howto.html

なんしゃましまし

その昔 画像の座標を計算するJavaScriptを作りました。ずばりそのものではありませんが、参考になるかと思います。 argv[1]が画像オブジェクトです。レイヤーに対応していたかどうかは記憶にありません(汗)。

ちなみにウィンドウの大きさやフォントの大きさなどによって表示される位置が違うので、クライアントサイドでは計算できますが、サーバーサイドでは計算できないでしょう。

◎質問者からの返答

示していただいたURLではFWを使っていないため意味がわからなかったですが、同サイト内のほかのページでようやくわかりました。後ほど解析したいと思います。ありがとうございます。

ちなみにサーバサイドとはPHPなどで画像を合成する等して1枚の画像にする方法があるだろうという意味合いですので引き続き回答を受け付けさせていただきます。


3 ● nansya
●10ポイント

http://www.imagemagick.org/

ImageMagick: Convert, Edit, and Compose Images

サーバーで画像を合成するのであれば、Image::Magicが最も有名です。

◎質問者からの返答

ありがとうございます。具体的な使用例などあれば助かりましたが、手軽にできるクライアントサイドの回答も引き続き募集したいと思います。


4 ● chokobo
●50ポイント

クライアントサイド:CSSの場合:

図を任意の位置におけます。

相対指定親要素の中で、地図画像とアイコンを、絶対指定すれば可能です。

下記のように470X560のrelativeなブロック要素を確保しておいて、その中に、絶対指定の地図画像とアイコン画像を表示してやればいいです。

<!--相対指定で親要素-->

<div style=’position:relative;width:470px;height:560px;’>

<!--その中で絶対指定-->

<div style=’position:absolute;left:10px;top:10px;’>

<img src = ’gazo.gif’ width = ’450’ height=’540’ alt=’gazo’ />

</div>

<div

style = ’position:absolute:left;絶対座標px;top:絶対座標px’>

<img src = ’icon.gif’ width=’23’ height=’23’/>

</div>

</div>

上の「ブロック」は、任意に移動表示してくれるはずです。

もちろん「ブラウザ」のCSS対応度が問題なので、

確実にしたいなら、サーバサイドで、画を動的に生成することになるでしょうが、こっちの方は、もう少しお使いになる「サーバサイド」の環境がわからないと範囲が広すぎますね^^;

#お書きのようにPHPでやるなら、

#イメージ関数をくみあわせれば、

#そんなに問題なくできるでしょう。

◎質問者からの返答

ありがとうございます。

ばっちりでした目的の動作が確認できました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ