IMG 맵을 사용하여 큰 이미지 표시

많은 작은 그림이있는 IMG 맵을 사용하고 있습니다. 각 이미지 위로 마우스를 가져 가면 더 큰 이미지가 표시됩니다. 어떻게해야합니까? 나는 그것이 작동하는 한 자바 스크립트, CSS 등을 사용하여 신경 쓰지 않는다. 예제를 제공해주십시오. IMG의 MAPIMG 맵을 사용하여 큰 이미지 표시

<img src="img.jpg" alt="Main Photo - Please View With Images On" 
usemap="#Map" class="center" style="width:900px;" border="0" /> 
<map name="Map" id="Map"> 
<area class="1" shape="rect" coords="4,3,225,150" /> 
<area class="2" shape="rect" coords="2,152,221,303" /> 
<area class="3" shape="rect" coords="3,303,221,452" /> 
</map>

의

HTML 각 클래스는 더 큰 표시 다른 이미지를 가질 것이다.

출처

2012-06-21 L84

가능한 반복 http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map – Exor

Google에서 쉽게 찾을 수있는 툴팁 플러그인을 사용하는 것이 좋습니다. 데이터 속성의 각 영역에 이미지 URL을 저장하고 플러그인에 전달하십시오. – charlietfl

@charlietfl - qTip 2를 사용하려고했으나 문제가 있습니다. http://stackoverflow.com/questions/11131941/qtip-2- and-images – L84

나는 아래와 같은 바이올린을 원한다고 생각합니다. 작성된 코드는 매우 거친 &을 최적화 할 수 있습니다. 이게 뭐 다른 걸 원해?

데모 :http://jsfiddle.net/3GF6s/3/

출처

2012-06-21 06:39:04 SVS

도움을 주셔서 감사합니다. 작동하는 것 같지만 약간의 결함이 있습니다. 마우스를 올바르게 배치하지 않으면 깜박입니다. – L84

예! 내가 말한대로 코드는 대략 작성되었습니다. 필요에 따라 스타일을 지정할 수 있습니다. – SVS

여기 ImageMapster 함께 할 수있는 방법이다 :

http://jsfiddle.net/zSBL5/

과 함께이 일을하려면 내장 된 툴팁 API는 몇 일을해야합니다. 먼저 다음과 같이 각 영역에 속성을 추가하십시오.

<area data-key="2,all" shape="rect" coords="0,90,82,170" 
    href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />

참고 data-key 이것은 ImageMapster의 "mapKey"입니다. 우리가 상황에 필요한 유일한 이유는 각 영역에 대해 동일한 툴팁을 표시하는 데 사용할 수있는 "all"이라는 단일 영역 그룹을 만드는 것입니다. 각 영역에는 이와 같은 속성이 있지만 숫자는 다릅니다 (예 : data-key="3,all", data-key="4,all" 등입니다.

는 여기에 imagemapster 바인딩하는 코드이다 :

1) toolTipContainer이 툴팁을 보여줄 수있는 템플릿의 HTML을 포함해야한다 :

$('img').mapster({ 
    toolTipContainer: $('#tooltip-container'), 
    mapKey: 'data-key', 
    areas: [ { 
     key: 'all', 
     toolTip: true 
    }], 
    showToolTip: true, 
    onShowToolTip: function(data) { 
     if (this.href && this.href!='#') { 
      data.toolTip.html('<img src="'+this.href+'">'); 
     } 
    }});

가 여기에 각 옵션의 의미입니다. 피들에서는 ID가 "tooltip-container"인 숨겨진 div를 추가했습니다.

2) mapKey은 각 영역에 추가 한 속성의 이름입니다. 이 속성에는 하나 이상의 쉼표로 구분 된 값이 포함될 수 있습니다. Imagemapster는 첫 번째 값을 공유하는 강조 표시 영역을 함께 그룹화하므로 어떤 영역을 그룹화 할 필요가 없으면 다른 값을 사용하십시오. 두 번째 값은 각 영역마다 동일해야하며 모든 영역의 툴팁을 활성화하는 데이 값을 사용합니다.

3) areas은 영역 별 서식 지정 정보의 배열입니다. 일반적으로 각 영역의 강조 효과가 표시되는 방식을 제어하는 데 사용합니다. 귀하의 경우에는 모든 영역에 대한 툴팁을 활성화하는 데 사용하고 있습니다. all 키는 모든 영역과 일치합니다. 두 번째 키가 모두 있기 때문에 toolTip: true은 툴팁을 사용합니다. 일반적으로 toolTip: "some text specific to this area:"이라고 말하면 해당 텍스트가 기본 툴팁 컨테이너에 표시됩니다. 귀하의 경우에는 이미지를 보여주고 싶습니다. 영역 URL에서 이미지 URL을 가져오고 싶습니다. 툴팁이 표시되면 함수에서 처리해야합니다.

4) showToolTip은 전체지도에 툴팁을 사용하도록 설정합니다.

5) onShowToolTip은 툴팁이 표시 될 때마다 호출되는 함수를 정의합니다. 여기에서 가로 챌 수 있고 내용을 변경하여 해당 영역의 이미지를 표시 할 수 있습니다.

이것은 더 간단해야합니다. 그러나 imagemapster의 툴팁 API는 실제로 각 영역에 대해 하드 코딩 된 텍스트가있는 아주 간단한 모델을 중심으로 설계되었습니다. 이 방법은 각 영역의 href에서 URL을 가져 오는 방법입니다.

출처

2012-06-21 11:23:31

IMG 맵을 사용하여 큰 이미지 표시

답변

관련 문제