具体的には正確にはウィンドウ内のどこに表示されるかわからない450X540の大きさの地図上に23X23のレイヤーを配置しその中にアイコンを表示したいのです。
ページ上に表示されるTABLEなどのすべての要素に対して縦横の数値を指定すれば大まかな表示されるであろう位置はわかりますがレイアウトが変わった場合に対応できないのでターゲットとなる画像が現在表示されている座標を取得できればJavaScriptで対応できると思うのですが、取得する手段が思いつきません。
サーバサイド、クライアントサイド両方での解決策をお聞きしたいです。
No.1
1343
21
10pt
450x540 の地図画像の位置をスタイルシートの絶対指定(absolute)で指定して、 23x 23 のレイヤーの位置をその地図からの継承指定(inherit)でスタイルシートで指定するってのはいかがでしょうか？
No.2
400
10pt
その昔 画像の座標を計算するJavaScriptを作りました。ずばりそのものではありませんが、参考になるかと思います。 argv[1]が画像オブジェクトです。レイヤーに対応していたかどうかは記憶にありません(汗)。
ちなみにウィンドウの大きさやフォントの大きさなどによって表示される位置が違うので、クライアントサイドでは計算できますが、サーバーサイドでは計算できないでしょう。
示していただいたURLではFWを使っていないため意味がわからなかったですが、同サイト内のほかのページでようやくわかりました。後ほど解析したいと思います。ありがとうございます。
ちなみにサーバサイドとはPHPなどで画像を合成する等して1枚の画像にする方法があるだろうという意味合いですので引き続き回答を受け付けさせていただきます。
No.3
400
10pt
ImageMagick: Convert, Edit, and Compose Images
サーバーで画像を合成するのであれば、Image::Magicが最も有名です。
ありがとうございます。具体的な使用例などあれば助かりましたが、手軽にできるクライアントサイドの回答も引き続き募集したいと思います。
No.4
344
50pt
クライアントサイド：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でやるなら、
#イメージ関数をくみあわせれば、
#そんなに問題なくできるでしょう。
ありがとうございます。
ばっちりでした目的の動作が確認できました。
39
39
2
1
1
レイヤーの入れ子ですか。参考になります。試してみます。ただ、地図画像が絶対位置指定ができないので引き続き回答を受け付けています。