自分のＨＰに作ろうと頑張ってるんですが。。。

質問

下記ＵＲＬサイトにある左側の、画像（表）の作り方を教えてください。
「盾」押せばリンク先に・・・
それぞれの「マス目」にＵＲＬと画像が張られてるんですが。

一番下の元画像はあるんですが、どうすれば「盾」の画像を埋め込むか、リンクさせるか、わかりません＞＜

http://o245.oops.jp/uitem/

回答No.3

Oh-Orange

★フレームを使っています。
・左側フレーム(frame1)にメニューの munu.html を
　右側フレーム(frame2)にトップページの top.html が表示されるようにしています。
　URL でいくと
　左側フレーム⇒http://o245.oops.jp/uitem/munu.html
　右側フレーム⇒http://o245.oops.jp/uitem/top.html
　となります。
・左側フレームのリンク先をブラウザで開き右メニューから『ソースの表示(V)』を
　選択すると回答者 No.2 さんのアドバイスにあるような <DIV>～</DIV> があります。
　いっぱい DIV を使っています。私には見づらいです。
　だから TABLE を使う方法をお勧めします。

サンプル:
<TABLE>
<TR>
　<TD><A HREF="aaa.html" target="frame2"><IMG SRC="aaa.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージa"><A></TD>
　<TD><A HREF="bbb.html" target="frame2"><IMG SRC="bbb.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージb"><A></TD>
　<TD><A HREF="ccc.html" target="frame2"><IMG SRC="ccc.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージc"><A></TD>
　<TD><A HREF="ddd.html" target="frame2"><IMG SRC="ddd.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージd"><A></TD>
　<TD><A HREF="eee.html" target="frame2"><IMG SRC="eee.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージe"><A></TD>
</TR><TR>
　：
</TR><TR>
　<TD><A HREF="AAA.html" target="frame2"><IMG SRC="AAA.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージA"><A></TD>
　<TD><A HREF="BBB.html" target="frame2"><IMG SRC="BBB.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージB"><A></TD>
　<TD><A HREF="CCC.html" target="frame2"><IMG SRC="CCC.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージC"><A></TD>
　<TD><A HREF="DDD.html" target="frame2"><IMG SRC="DDD.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージD"><A></TD>
　<TD><A HREF="EEE.html" target="frame2"><IMG SRC="EEE.gif" WIDTH=34 HEIGHT=34 BORDER=0 ALT="表示メッセージE"><A></TD>
</TR>
</TABLE>

解説:
・上記の HTML ソースは左側フレームに表示させる HTML ファイルです。
　TABLE タグの <TR>～</TR> で１段５個の『盾』などの縮小画像と URL を記述します。
　１つの縮小画像は <TD>～</TD> です。ここに <A HREF="…" target="frame2">とすることで
　frame2 という名前のフレーム(右側フレーム)にリンクされたページが表示されいます。
・上記の『aaa.html』～『eee.html』、『AAA.html』～『EEE.html』がリンクされているページで
　『aaa.gif』～『eee.gif』、『AAA.gif』～『EEE.gif』が対応する縮小画像です。
　『ALT="…"』は縮小画像の上にマウスが来たときのメッセージです。ここは自由にどうぞ。
・あと左側フレームと右側フレームを上手く表示させるにはメインの HTML ページを作る必要があります。
　質問内容にある URL 先は
　●index.html　←メインのページ
　　├munu.html　←左側フレームのページ
　　└top.html　←右側フレームのページ
　という構造になっています。
　まずはフレームの基本をお勉強しましょう。→知っていたら上記の解説で分かりますよね。
・以上。

回答No.2

noname#50176

<DIV style="top : 埋め込みＸ座標;left : 埋め込みＹ座標;
position : absolute;
z-index : 1～の番号;
visibility : visible;
" id="ＩＤ名"><A href="リンク先" target="フレーム名">
<IMG src="画像ＵＲＬ" width="画像幅" height="画像高さ" border="0" alt="チップテキスト"></A></DIV>

が、構文のようです。

回答No.1

ame-sanc

ＨＴＭＬやＣＳＳが理解できるのであれば、左のメニューの部分のＵＲＬにアクセスして
そのソースを開けばそこに答えがあります。
参考にさせていただいたらよいかと思います。