C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[2]: Imageの重ね合わせとPanel内スクロールについて


(過去ログ 27 を表示中)

[トピック内 3 記事 (1 - 3 表示)]  << 0 >>

■12423 / inTopicNo.1)  Imageの重ね合わせとPanel内スクロールについて
  
□投稿者/ かとけん (1回)-(2008/01/09(Wed) 15:40:35)

分類:[ASP.NET (C#)] 

[環境]VisualStudio2005 ASP.NET(C#) + AjaxExtenstions

こんにちは
現在ASP.NET+C#で機器の配置図の表示を考えています。
イメージとしては、背景に簡易地図が表示され、その上に機器のアイコンが表示(簡易地図より前面に表示される)されるようなものです。
ここで背景および機器アイコンはImageコントロールを使用しようとしています。
機器アイコンは設定により位置変更できるようにするために、コードで作成します。
画面上では、Panelコンポーネントを配置して、その中に背景用Imageコントロールを配置しています。
Panelを置いているのは、配置図表示エリアを固定にして、背景用Imageが大きなものになっても、
ブラウザのページ全体をスクロールすることなくPanelのスクロールバーで表示箇所を移動することができると考えたからです。

機器アイコンはコードで以下のように作成しています。
背景図を格納するパネルをMapPanel
地図イメージをMapImage
作成するアイコンをICONとしています。

MapImage.ImageUrl = "map.jpg";

System.Web.UI.WebControls.Image ICON = new Image();
          
ICON.ImageUrl = "aaa.jpg";
ICON.ID = "ICON";
ICON.Style["Position"] = "Absolute";
ICON.Style["Top"] = "100px";
ICON.Style["Left"] = "150px";
ICON.Style["Zorder"] = "10";
MapPanel.Controls.Add(ICON);

ここで質問です。

MapImageサイズがMapPanelより大きい場合スクロールバーが表示され、希望の動作としては
MapImageに重ね合わせたICONがスクロールに連動してもらいたいのですが、Absolute指定した時点で、
MapPanelから切り離されてしまい、連動しません。
Absolute指定しなければ、MapPanelのスクロールバーに連動しますが、今度はMapImageと重ね合わせ
ICONを表示することができません。

何かうまい解決法はないでしょうか?
それとも根本から間違っているでしょうか?

引用返信 編集キー/
■12502 / inTopicNo.2)  Re[1]: Imageの重ね合わせとPanel内スクロールについて
□投稿者/ 七曜 (30回)-(2008/01/10(Thu) 18:01:47)
No12423 (かとけん さん) に返信
C#というかWeb サーバーコントロール云々ではなくって、CSS(Style指定方法)の問題なのではないでしょうか。
CSSの解釈はブラウザによって微妙に異なりますので、ブラウザに合わせて調整する必要がある点にご注意下さい。
以下の内容はVista上のIE7で確認している内容です。

Panel Web サーバーコントロールは、実行時にdiv要素を出力します。
Panelのサイズを指定して、ScrollBarsプロパティをAutoにすると
生成されるHTMLは
 <div id="Panel1" class="parentPanel" style="height:300px;width:500px;overflow:auto;">
といったようにoverflowが適用されて、内包される要素に応じてスクロールバーが出ますね。
次にベースとなるMapImageは、通常のimg要素として出力され
 <img id="ImageMap1" src="Images/map.jpg" style="border-width:0px;" />
特にposition/height/width指定がないので、親要素のdiv内に実サイズで生成されますから
この例でいけば、height:300px;width:500px以上の大きさであれば、スクロールバーが生成されます。
次にiconの表示になりますが、これもimg要素として出力されますが、position:absoluteになりますので
指定された位置に出力されます。
この時のposition:absoluteの基準になる矩形が、その親要素に基準となる指定がなされていない場合には、
body要素といいますか、ブラウザの表示領域の左上端が基準になります。
ご希望の動作でいうと、基準はPanel(div要素)が基準でposition:absoluteが効いていれば、
スクロールバーでスクロールさせた場合に、追従してスクロールします。

では、Panel(div要素)が基準でposition:absoluteを効かせるにはどうするか、ということになりますが
基準となる要素にposition:absolute | position:relative | position:fixedがあればよいということです。
(参考:http://www.seo-equation.com/html/css/box)

結論としては、以下のようなコードを試してみると良いかと思われます。

        this.MapPanel.Style.Add(HtmlTextWriterStyle.Position, "relative");

        Image mapImage = new Image();
        mapImage.ImageUrl = "map.jpg";
        this.MapPanel.Controls.Add(mapImage);

        Image iconImage = new Image();
        iconImage.ImageUrl = "icon.jpg";
        iconImage.Style.Add(HtmlTextWriterStyle.Position, "absolute");
        iconImage.Style.Add(HtmlTextWriterStyle.Top, "100px");
        iconImage.Style.Add(HtmlTextWriterStyle.Left, "150px");
        iconImage.Style.Add(HtmlTextWriterStyle.ZIndex, "10");
        this.MapPanel.Controls.Add(iconImage);


希望の動作イメージと異なっていたらごめんなさい。

引用返信 編集キー/
■12510 / inTopicNo.3)  Re[2]: Imageの重ね合わせとPanel内スクロールについて
□投稿者/ かとけん (3回)-(2008/01/10(Thu) 19:52:09)
七曜さん 返信ありがとうございます。

ご提示頂いた内容で動作確認できました。(環境はXPsp2 IE6です)
期待通りの動作でした。

親のパネルをrelativeにすれば、その中のabsolute指定されたものは、パネル内に包含されるということですね。
Styleの設定方法で回避できる問題でした。

ありがとうございました。

解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -