웹디자인 이미지맵 적용

웹디자인 이미지맵 적용

QA

웹디자인 이미지맵 적용

본문

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

답변을 작성하시기 전에 로그인 해주세요.
전체 1,096
QA 내용 검색
filter #html ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT