フロート要素を利用することで、ページデザインの自由度はかなり向上します。ところが、どこまで回り込みが行われるかは、あなた自身が決めることです。回り込みを終わらせるには、そこで忘れずに回り込みを解除する処理を行う必要があります。
これを、怠ると指定以降のテキストは延々回り込み指定のままです。
下の画像はMOMO's pageさんより、戴いた画像です。
左右のフロート要素(回り込み)を、終わるには、STYLE="CLEAR : 値 "を使い解除します。(左、または右側のみの回り込みの解除をする「LEFT/RIGHT」も指定できます)
回り込みを利用した場合、回り込みの終了位置には必ず「<要素 STYLE="CLEAR
: BOTH">」を忘れないようにしましょう。
ソース:3本目の罫線までは画像を回り込ませ、4本目からは画像の下にした場合の「CLEAR属性」を利用します。
<IMG SRC="cat-home.gif" ALT="サンプル" style="float:RIGHT"> <HR> <HR> <HR> <HR STYLE="CLEAR : RIGHT"> <HR>
回り込みを解除したいと思った場合、解除したい要素<開始タグ>内にstyle="clear:のスタイルシートに設定します。
例えば:
<P>
<IMG SRC="abc.gif" style="float:left">のように回り込みを指定し <P>テキスト(文字列)幾つかの要素の後、 <P>テキスト(文字列)</P>ココまで回り込みと思った!とします。 すぐ後の要素に「STYLE="CLEAR:値"」を記述します。(値は、LEFT/RIGHT/BOTH) <P style="clear:left">テキスト(文字列)</P>
一枚の画像で、それぞれにクリック出来るのを見かけます。それが、イメージマップ(クリッカブルマップ)です。一枚の画像に複数のリンクボタンを作り指定した範囲にURL(URI)を指定するだけなのですが、少し厄介なもので「三つの要素」、「5個の属性」、「8個以上の属性値」と「リンクの数だけの座標計算」の使い分けが必要になります。
座標計算は、その手のソフトがあります。Webページでも、簡単に教えてもらえるところもあります。(下記にイメージマップ用のフリーソフト紹介)
イメージマップには、「クライアントサイド」と「サーバーサイド」があります。通常、プロバイダのサーバー(一部分)を借ている私達が使用するのは「クライアントサイド・イメージマップ」です。
「サーバーサイド・イメージマップ」は、指定方法が違うので会社やプロバイダ又は個人で、サーバー自体を持っている方に限ります。
簡単に説明しましょう。まず、用意するタグは3種類
おなじみの「<IMG SRC="ファイル名" USEMAP="#マップ名">」(SRC="ファイル名")に、クライアントサイド・イメージマップを使用する
USEMAP 属性指定をし、半角英数で任意の名前「"#マップ名"」(USEMAP=#任意の名前)を#の後に記述します。
例:<IMG SRC="nihonn-zu.jpg" USEMAP="#jp-map" alt="日本地図">
「<MAP NAME="マップ名">〜〜</MAP>」、クライアントサイド・イメージマップ画像を定義し「NAME="マップ名"」は、イメージマップ画像を関連付けるために「"#マップ名"」でつけた任意の名前を記述します。
例:<MAP NAME="jp-map">リンクの数だけの<AREA>要素が入ります。</MAP>
リンクの数だけの、「<AREA HREF="リンク先のURL" SHAPE="範囲の形" COORDS="X座標(px),Y座標(px)の数">」
さて、ココからが本領発揮して下さい。
他に<AREA>要素に入る属性は「TITLE="説明"」「TARGET="ウィンドウ"」「ACCESSKEY="ショートカットキー"」「TABINDEX="領域の選択順序"」等・・・
もし、<AREA>要素の領域が重なった(重複)したときは、ブラウザによって違いますが、最初にマウスポインタが通過している領域や<AREA>指定の上位を優先します。
製作が簡単な、フリーウエア製作ソフトもあります。Win用ですが、クリッカブルマップエディタ「C-MAP(シーマップ)」「Map Maker AZUKI」「Client Side Image Map Editor」です。
私はシェアウエアですが、上記の中で一番のお勧めは、Map Maker AZUKI です。
Map Maker AZUKI の使い方を私なりに解説した「Map Maker AZUKI Support Page.」もあります。
タグ解説IMGimage:画像: <IMG SRC="URL" >で、SRC属性で指定したURIの画像を貼り込みます。 以下の属性が指定できます。
|