Skip to content

Instantly share code, notes, and snippets.

@kaoru-fukusato

kaoru-fukusato/イメージマップをレスポンシブ

Created March 6, 2020 18:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaoru-fukusato/d95c59a96733c46c40be967d3d33564a to your computer and use it in GitHub Desktop.
Save kaoru-fukusato/d95c59a96733c46c40be967d3d33564a to your computer and use it in GitHub Desktop.
Download ZIP
イメージマップをレスポンシブ対応させる方法
Raw
イメージマップをレスポンシブ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イメージマップをレスポンシブに対応させてみよう！</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
height: auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<img src="i16.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="circle" coords="158,172,83" href="https://mio-code.com/" alt="" />
<area shape="circle" coords="402,172,83" href="https://mio-code.com/price/" alt="" />
<area shape="circle" coords="645,172,83" href="https://mio-code.com/contact/" alt="" />
</map>
<script>
$('img[usemap]').rwdImageMaps();
</script>
</body>
</html>
//jQuery RWD Image Mapsは以下のサイトからファイルをダウンロードしましょう。
https://github.com/stowball/jQuery-rwdImageMaps
https://cdnjs.com/libraries/jQuery-rwdImageMaps
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment