*

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

おすすめトピックス

関連記事

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

videoタグのmp4動画にもサムネイル画像を表示させるには

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。 そこ […]

著者について

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

フォローはこちら

       

       
Tシャツ
夏でも涼しい蒸れない無地TシャツならグリマードライTシャツがおすすめ【レビュー】

以前なんでも良いからとりあえず無地Tシャツを買おうと思って手に

長浜市の手打ちうどん処「二福亭」地元で美味いと話題のうどん屋さん

滋賀県長浜市にある手打ちうどん屋さんの「二福亭」は地元でうどん

彦根市の緑豊かで温かい雰囲気の民家カフェ「MokuMoku」でランチ

滋賀県彦根市にある隠れ家的民家カフェ「MokuMoku(モクモ

世界一のジェラート
彦根市にある世界一のジェラート店「ジェラテリアアズーロ」で滋賀ならではの味を堪能

世界一のジェラートのお店が滋賀県に、彦根市にあるなんて。半信半

スマホで遊園地経営ゲーム「ローラーコースタータイクーンタッチ」レビュー

自分で夢のワンダーランドを作る遊園地経営シミュレーションゲーム

→もっと見る