두 개의 ImageMap 영역을 연결하는 방법은 무엇입니까?

페이지 내의 앵커에 연결하기 위해 복잡한 폴리 영역이 설정된 이미지가 있습니다. 이 외에도이 지역 위로 마우스를 가져 가면 강조 표시됩니다.두 개의 ImageMap 영역을 연결하는 방법은 무엇입니까?

그러나이 영역을 텍스트 조각과 연결하여 둘 중 하나를 가리키면 강조 표시됩니다.

나는 그들이 동일한 제목을 가지고 있고 그것이 이런 방식으로 작동한다면 alt라고 추정한다.

2016-09-17 Seawad

다음은 더미 데이터가 포함 된 작업중인 URL의 예입니다. 이 예에서는 두 개의 '어깨'요소를 연결하고자합니다. [link] (http://www.mend.plus/717-2/) – Seawad

해결책을 찾았습니다. 아래는 문제가 해결 된 것을 발견 한 바이올린 코드입니다. 불행 바이올린 따라서 그것의 부하 절반 워드를 일으키는 원인이되는 코드를 중간 초기 기능을 폐쇄하기 때문에

는 HTML

<!DOCTYPE html> 
<body> 
<div id="menu"> 
    <ul> 
    <li class="menu-item-a"><a href="#">Part A</a></li> 
    <li class="menu-item-b"><a href="#">Part B</a></li> 
    <li class="menu-item-c"><a href="#">Part C</a></li> 
    <ul> 
</div> 
<img id="house" src="http://also.kottke.org/misc/images/filip-dujardin.jpg" style="" usemap="#house-map"> 
<map name="house-map"> 
    <area shape="rect" name="part-a" coords="0,0,500,183" href="#" /> 
    <area shape="rect" name="part-b" coords="0,183,500,366" href="#" /> 
    <area shape="rect" name="part-c" coords="0,366,500,500" href="#" /> 
</map> 
</body> 
</html>

jQuery(document).ready(function ($) { 
$('#house').mapster({ 
    mapKey: 'name', 
    singleSelect: true, 
    fillOpacity: 0.6, 
    fillColor: 'FF0000', 

    // 
    onMouseover: function (evt) { 
     var parts = evt.key.split('-'); 
     var part = parts[1]; 
     highlightArea(part); 
    }, 

    // 
    onMouseout: function (evt) { 
     var parts = evt.key.split('-'); 
     var part = parts[1]; 
     highlightAreaX(part); 
    } 

}); 

    // 
    $('a').hover(function() { 
     var parts = $(this).closest('li').attr('class').split('-'); 
     var part = parts[2]; 
     highlightArea(part); 
    }); 

    // 
    $('a').mouseleave(function() { 
     var parts = $(this).closest('li').attr('class').split('-'); 
     var part = parts[2]; 
     highlightAreaX(part); 
    }); 



// 
function highlightArea(key) { 
$('area[name=part-' + key + ']').mouseenter(); 
$('a').removeClass('hover'); 
$('li.menu-item-' + key + ' a').addClass('hover'); 
} 

// 
function highlightAreaX(key) { 
$('area[name=part-' + key + ']').mouseout(); 
$('li.menu-item-' + key + ' a').removeClass('hover'); 
} 
});

이 어려웠다 주된 이유였다. 이 문제를 해결하려면 단순히 "}});" 내가 위의 예에서와 같이 끝까지.

출처

2016-09-18 15:59:23 Seawad

두 개의 ImageMap 영역을 연결하는 방법은 무엇입니까?

답변

관련 문제