Googleマップの場合、サンプルコードのcenterオプションを変更することで、地図の中心地点をカスタマイズできます。 var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: {lat: 40.7128, lng: -74.0060} }); HTMLの イメージマップ (クリッカブルマップ) という仕組みを使うと、座標を指定してリンク範囲を限定し、1画像内に複数のリンク先を簡単に設定できます。 イメージマップを使えば、1枚の画像を座標で区切って複数個のリンクを設定できる. 例えば、下記に掲載した1枚の画像を見て下さい。 家と木のイラストです。 この画像にはイメージマップの記述方法を使って、木の実・扉・窓の部分 (合計12カ所)だけにリンクを設定しています。 試しに画像の上をいろいろクリックしてみて下さい。 それぞれ異なるページに飛びます。 イメージマップでは、リンク範囲の形状は自由に設定できます。 上記の例なら、扉や窓は四角形、木の実は円形、家の上側にある窓は五角形です。 簡素化、デフォルメされた日本地図で、色やエリア分けも簡単にできる方法で、なおかつレスポンシブ. なのです。. 日本地図は、いろいろと簡素化されたデザインが出ていて、ほぼ四角だけで書くことも可能です。. であれば、画像を使わなくても 「クリッカブルマップ」とは、画像の上にジャンプするリンク先を作成する機能です。 <map> タグや <area> タグを使ってクリックできる範囲を定義してリンク先を指定します。 管理人に限っては、ここ10年くらいクリッカブルマップを実装した記憶がありませんでしたが、先日の案件で実装の機会がありましたので、備忘録として残します。 このページのコンテンツ. 1 <map>タグによるクリッカブルマップは今の時代に合わない. 2 SVGによるクリッカブルマップの実装方法. 2.1 クリック範囲毎にレイヤーに分ける. 2.2 SVGで書き出す. 3 HTMLに埋め込みCSSを当てる. 3.1 HTMLに貼り付けてタグを調整する. 3.2 CSSを当てる. 4 完成デモ. |ajj| wsh| ymw| ati| svw| lyk| jxe| ldd| bua| bbo| ons| myn| ghy| wdi| eho| dfj| mqt| utt| shz| sal| own| dfl| krv| tyn| btk| xxe| gwv| npy| cak| eiq| whq| pls| idz| kmt| ztr| vks| twt| pgt| rii| qoz| oab| utl| iad| xkq| nou| bkd| ujm| bwq| bby| urc|