Image Map Resize - イメージマップをレスポンシブに MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 地図や写真などで一部をクリッカブルにする際に、昔はイメージマップを使うのが一般的でした。今はJavaScriptやCanvas、SVGで処理するかも知れませんが、イメージマップもWeb標準として利用できる機能です。ただし昔の機能なので、座標の設定などで制約が多い機能でもあります。 そんなイメージマップをレスポンシブにしてくれるのがImage Map Resizeです。モダンなWebサイトでも安心して利用できるでしょう。 Image Map Resizeの使い方 幅が広い場合。 ちゃんとアメリカの各州へのWikipediaリンクが使えます。 幅を狭めた場合も同様です。 Image Map Resizeは元々のイメージマップにある情報をベースに、画像の幅に合わせて範囲を調整してくれます
レスポンシブサイトでクリッカブルマップを使う時に超便利な「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>
[JS]Responsiveデザインでサイズ可変の画像でもクリッカブルマップ対応にするスクリプト -RWD Image Maps
実装も簡単で超軽量、Responsiveデザインで画像のサイズが変わってもクリッカブルマップの座標を計算しなおすjQueryのプラグインを紹介します。 デモページ：幅480pxで表示 [ad#ad-2] RWD Image Mapsの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> HTML HTMLはクリッカブルマップを通常通り記述するだけです。 <img src="powerpuff-girls.fw.jpg" width="1024" height="768" usem
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Image Maps jQuery Plugin
GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
