締切済み

HP作成について。画像の上に画像を載せる方法。

2004/11/30 15:17

僕の質問をみてくれてありがとうございます。僕は今Htmlを使ったホームページ作成をしているんですけど、少しつまづいてしまったので、わかる方がいたら教えて欲しいです。質問というのは、画像の上に、画像を載せることができないのです。画像の横に画像だったり、画像の下に画像とかはできるんですけど、画像の上に画像を載せる事ができません。それから使っているソフトはFrontPage Expressなんですけど、もしこれ以外のフリーソフトで画像の上に画像をのせたりできるＨＰ作成ソフトがあったらおしえてください。よろしくおねがいします。

takeshi0612
お礼率50% (31/61)

みんなの回答 （7）
専門家の回答

みんなの回答

Joh_Taka
ベストアンサー率76% (222/292)

2004/11/30 16:38 回答No.7

まず、画像の上に画像を重ねて表示させる方法としては、 http://www.cybergarden.net/stylesheet/css_image_layer.html のようにCSS（スタイルシート）を使う方法がありますが、全ての閲覧者環境に於いて、表示が崩れる等、正しく表示される訳ではありませんし、いくつかの問題点を抱えた方法ではあります。作成方法や詳細は「CSS position」、「CSS z-index」や「CSS-Layer」等をキーワードに検索すれば、多くの情報を得ることが出来ます。ところで、Photoshopなどの画像編集ソフトはお持ちですか？やはり、一番確実な方法としては、画像編集ソフトで画像を重ねて編集した、ただ一枚だけの画像のみを使うことでしょうね。そのようにした場合・・・リンクの設定（リンク元となる画像の部分指定）にお困りのようですが、クリッカブルマップにしてしまえば良いのではありませんか？つまり、数枚の画像を画像編集ソフトで重ねて、一枚だけにした画像の一部に（編集で一番上に重ねた画像に該当する部分に）クリッカブルマップでリンクを設定するようにしては如何でしょう？ http://hp.vector.co.jp/authors/VA008140/howmap.html クリッカブルマップで正確に座標を出すのは、ちょっと厄介です。（Photoshop クラスの画像編集ソフトをお持ちでしたら比較的簡単に座標を出すことは可能ですが・・）クリッカブルマップ作成用のフリーソフトがいくつかありますので、 http://www.vector.co.jp/soft/win95/net/se191731.html や http://www.vector.co.jp/soft/win95/net/se149193.html 等、それらを利用するのが一番簡単確実です。やはり一枚のみに編集した画像を使って、クリッカブルマップ以外で画像の一部にリンクを設定する方法としては、Photoshop等スライス機能（画像の分割及びテーブルとしてのHTML書き出し機能）のある画像編集ソフトをお持ちでしたら、最終的にいくつかのセルで構成されたテーブルとして作成して、必要な箇所の画像をリンク元とすることも可能です。あまり求められていない答えではないかと思いますが、画像編集ソフトで画像を統合したものを使われた方が良いと思います。

質問者

お礼 2004/12/15 11:53

回答してくれたみなさま、ありがとうございました。僕がやりたかったことは、ＩＢＭのホームページビルダーのどこでも配置モードというのを使えばできることがわかりました。みなさん本当にありがとうございました。

babi
ベストアンサー率28% (32/113)

2004/11/30 16:37 回答No.6

画像の上に画像を重ねるとなると、#1さんのおっしゃるように1つの画像にするしかないと思います。ご質問で実現しようと思われているようなものが実際にアップされているページはどこかにありますでしょうか？ 1つの画像の中でEnterのところだけをマウスに反応させたいのであれば、まず1つの画像を複数に切り分けて、その複数の画像をくっつけてあたかも元の1つの画像のように見せる（でも実際は複数の画像）という方法があります。有償ですがMacromediaのFireWorksを使えば高度なものが実現できます。もしくは「クリッカブル・マップ」という方法で似たようなことができるようになると思います。これは1つの画像に複数のリンク先を設定するもので、htmlファイル内のタグで座標を指定します。上記のキーワードで検索していただければたくさんでてきます。

babi
ベストアンサー率28% (32/113)

2004/11/30 16:37 回答No.5

画像の上に画像を重ねるとなると、#1さんのおっしゃるように1つの画像にするしかないと思います。ご質問で実現しようと思われているようなものが実際にアップされているページはどこかにありますでしょうか？ 1つの画像の中でEnterのところだけをマウスに反応させたいのであれば、まず1つの画像を複数に切り分けて、その複数の画像をくっつけてあたかも元の1つの画像のように見せる（でも実際は複数の画像）という方法があります。有償ですがMacromediaのFireWorksを使えば高度なものが実現できます。もしくは「クリッカブル・マップ」という方法で似たようなことができるようになると思います。これは1つの画像に複数のリンク先を設定するもので、htmlファイル内に座標を指定します。上記のキーワードで検索していただければたくさんでてきます。

noname#40524

2004/11/30 16:08 回答No.4

<DIV class="Cont" id="disp" style="Z-INDEX: 5; left : 51px; width : 225px; POSITION: absolute; top : 111px; height : 301px;">本文</DIV><DIV> 上記のコードを作成して、『Z-INDEX: １』の数字を変更すれば画像の上に画像、テキストを乗せる事が出来ます。これは『カスケードスタイルシート』？と…

rightegg
ベストアンサー率41% (1357/3236)

2004/11/30 16:05 回答No.3

こんにちは。基本的にHTMLはそういう仕様にはなっていません。画像は「重ねない」のです。効果として必要なら予め重ねた状態の画像を用意するのが普通。もちろん、不可能だと言っている訳ではありません。例えば「背景」を使うという手がありますよね。背景って実は全体だけじゃなくてテーブルのセル単位でも使えます。これを利用すれば文字や画像を重ねられる様になります。他にもダイナミックHTMLなどでレイヤー機能を持たせたり出来ますが、あまりおすすめはしません。もし僕があれを実現するなら、まず画像は全て統合。ひとつの画像にします。それを適度に分割し、ボタンにする部分だけLINKを張る。これで事足りますよね。ムリに重ねる必要はありませんし、おすすめ出来ません。レイアウトが乱れる元になります。先の回答で紹介してくれたソフトは、「レイヤー機能」を使いなさいって意味ですよ。普通は重ねずにレイヤーで統合するものですので。

you-jia
ベストアンサー率24% (13/54)

2004/11/30 16:01 回答No.2

単純にhtmlだけでは難しいです。背景入れてテーブル(背景付き）のせて更にその中に画像を、という風にすれば可能かと思いますが、細かい部分で調整が難しいと思います。上記の例ですとこうなります。 <body background="画像１"> <table background="画像２"><tr><td> 　<img src="画像３"> </td></tr></table> </body> 画像１、２が単純に背景用の画像であればこれで良いのですが、背景用の画像で無い場合(写真やイラストなどの繰り返し用の画像じゃない場合)、これでは難しいです。もちろんテーブルの幅や高さでコントロールできなくも無いですが…。推奨するのはスタイルシート、というものを使う方法です。 <div class="img1"> <div class="img2"> <img src="画像３"> </div></div> これ↑がbodyタグ内に入れるもので、それ以外にheadタグ内に以下のものを入れます。 <style type="text/css">  </style> 詳しいスタイルシートの使い方や、上に書かれた意味などは参考サイトで調べてください。とにかく、htmlだけでは難しいです、ということです。FrontPageがどれほどの機能を持っているかは存じませんが、どちらにしろ、ソフトを使う場合ですとスタイルシートで自由配置などできるものでないと難しいかと思います。以上、参考になりましたら幸いです。