WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:画像のレイヤー

ひでや[MAIL][URL][WriteDate : Wed Nov 8 00:01:50 2000]

全くの初心者です。
基本的な質問かも知れませんが、
いろいろ本を見たんですが、よく分かりません
っていいますか、本には掲載されてません(/_;)
Jpegで作った地図の画像の上に、さらにポイントとなる透過GIF画像を
ポイントしていきたいのですが、どうすればよいでしょうか?

わごな[MAIL][URL][WriteDate :Wed Nov 8 02:17:55 2000]

画像処理ソフトで地図の画像と乗っけるストラクチャを一つに
合成してしまうのを真っ先に思い浮かんだんですが
そ〜ゆーことではないんですよね

スタイルシートで場所を固定して配置していく方法があります
topとleftで画像の表示場所を自由に設定できます

<DIV style="position:absolute;left:0;top:0;"><IMG src="地図.jpg"></DIV>
<DIV style="position:absolute;left:50;top:50;"><IMG src="ポイント画像1.gif"></DIV>
<DIV style="position:absolute;left:100;top:100;"><IMG src="ポイント画像1.gif"></DIV>

スナタ猫[MAIL][URL][WriteDate :Wed Nov 8 04:49:46 2000]

img要素に直接style属性を指定した方が良いのでは。
<img src="絵" style="position:absolute(以下略)とか。

また、テーブルの背景を地図の画像にして、
テーブルのセル内にポイント画像を配置する事でも実現できます。
お勧めできませんが。

ひでや[MAIL][URL][WriteDate :Wed Nov 8 22:54:10 2000]

わごな様、スナタ猫様、レスありがとうございました。
実は、紀伊国屋でいい本がみつかりました。こんな感じでした。
<DIV style="z-index:6; position:absolute; top:263;
left:187;"><IMG src="mark.GIF"></DIV>
<DIV style="z-index:1; position:absolute; top:0;
left:0;"><IMG src="zenkai.JPG"></DIV>
<DIV style="z-index:3; position:absolute; top:24;
left:24; font-size:28pt; color:black;">
全界地図</DIV>
<DIV style="z-index:4; position:absolute; top:20; 
left:20; font-size:28pt; color:red;">
全界地図</DIV>
いちおう、作りかけのページをアップしました。
これだけだと何がしたいのかさっぱり解らないと思いますが、
なんとか完成までこぎ着けたいです。がんばります!


ひでや[MAIL][URL][WriteDate :Thu Nov 9 00:11:32 2000]

あ、URLつけ忘れました。
次です。
http://www.geocities.co.jp/Bookend-Kenji/8370/zenkai.htm


Piro[MAIL][URL][WriteDate :Thu Nov 9 01:07:19 2000]

 <style type="text/css"><!--
  #char1 { position:absolute; top:10px; left:20px; }
  #char2 { position:absolute; top:40px; left:100px; }
 --></style>

こんなふうにID単位で指定しとくと、色々応用が利いていいんじゃないでしょうか。
例えばJavaScriptで印を移動するとか。
これなら、印を画像にしたり文字にしたりも簡単に変えられますし。

 <img id="char1" src="〜">
 <span id="char2">●</span>

蛇足すみません。


わごな[MAIL][URL][WriteDate :Thu Nov 9 23:39:18 2000]

だらだらと蛇足です

IMGやSPANに適用してもネスケでは思い通りに配置してくれませんでした(なんか足らなかったのかな?)

また、MAP上に配置したならアンカーを付けたり応用が効いた方がいいのかなと思ったんでDIVで囲みました

ひでや[MAIL][URL][WriteDate :Sat Nov 11 15:13:35 2000]

ご回答頂いたみなさん、ありがとうございました
回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]