下の図は、我がホームページに載せている画像です。全パーツを入れたので個々のパーツは小さくて見難いです。パーツをクリックしたら拡大画像が表示されるようにしました。5年振りの自作だったので、Image-map の作成手順をスッカリ忘れていました。年寄りなので次に更新があるのか不明ですが、忘れないうちに Image-map の作成手順を記録しておくことにします。
◆手順の概要
Image-map と言うのは、一枚の絵の中に複数のリンクエリアを作ります。ソースコードには、画像を定義する「img要素」、マップを定義した「map要素」、リンク設定エリアの座標値を記した「area要素」の3要素が必要です。手作業でも出来ますが、エリアが十数点もあると気が遠くなるような作業です。小生は Adobe の Dreamweaver と言うソフトを使って作成しています。
– 作成手順 –
①画像を選定し、Dreamweaver を使って「map/area要素」を作成。
②WordPress の編集時、当該画像をサーバーにアップロード。
③編集ページに画像を追加した後、編集モードを「テキスト」に切り換え。
④追加した画像の「img要素」の記述にDreamweaverで作成した「map/area要素」を挿入。
⑤上の画像の「img要素」に「usemap=”#Map”」を挿入。#Map部分は任意の値。
注）
Dreamweaver で作成された「map要素」を見ると、id属性 と name属性 の記述があります。XHTML1.1ではname属性が廃止されていますが、id属性に未対応のブラウザもあるので、現時点では両方を載せているようです。従って同じ値にします。
◆Dreamweaverを使ってImage-mapを作成
Dreamweaver の作業画面は「ワークスペース」と呼ばれており、色々カスタマイズ可能ですが、青葉マークの小生はデフォルト設定のままで使っています。左のペインは「コードビュー」と呼ばれ、ドキュメントのソースコードが表示されます。右のペインは「デザインビュー」と呼ばれ、ブラウザでどのように表示されるか簡易的に確認出来ます。
– map要素とarea要素の作成手順 –
1）Dreamweaverを起動して、新規ページとして空白ページ(HTMLタイプ)を開きます。
2）右のペインにImage-map 作成の元画像をペーストします。
3）画像に対応したソースコード「img要素」が左のペインに表示されます。
4）画像をクリックするとワークスペース左下隅に3種類(矩形、円形、多角形)のホットスポットツールが表示されます。
5）矩形のホットスポットツールを選択した後、カーソルを画像に重ねると十字形になるので、それぞれのパーツを囲む矩形を描いてホットスポット(リンク設定エリア)を作成します。
6）最初のホットスポット、CPU Ryzen を囲む矩形が描かれると、左のペインの「img要素」に「usemap=”#Map” border=”0″」が追記され、その下に「map要素」と「area要素」が生成されます。右ペインのホットスポットは「area要素」の各1行に対応しています。下図では、ホットスポットは2つ描かれていますが、2番目以降は同じ操作の繰り返しになります。
◆画像のURL
「area要素」の各行にある「href=”#”」の「＃」部分にはリンク先のURLを記述します。WordPressではアップロードされた画像はメディアライブラリに保存されていて、ライブラリ画像をクリックして詳細情報を表示すると画像のURLをコピー出来ます。コピーしたURLデータを#に上書きします。
