ホームページ上で 添付のように見えるようにしたいです。

質問

ホームページ上で　添付のように見えるようにしたいです。
下記のようにしてみましたが、当然? うまくいきません。
方法を教えてください。

・上段に　四角で囲った　[問い合わせ]というjpgを貼ります。
　これは私でできます。
　以下のことをしたいのですが、その方法が分からないので教えてほしいのです。

・その四角の下から　左右に　縦線を引きます。

・[問い合わせ]と左右の線で囲まれた部分に　[画像1] [画像2]・・・を
入れ込みます。

・入れ込んだ[画像1]　[画像2]・・をクリックするとリンク先に遷移する

・問い合わせ]と左右の線で囲まれた部分は　色をつける。

という風な感じにしたいのです。

試してみたこと。
[問い合わせ]　jpgで　サイズは　170×30ピクセル　左右の縦線も　jpg で
サイズは　3×500ピクセルで作りました。これを　<img src= >で貼り付けようとしました。
左の線は表示できましたが、 [画像1]　[画像2]・・は、左の線の下部の部分に表示されます。

説明もつたないかもしれませんが、どうかよろしくお願いします。

回答No.2

hana-hana3 · ベストアンサー

何度か同じ質問をされて悩んでいるようですね。

最初に１枚の画像を作っておいて、分割ソフトで任意に分割する方法もあります。
合成用のタグを出力する機能を持ったソフトもあるので、便利かもしれません。

分割画像を一つの画像として表示する事は、ｗｅｂでは良く行われていますよ。
ネットを探すと沢山のソフトがあると思うので、目的に合うソフトを探してみてください。

あとは、テーブルで合成する方法も良く行われていると思います。

http://www.ringolab.com/note/daiya/archives/004842.html
http://www.geocities.jp/ss2pxd1c/gimp/python-fu-slice.html

お礼

ありがとうございます。いろんな方法があるんですね。紹介いただいたURLも参考に挑戦してみます。

回答No.1

noname#198951

「問い合わせ」の部分は出来てるようなので省略します。

左右の縦線が難しいですね。
左側と右側の画像を縦長で作るのですがTABLEタグで「左側画像」+「真ん中」+「右側画像」のように配置するように作りますので縦線とほんの少しの背景色の画像を用意することになります。
真ん中はそのままTABLEタグのバックグラウンドカラーを左右の画像と境目がわからないように同じ指定にすれば枠は終了。
選択される画像部分はTABLEタグの中の記述なので特に困ることもなく、画像にアンカーリンクを付けたものを配置するだけです。
そのままだと境目などに隙間が出来ると思いますので、CSSなどで細かい指定が必要になります。

同じようなものを2つも作らないのなら、そのページの「問い合わせ」以下を全て画像ソフト等を使って1枚の画像を作り、選択する部分だけをクリッカブルマップの方法で出来なくはないです。

お礼

CSSの指定とか私には難しい感じですが、回答いただいたことヒントにいろいろやってみます。ありがとうございました。

補足

クリッカブルマップって初めて聞いたので色々調べてやってみますね。表示したいデザイン全部（添付のようなものそのもの）はJPGで作っておいて、［画像1］部分にマウスonし、クリックするとリンク先へ飛ぶということができればベストだと思ってました。でも一枚のJPG にしてしまい、マウスonするとその一枚のJPGが対象になってしまうので、できそうにないと諦めてました。回答をヒントに試行してみますね。他の手掛かりがあればまた教えてくださいませ。時間がかかると思いますが試行の結果は改めてお礼欄に記したいと思います。ありがとうございます。