웹디자인 이미지맵 적용
본문
PC, 타블렛, 모바일 반응형?으로 제작된 페이지입니다.
플랫폼 검색을 통해 나온 방법들은 거의 시도해본 것 같습니다.
원래 있는 코드를 수정하려니 더 어려운 것 같네요ㅠㅠ
이미지맵으로 버튼을 만들어 똑같이 반응형으로 적용하고 싶은데
PC페이지에만 이미지맵이 적용이 되고 타블렛, 모바일페이지에는 적용이 안 돼서 질문드립니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
$('img[usemap]').rwdImageMaps()
</script>
는 반응형 적용시 삽입하는 코드로 </head>윗부분, </map>아랫부분 등 다양하게 시도해봤습니다!
아래는 전체 코드입니다.
<!DOCTYPE HTML>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="###">
<meta name="keywords" content="###">
<meta property="og:type" content="website">
<meta property="og:title" content="###">
<meta property="og:description" content="###">
<meta property="og:image" content="images/thumb.jpg">
<meta property="og:url" content="###">
<meta property="twitter:card" content="summary">
<meta property="twitter:title" content="###">
<meta property="twitter:description" content="###">
<meta property="twitter:image" content="/images/thumb.jpg">
<meta name="nate:title" content="###">
<meta name="nate:description" content="###">
<meta name="nate:site_name" content="###">
<meta name="nate:url" content="###">
<meta name="nate:image" content="/images/thumb.jpg">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="/images/logo.png">
<link rel="image_src" href="/images/thumb.jpg">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
$('img[usemap]').rwdImageMaps()
</script>
</head>
<body>
<div class="menu">
<a href="###"><div id="korean" class="bt"><img src="images/kr.png"></div></a>
<a href="###"><div id="english" class="bt"><img src="images/en.png"></div></a>
<a href="#contact"><div id="mail" class="bt"><img src="images/mail.png"></div></a>
</div>
<div>
<section>
<div class="container pc">
<img src="images/pc-01-1.jpg" usemap="#20">
<map name="20">
<area coords="1070,784,2285,1262" href="###">
</map>
</div>
<div class="container tablet">
<img src="images/pc-01-1.jpg" usemap="#20">
<map name="20">
<area coords="1070,784,2285,1262" href="###">
</map>
</div>
<div class="container mobile">
<img src="images/mo-01.jpg">
</div>
</section>
<section>
<div class="container pc">
<img src="images/pc-02.jpg">
</div>
<div class="container tablet">
<img src="images/ta-02.jpg">
</div>
<div class="container mobile">
<img src="images/mo-02.jpg">
</div>
</section>
<section>
<div class="container pc">
<img src="images/pc-03.jpg">
</div>
<div class="container tablet">
<img src="images/ta-03.jpg">
</div>
<div class="container mobile">
<img src="images/mo-03.jpg">
</div>
</section>
<section>
<div class="container pc">
<img src="images/pc-04.jpg">
</div>
<div class="container tablet">
<img src="images/ta-04.jpg">
</div>
<div class="container mobile">
<img src="images/mo-04.jpg">
</div>
</section>
<section>
<div class="container pc">
<img src="images/pc-05.jpg">
</div>
<div class="container tablet">
<img src="images/ta-05.jpg">
</div>
<div class="container mobile">
<img src="images/mo-05.jpg">
</div>
</section>
<section>
<div class="container pc">
<img src="images/pc-06.jpg">
</div>
<div class="container tablet">
<img src="images/ta-06.jpg">
</div>
<div class="container mobile">
<img src="images/mo-06.jpg">
</div>
</section>
<section>
<div class="container pc">
<img src="images/pc-07.jpg">
</div>
<div class="container tablet">
<img src="images/ta-07.jpg">
</div>
<div class="container mobile">
<img src="images/mo-07.jpg">
</div>
</section>
<section>
<div class="container pc">
<img src="images/pc-08.jpg">
</div>
<div class="container tablet">
<img src="images/ta-08.jpg">
</div>
<div class="container mobile">
<img src="images/mo-08.jpg">
</div>
</section>
<section>
<div id="contact" class="container">
<section id="contactForm">
<div id="left">
<img id="index" src="images/x9.png">
<img id="contactus" src="images/font.png">
<form class="contact-form" method="post" novalidate="novalidate">
<div class="successform"><p>성공적으로 전송하였습니다!</p></div>
<div class="errorform"><p>전송에 실패하였습니다 페이지 새로고침 후 다시 시도해주세요.</p></div>
<div class="input-form" id="name">
<input type="text" class="form-control" name="name" placeholder="이름">
</div>
<div class="input-form" id="company">
<input type="text" class="form-control" name="company" placeholder="기업명">
</div>
<div class="input-form" id="number">
<input type="text" class="form-control" name="number" placeholder="연락처">
</div>
<div class="input-form" id="email">
<input type="text" class="form-control" name="email" placeholder="이메일">
</div>
<div class="input-form" id="message">
<textarea name="message" placeholder="문의내용"></textarea>
</div>
<div>
<button type="submit" class="btn"><span>보내기</span></button>
</div>
</form>
</div>
</section>
<section id="footer">
<div id="right">
<div id="nk">
<img src="images/###.png">
</div>
<div class="com">
\
<div class="p info_pc"><span class="info"><img class="icon" src="images/tel.png"><a href="###">###</span></a></div>
<div class="p info_pc"><span class="info"><img class="icon" src="images/email.png"><a href="###">###</span></a></div>
<div class="p info_mo">
<br>
<a href="tel:###">###</a>｜
<a href="###">###</a>
</div>
</div>
<div id="fast">
<div class="info_pc"><span class="info"><img class="icon" src="images/fast.png">빠른 상담신청</span></div>
<div id="country" class="info_pc">
<div id="kr">
<div class="sub">서울/경기</div>
<div class="korea"><a href="###"><img class="link" src="images/whatsapp.png"><span class="id">+82 ###</span></a></div>
<br>
<div class="sub">강원</div>
<div class="korea"><a href="tel:###"><img class="link" src="images/whatsapp.png"><span class="id">+82 ###</span></a></div>
<br>
<div class="sub">부산/영남</div>
<div class="korea"><a href="tel:###"><img class="link" src="images/whatsapp.png"><span class="id">+82 ###</span></a></div>
</div>
</div>
<div id="country" class="info_mo">
<div id="kr">
<div class="sub">서울/경기</div>
<div class="korea"><a href="tel:###"><img class="link" src="images/whatsapp.png"></a></div>
<div class="sub">강원</div>
<div class="korea"><a href="tel:###"><img class="link" src="images/whatsapp.png"></a></div>
<div class="sub">부산/영남</div>
<div class="korea"><a href="tel:###"><img class="link" src="images/whatsapp.png"></a></div>
</div>
<br>
</div>
</div>
<span class="info">법인명(상호) : ｜ CEO :
<br> 주소 :｜
<br> 사업자 등록번호 안내 : ｜ TEl : ｜
E-mail : ｜ 개인정보보호책임자 :
</span>
</div>
</section>
</div>
</section>
</div>
<!-- Scripts -->
<!-- <script src="js/wheel.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- <script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.scrollex.min.js"></script> -->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/jquery-migrate/jquery-migrate-3.0.1.min.js"></script>
<script src="vendor/form-validation/jquery.form.js"></script>
<script src="vendor/form-validation/jquery.validate.min.js"></script>
<script src="form/forms.js"></script>
</body>
</html>
답변 1
이렇게 수정해보세요..
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
