GitHub - geolonia/japanese-prefectures: SVG map of Japan
const map = "./map-full.svg" // Or "./map-mobile.svg" const container = document.querySelector( '#map' ) const res = await fetch( map ) if ( res.ok ) { const svg = await res.text() container.innerHTML = svg const prefs = document.querySelectorAll( '.geolonia-svg-map .prefecture' ) prefs.forEach( ( pref ) => { // マウスオーバーで色を変える pref.addEventListener( 'mouseover', ( event ) => { event.currentTarget.s
イメージマップをレスポンシブ対応させる簡単3ステップ！
こんにちは、MIO webデザインです。 先日「イメージマップは実際の画像サイズじゃないと使えないのですか？」と訊かれました。スマホなどで閲覧すると画面幅が小さくなるので、当然画像サイズは変わってしまいます。 しかし、area要素のサイズは変わらず、ブラウザを拡大縮小するとイメージマップが崩れてしまう、という事態になってしまいます。 そこで今回はイメージマップを各デバイスでも正常に表示されるよう、レスポンシブ対応させてみたいと思います。 イメージマップの作り方のおさらい まずはイメージマップを準備しないといけませんね。 イメージマップは『HTML Imagemap Generator』さんを使えば簡単に作成できます。 作成手順は過去記事『HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法』を参考にしてください！ 今回はこのようなイメージマップを用意しま
イメージマップのコードを生成する HTML Imagemap Generetor を作ってみた | BUN:Log
そもそも採用する機会自体が減っているものの、定期的な更新作業でたまに必要になるイメージマップ。 これまでは Dreamweaver を起動して、作成していました。 ただ、使用頻度の低下を理由に Adobe Creative Cloud から illustrator / Photoshop だけの単体サブスクリプションに切り替えようかと悩んでいた時期でもあり、自分でツールを作ることにしました。 正月休みの空いた時間にひっそり公開していたのですが、自分と同じように「Dreamweaver をスポット的に利用している」という方がいらっしゃったので、改めて記事にまとめてみます。 使い方HTML Imagemap Generator： https://labs.d-s-b.jp/ImagemapGenerator/ 上記 URL へアクセスして、ローカルにある画像ファイルをドラッグ＆ドロップします。
イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ - Webデザインとかコーディングを勉強中の方に届けたいTipsを発信するブログ
イメージマップって座標の設定がとにかく面倒ですよね。 そう思っているWEB制作者の方は少なくないはず。 イメージマップを利用する機会自体がそんなに多くはありませんが、昔、デバックツールで座標を確認しながら制作したのを覚えています。 今回たまたまイメージマップを利用するサイトの制作がありましたので、どうにか楽できないかなぁと探してましたら、ありました。 とんでもなく便利な超機能。 早速ご紹介しましょう。 HTML Imagemap Generator これで面倒な座標設定が大いに楽になりました。ありがたや！ 利用方法は制作者様のブログ記事にて本人直々にご教示いただいております。 制作者様のブログ記事 イメージマップのコードを生成する HTML Imagemap Generetor を作ってみた ちなみにイメージマップのレスポンシブ対応jQueryプラグインもあります。 https://git
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dex.ne.jp
