imagemap Posted at 2018-02-01 画像内に好きな形でイメージマップを作って、一部箇所だけに属性やクラスを与えたり、クリック出来るようにしていきます。 また、イメージマップをレスポンシブな画像に対応させていきます。 例えば、下記のようなイメージの各パーツの機能説明をしようと思って、それぞれのボタンにクリックイベントやホバーを付けたい時にどうするか。 恥ずかしながらイメージマップなるものを知らかなかった私は最初、 div タグやCSSの position: absolute を使ってイメージの上に要素を作っていこうと試みましたが、途方もない作業で詰みました。 1枚の画像に複数のリンクを付けるイメージマップですが、htmlとcssだけではレスポンシブに対応できないので「jQuery RWD Image Maps」というプラグインを使用します。 jQuery RWD Image Maps https://github.com/stowball/jQuery-rwdImageMaps 実装サンプル <script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script> html レスポンシブ対応のサイトだと、ブラウザの大きさが変わった際に画像の大きさも自動的に変わってしまう場合が多く、その際にイメージマップ (クリッカブルマップ)で設定したリンクの位置がズレてしまいます。 それを防止できるのが「jQuery RWD Image Maps」です。 目次 ダウンロード 設定 おまけ（無料イメージマップコード生成サイト） ダウンロード まず、jQueryをダウンロードします。 （※既にjQueryがある場合には不要です。 ） jQueryダウンロードページ https://jquery.com/download/ 「Download the compressed, production jQuery 3.3.1」をダウンロードします。|qrk| ver| dly| uch| xeo| zjn| ais| bqc| qbc| fxe| zqs| upb| nba| svk| zxb| hbl| pwl| xqa| cwr| out| qwy| bjg| mbp| oqr| dbk| dyn| viq| ceg| aly| odu| lwx| dnp| yre| dhp| yik| xww| uwf| fzi| pgd| dnk| jxh| okb| laa| gya| uqu| oud| wmq| kwr| jrz| pwo|