ハイパーリンクちょい技編

• リンクの場合は技と言っても、バリエーションはさほどないです。
  どちらかというと、画像系を使っていろんなことをするということになります。
  ここでは、画像の使い方を２種類だけ比較しながら説明します。

●分割された画像を使った例
　　　　　１枚の画像を分割して、それに対してリンクを別々につけていく例です。
　　　　　　
　　　●上の表示タグです。

　　　　　　　　　　　　　　<TABLE cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD><A href="ジャンプ先ＵＲＬ１" target="_blank"><IMG src="１枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> <TD><A href="ジャンプ先ＵＲＬ２" target="_blank"><IMG src="２枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> <TD><A href="ジャンプ先ＵＲＬ３" target="_blank"><IMG src="３枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> <TD><A href="ジャンプ先ＵＲＬ４" target="_blank"><IMG src="４枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> </TR> <TR> <TD><A href="ジャンプ先ＵＲＬ５" target="_blank"><IMG src="下１枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> <TD><A href="ジャンプ先ＵＲＬ６" target="_blank"><IMG src="下２枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> <TD><A href="ジャンプ先ＵＲＬ７" target="_blank"><IMG src="下３枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> <TD><A href="ジャンプ先ＵＲＬ８" target="_blank"><IMG src="下４枚目の画像ＵＲＬ" width="100" height="120" border="0"></A></TD> </TR> </TBODY> </TABLE>

◆テーブルを使用して、１枚の画像のように見えますが、実は８枚の画像なんです。

１枚目の画像	２枚目の画像	３枚目の画像	４枚目の画像
下段１枚目の画像	下段２枚目の画像	下段３枚目の画像	下段４枚目の画像

　　　こんな風になっているんですよ。
　　　この1枚１枚にリンクを張ってるわけですね。
※ジャンプ先ＵＲＬは、個々の画像で変更するほうがいいと思います。
例では全部同じに設定してますが・・・。ｗ
※画像の枠は border="0"にしないとうまく表示されませんので、注意してください。
※もちろん、画像サイズも使うものによって違ってきますので、注意してくださいね。
※できれば下段４枚目のように、カーソルが乗った時にジャンプ先のタイトルが表示されるようにしたほうが親切ですよね。
◆何気にタイトルとリンクが合体したようなものですね。

●１枚の画像で複数のリンクを張るやり方
何気に結構上級編かも知れないですね。
ほんの少しだけ理解力が必要かも知れないですが、これを覚えておくといろいろな面で使えて便利ですよ。

　　　　　　
　　　　　※↑これは先ほどの画像の分割前のものです。
　　　　　※一個一個の文字に対してリンクしてあります。説明も全てつけてあります。
　　　　　※カーソルがうまく乗ると、説明を表示します。
　　　　　※これはクリッカブルマップという方法を使用しています。
　　　●上の表示タグです。（ちょっと難しいかも知れませんが・・・。）

　　　　　　　　　　　　　　　<IMG src="マップとして使用する画像のＵＲＬ" usemap="#map1" border="0" alt="マップ全体の説明かタイトルなど"> <map name="map1"> <area shape="circle" coords="55,70,35" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> <area shape="rect" coords="120,40,190,110" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> <area shape="poly" coords="250,30,290,100,210,100" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> <area shape="circle" coords="350,70,40" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> <area shape="poly" coords="60,120,95,190,25,190" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> <area shape="circle" coords="145,190,35" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> <area shape="circle" coords="250,170,40" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> <area shape="rect" coords="310,155,390,230" href="ジャンプ先のＵＲＬ" alt="ジャンプ先タイトルなど" target="_blank"> </map>

　　　※この書式の中の数字部分は、使う画像によって変更します。
　　　※上では、400ｘ240の画像を使用しています。
　　　※ターゲットの指定は、任意で行ってください。（リンク２参照）
　　　※クリッカブルマップについては、あらためて詳しくやります。
　　　　（そちらをぜひ参考にしてください。）