이미지 맵 영역으로 스크롤하는 것이 가능합니까?

이 문제에 봉착했습니다. 한 페이지에 서로 아래에 4 img maps이 있습니다. 페이지 상단에 autocomplete search field이 있는데 검색 할 문자열을 입력하면 모든지도의 영역이 강조 표시됩니다.이미지 맵 영역으로 스크롤하는 것이 가능합니까?

내가하고 싶은 마지막 단계는 제안 된 단어를 선택하여 해당 지역을 1 개만 강조 표시하고 (이 작업 완료)이 영역으로 이동 (스크롤)하는 것입니다. 하지만 나는이 일을 할 수없는 것 같습니다. 독특한 id과 같이

모든 area이있다 : I 희망

<area id="1-1-5" href="#" alt="" shape="rect" coords="1103,103,1183,169"> 
<area id="1-1-7" href="#" alt="" shape="rect" coords="1207,103,1272,184"> 
<area id="1-1-2" href="#" alt="" shape="rect" coords="939,220,1019,286">

나는 그것이 area 해당 이동할 것으로,이 idURL에 (예를 들어 index.php에 # 1-1-7)을 입력하면,하지만 그렇지 않습니다. 나는 이것이 img maps에 대한 표준적인 동작인지, 또는 imageMapster과 같은 문제인지 여부를 알지 못합니다.이 문제는 areas 이상의 멋진 강조 및 툴팁으로 사용하고 있습니다.

나는 또한 jQuery .scrollTop() 기능을 시도했지만 운이 없었습니다.

누구나 가능할 수있는 아이디어가 있다면 기꺼이 사용해 보겠습니다.

출처

2014-10-06 WellBloud

scrollTop은 다른 이동 스크립트를 실행 한 후에이 기능을 실행하는 동안 원하는대로 수행해야합니다. –

이미지 맵 폴리곤의 스크롤 오프셋 검색에 대한 설명은 http://stackoverflow.com/questions/2567403/how-to-get-top-left-x-y-of-image-map-with-javascript-jquery를 참조하십시오. – Palpatim

Adrian Forsius와 Palpatim에게 감사드립니다. 이제는 필요한 기능이 있습니다. 고마워.

function findCoordinates(area_id){ 
    if (area_id != null && area_id != '') { 
     var i, x = [], y = []; 
     var c = $("area#" + area_id).attr('coords').split(','); 
     for (i=0; i < c.length; i++){ 
      x.push(c[i++]); 
      y.push(c[i]); 
     } 
     var t = y.sort(num)[0]; 
     var l = x.sort(num)[0]; 
     if (area_id.charAt(0) == '1') { 
      t = parseInt(t) + 1350; // added height of 1st map 
     } else if (area_id.charAt(0) == '3') { 
      t = parseInt(t) + 2700; // added height of 1st and 2nd map 
     } 
//   alert('top = ' + t + ', left = ' + l); 
     $(".image-maps").offsetParent().scrollTop(t); 
    } 
} 

function num(a, b){ 
    return (a-b); 
}

출처

2014-10-07 12:56:58 WellBloud

이미지 맵 영역으로 스크롤하는 것이 가능합니까?

답변

관련 문제