クリッカブルマップを正確な座標点で作成する方法

CATEGORY : column

クリッカブルマップを正確な座標点で作成する方法

main_catch

不動産系のサイトや、求人媒体系のサイトでよく見かける、地図画像上の県や地域毎にリンクを設定して、オンマウスで該当範囲が切り替わるアニメーションを今回は作成して行こうと思います。※今回の記事はアドビの画像編集ソフトをフル活用いたします。主にフォトショップ(イラストレーター・ファイヤーワークスでも可)を使用致しますので該当ソフトが無い方は申し訳ありません。

まずは下のサンプルを御覧ください、それぞれの県の上でオンマウス時に画像が切り替わっていると思います。

このサンプルの地図のように「四角」で区切られたリンク領域であればドリームウィーバーで完結出来てしまいますが、例えばディフォルメされていない正確な地図にクリッカブルマップを作成したい場合などに力を発揮することができます。それでは早速作成手順の紹介です!!

フォトショップ等で地図として使用したい画像の作成

画像は2枚必要になります。

img_sample
元画像
img_on_sample
オンマウス用画像
 

上記2点です。地図を作成する際、最終的にリンクにしようと思っている範囲は必ず「パス」でシェイプとして作成しておいて下さい。オンマウス時と通常時を別フォルダで作成しておくと良いかと思います。

Photoshopの拡張パネル「ClickableMapPanel」をダウンロード

吉本 集(よしもと つどい)さんが作成されたフォトショップの拡張パネル「ClickableMapPanel」をダウンロードしてご自身のPCのフォトショップに追加して下さい。追加方法、使用方法は吉本さんの記事を参考にされて下さい。(※CS6でしか確認できていないというお話みたいですが、CS5でも問題なく動作致しました)

ファイヤーワークスを使用する方はコチラ
イラストレーターを使用する方はコチラ

フォトショップから取得した座標点をhtmlに記述

このサンプル地図の場合、「shape=”poly”」よりも「shape=”rect”」の方が、確実に良いのですが「ClickableMapPanel」でパスから取得すると四角だろうが丸だろうが、「shape=”poly”」になります。

クリッカブルマップ自体は上記で完成です。指定した範囲でリンクが貼られていると思います。ここから「jquery.imagemapster.js」を使用してオンマウス時に画像を切り替えて行きます。

「jquery.imagemapster.js」を使用して画像置換

クリッカブルマップの画像置換は<a>と違って少し面倒です、ですが「jquery.imagemapster.js」を使用することで、通常時とオンマウス時の2枚を用意するだけで良くなり非常に楽です。配布元からファイルをダウンロードされて下さい。ダウンロードが完了したら、<head>内に読み込みましょう。「jquery.imagemapster.js」はJQueryベースなので必ずJQuery本体と一緒かつJQuery本体より後に読み込みをして下さい。

読み込みが完了したら下記のコードを外部JSファイルか、<script&gtタグで<head>内に記述されて下さい。

続けて、htmlの記述です。先程クリッカブルマップの設定をした該当ソース部分を下記の内容に改修します。

これで完成となります。ただし、IE8以下はオンマウス時に画像が出てこず、IEお得意の黒のベタ塗りがされてしまいます。

IE8以下への対応

IE8以下を切り捨てるなら必要ないですが、実務レベルでそれは中々難しいと思われます。今回自分の知っている当該現象の解決方法を試してみたのですが、
■jquery.belatedpng.jsの使用
■AlphaImageLoaderの記述
共にダメでした・・・。苦肉の策としてIE8の時は画像置換をせず半透明のカラーを上乗せすることにしました。具体的な記述としては、

上記でIE8でもふんわりとオンマウスの切替が可能となります。IE8以下に関しては、「msie 8」を「msie 7」「msie 6」に変更して条件分岐をorでつなぐか、elseifで分岐を増やして頂ければ可能なはずです。

IE8に対応させたサンプルはコチラです。是非IE8でご確認下さい!

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

contact_bana