*

mapのareaリンクにロールオーバーを実現する簡単な代替策

公開日: : ノウハウ

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウスを乗せたら色が変わったらわかりやすいねという話になり詰まりました。

最初は CSS の擬似クラス hover※1 を使えば余裕だろうと思っていましたがそう上手くはいきませんでした。

※1:リンクや画像のリンクにマウスを乗せたら色を変えるために使う手法。

困った事に area:hover という CSS では area のリンク領域にロールオーバー処理が出来ないという事がわかりました。

areaにロールオーバー処理をする代替手段

調べてみると jquery や Javascript で実現する方法を紹介するサイトが見つかりました。

しかし、jquery はこれだけの処理に結構複雑になっており、Javascript はロールオーバー用の画像を用意しておくなど手間がかかるようです。もっと簡単な方法はないかと個人的に思慮をめぐらしました。

もっと簡単な方法

もっと簡単な方法と言えば、FLASH で作ればすぐに作る事ができます。しかし、FLASH はウェブサイトにおいては死んだ技術。今更使うのは時代遅れです。

そこである事を思い出しました。
 
FLASH を html5 に変換してくれる Web サービスがあった筈だ!

イメージマップとは違うものになりますが、同じ処理を FLASH も使わずに再現できる筈です。

FLASHをhtml5に変換する「Swiffy」を利用

Google 社が提供している FLASH を html5 に変換するサービスがあります。今回はこの「Swiffy」を利用する事にします。

FLASH で画像に複数リンクを付けるイメージマップを再現します。以下のようなボタンアクションを作り、マウスが乗ったらリンク領域の色が変わるようにボタンを作ります。

on(release){
    getURL("リンク先のURL","_top");
}

areahovr

FLASH(SWFファイル)が出来たら Swiffy のサイトにアクセスしましょう。

Upload your swf

画面左側の「Upload your SWF」の所で Learn more をクリックします。

swiffy

html5 に変換したい FLASH を選択し、2番の利用規約に同意し、「Upload and convert」ボタンをクリックすると変換が始まります。1MB までの FLASH しか変換できませんが、画像にリンクを設定した程度の FLASH なら余裕で変換できます。

変換が完了すると以下のようなボタンが表示されるので、右クリックで「名前を付けてリンク先を保存」を選択すると FLASH ではなく html5 で構成されたものがダウンロードできます。

areahover5

ダウンロードしたものを開いてみると FLASH を使わずにちゃんと動くようになっているのですが、ソースを見てみると上記の暗号のような文字の羅列が長々と並んでいます。サイトで利用する場合は、インラインフレームで読み込んだ方が html ソースがすっきりして良いかもしれません。

おわりに

Adobe FLASH は誰でも持っているソフトではありませんが、area タグにロールオーバー処理をしたい場合はこういう代替手段もありますよという事で紹介です。PC でも Android でも同じように表示されて大満足。

  • Pocket

おすすめトピックス

関連記事

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
ラジオのAM/FMとはどういう意味か?

ラジオ放送には2種類ある事は多くの方がご存知かと思います。それ

美山鍾乳洞
大変珍しい立体迷路型鍾乳洞、岐阜県郡上市の「美山鍾乳洞」を探検

岐阜県郡上市にある美山鍾乳洞は日本最大級の立体迷路型鍾乳洞とい

スープカレー
こだわりのスープカレーが旨い岐阜県郡上市の老舗カフェ「アルピーヌ」でランチ

岐阜県の郡上八幡へ観光へ行った時に、郡上市でどこかランチができ

養老軒の大福
売切れ続出!独創的な絶品大福で有名な岐阜県川辺町の和菓子処「養老軒」

岐阜県加茂郡川辺町に存在する和菓子屋さん養老軒は独創的なフルー

モネの池の鯉
神秘的で青く美しい岐阜県関市の「モネの池」に行ってみた。最善の見頃は6月

Google マップで適当に色々な場所を見ていた所、偶然「Mo

→もっと見る