javascript를 사용하여 대화식지도를 만드는 중

-2

다음 예제 이미지가 있습니다.이 이미지는 초록색 색조가없이 시작한다는 생각이 들었습니다. 사용자가이 영역 위로 마우스를 가져 가면 링크뿐만 아니라 녹색으로 바뀝니다. 나는 여러 영역이javascript를 사용하여 대화식지도를 만드는 중

example

이 그냥 예입니다.

이미지를 여러 슬라이스로 나눠서 divs로 정렬하여 그림을 구성하면 마우스를 사용하여 각 슬라이스에 마우스를 사용하여 초록색으로 바꿀 수 있습니다.

더 좋은 방법이 있습니까?

출처

2013-08-01 Josh Cox

아하 사람들이 어떤 이유없이 물건을 보류 할 때 나는 그것을 좋아합니다! 지식을 퍼트 리기에 좋은 직업 개조 방법! @Matt –

아, 사람들이 왜 어떤 경향이 없는지 파악하지 않으면 좋아합니다! 지식을 퍼트 리기에 좋은 직업 개조 방법! @ Simon Arnold –

ImageMapster

ImageMapster는 플래시를 사용하지 않고 HTML 이미지 맵을 활성화 할 수있는 jQuery 플러그인이다. 최신 브라우저, Internet Explorer 6 및 iPads, iPhone 및 Android와 같은 모바일 장치를 포함하여 Javascript가 수행하는 모든 곳에서 사용할 수 있습니다.

출처

2013-08-01 16:41:56

나는 그것을 조금씩 조사 할 것이다! 답장을 보내 주셔서 감사합니다. –

이것은 훌륭한 도구이며 귀하의 답변에 감사드립니다! –

한 장의 사진 섹션이 여러 개있는 경우 올바른 생각을하게됩니다.

자바 스크립트를 사용하는 대신 CSS를 쉽게 사용할 수 있습니다. 설명대로 div를 만들고 올바르게 모두 나열하십시오. 실제로 이미지를 마크 업에 넣는 대신 링크를 마크 업에 넣고 CSS를 사용하여 이미지를 링크의 배경으로 만들고 링크 표시를 블록으로 설정하여 전체 div가 클릭 가능하게됩니다.

그것은 한 조각의 HTML이 같은 것입니다 :

<div id="slice1" class="slice"><a href="#"></a></div>

과 같을 것이다 CSS :이 예와

.slice a 
{ 
    display: block; 
} 
#slice1 
{ 
    width: 100px; 
    height: 100px; /* set your actual width/heights */ 
    background-image: url(path_to_your_image); 
    background-position: center top; 
} 
#slice1:hover 
{ 
    background-position: center bottom; 
}

를, 배경 이미지 파일이 될 것이다 이미지, 처음로드 될 때의 이미지, 바로 아래의 마우스 오버 이미지가 있습니다. 마우스 오버시 배경 위치를 변경하면 아래 이미지가 표시됩니다. 또한 배경 이미지를 변경하고 첫 번째 마우스를 가져갈 때 흰색으로 깜박이는 성가신 버전을 제거합니다.

이렇게하면 자바 스크립트 코딩, 외부 자바 스크립트 라이브러리 또는 기타 종속성이 필요하지 않습니다.

이것은 매우 빨리 작성되었으므로 약간 조정해야 할 필요가 있지만 시작하면됩니다.

출처

2013-08-01 16:43:39 Ricketts

답장을 보내 주셔서 감사합니다. –

javascript를 사용하여 대화식지도를 만드는 중

답변

관련 문제