Image Map Resize - イメージマップをレスポンシブに MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 地図や写真などで一部をクリッカブルにする際に、昔はイメージマップを使うのが一般的でした。今はJavaScriptやCanvas、SVGで処理するかも知れませんが、イメージマップもWeb標準として利用できる機能です。ただし昔の機能なので、座標の設定などで制約が多い機能でもあります。 そんなイメージマップをレスポンシブにしてくれるのがImage Map Resizeです。モダンなWebサイトでも安心して利用できるでしょう。 Image Map Resizeの使い方 幅が広い場合。 ちゃんとアメリカの各州へのWikipediaリンクが使えます。 幅を狭めた場合も同様です。 Image Map Resizeは元々のイメージマップにある情報をベースに、画像の幅に合わせて範囲を調整してくれます
無料で画像にイメージマップをサクッと作成してくっつけることができる「Pictogon」
「Pictogon」は1つの画像ファイルにマンガの吹き出しのようなイメージマップを追加できるウェブサービスです。地図や写真、グラフなどの図説の画像ファイルにマウスカーソルを乗せた時だけ情報を表示するので、1枚の画像ファイルにすっきりと情報を集約することができ、範囲を指定して複数のリンク作成することもできます。 Pictogon https://pictogon.com/ Pictogonを使うと、以下の画像のように衣類部分だけ範囲を指定して情報をを入力し、マウスを上に乗せたときに情報を表示させる「イメージマップ」を作ることができます。 そして、それぞれの指定範囲をクリックすると…… 別のウェブサイトに移動するリンク機能を追加することができます。 以下の画像をクリックすると、Pictogonで実際に作成したイメージマップ入りの画像が別ウインドウで表示されます。 不特定多数の人に地図を公開して
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
