자바 스크립트 - 겹치는 투명 이미지에 롤오버 효과

겹치는 투명 이미지에 롤오버 효과를 추가하고 싶습니다. 예를 들어자바 스크립트 - 겹치는 투명 이미지에 롤오버 효과

다음 화상을 5 개 부분으로 나누어 O는 DIV 또는 IMG로했을 때 I 그들

enter image description here

각각 롤오버 효과 (다른 이미지)를 추가 할 수있다

태그를 사용하면 이미지가 사각형으로 렌더링되므로 롤오버 효과가 적절하지 않습니다. 녹색 부분에서 노란색으로 롤오버하면 Z- 색인이 높기 때문에 노란색 이미지가 강조 표시됩니다.

내가 노력 코드입니다 :

<body> 
<br /> 
<img src="part1.png" onclick="console.log('test1');"/> 
<img src="part2.png" onclick="console.log('test2');" style="position:absolute; left:30px; top: 19px;"/> 
<img src="part3.png" onclick="console.log('test3');" style="position:absolute; left:70px; top: 15px;"/> 
<img src="part4.png" onclick="console.log('test4');" style="position:absolute; left:95px; top: 16px;"/> 
<img src="part5.png" onclick="console.log('test5');" style="position:absolute; left:123px; top: 24px;"/>  
</body>

이미지 => part1 , part2 , part3 , part4 , part5

나는 가능하면, jQuery를 사용하지 않습니다.

출처

2011-10-23 user427969

jQuery는이 문제에 도움이되지 않습니다. Raphael.js와 같은 도면 라이브러리가 필요합니다. – Joe

답장을 보내 주셔서 감사합니다. 이것은 그림이 아닙니다. 내 문제를 설명하기위한 예제 일뿐입니다. 모든 5 부분은 이미지입니다. 감사합니다 – user427969

코드 예제를 게시 할 수 없습니까? 브레인 스토밍에 도움이됩니다. – Joe

감사의 말을 보내 주신 Kolink 님 외 다수. Kolink가 제안한대로 이미지 맵을 만들려고했지만 너무 어려웠습니다. 그리고 이미지를 약간 변경 했더니 새로운 이미지 맵을 만들어야했습니다.

이 부분을 플래시 swf 파일로 바 꾸었습니다. 이런 종류의 것을 플래시로 만드는 것이 훨씬 쉬웠습니다.

출처

2012-05-30 01:45:09 user427969

이런 종류의 작업은 모든 이미지 요소를 배치 한 다음 맨 위에 큰 보이지 않는 (투명) 이미지 (CSS의 "큰"파일은 실제로 1x1 픽셀 임)를 놓는 것입니다. 그런 다음 맨 위에있는 이미지에 이미지 맵을 적용하십시오. 결과는 여기에서 확인할 수 있습니다. http://pokefarm.org/

출처

2011-10-24 01:12:52

답장을 보내 주셔서 감사합니다. 당신의 아이디어는 좋지만 이미지 맵을 구현하는 데 매우 복잡한 MAP가 있습니다. 문안 인사 – user427969

자바 스크립트 - 겹치는 투명 이미지에 롤오버 효과

답변

관련 문제