이미지 맵 클릭 시 이미지 변경 관련 추가 질문인데요..

Question

https://jsfiddle.net/jgucL0mk/9/ 대산읍을 클릭하면 대산읍만 하이라이트가 되고, 지곡면을 클릭하면 하이라이트된 대산읍은 기본으로 돌아갑니다. 처음 한번은 서로 클릭하면 하이라이트가 됐다가 안됐다가 잘 되는데 여러번 반복할 수록 한 번더 클릭해야 하는 불편함이 생깁니다. 어떻게 하면 자연스럽게 되는지 조언부탁드립니다. 프론트 쉬운게 아니네요

kys8297 · Accepted Answer

var contextPath &#61; &#34;http://imageupload.co.uk/images/2015/06/29/&#34;;$(document).ready(function() { $('area').click(function() { var bgmapsrc &#61; $('.bgmap').attr(&#34;src&#34;); var salt &#61; $(this).attr(&#34;alt&#34;); if( bgmapsrc.indexOf(salt) !&#61; -1 ){ $('.bgmap').attr('src',contextPath &#43; &#34;map1d789.jpg&#34;); }else{ $('.bgmap').attr('src',contextPath &#43; salt); } }); });

z · Answer

이런식으로 하면 효율적이지 않을 텐데요. d3.js에서 지도를 canvas에서나 svg로 구현하는걸 추천해드립니다. 예제로 보여주신대로 하면 이미지파일을 전부다 저런식으로 넣고 계속 리셋 시켜야 할텐데요

새로운시작 · Answer

var salt &#61; $(this).attr(&#34;alt&#34;);$('.bgmap').attr('src',contextPath &#43; salt);

닉넴수정 · Answer

저도 맨첨엔 svg로 할려다가 작업방법을 몰라 일단 기능이 될 수 있는 방향으로 빨리 가야되기땜에 요렇게 구현중입니다. 답변들 감사합니다.

z · Answer

나중에 혹시 svg로 구현 하실때 도움이 필요 하시면 말씀해주세여

닉넴수정 · Answer

네 ^^ 질문글 올리면 답변 부탁드릴게요 감사합니다.

이미지 맵 클릭 시 이미지 변경 관련 추가 질문인데요..

6개의 답변

Q&A 목록