이미지 div를 픽셀 행으로 나누고 이벤트를 첨부하십시오.

이미지가 포함 된 div가 세로로 붙어 있습니다. 원하는 작업은 다음과 같습니다.
색 막대의 아무 위치로 마우스를 가져 가면 색 막대의 해당 값을 나타내는 텍스트 창이 마우스를 따라 이동합니다. 여기에 내가 빨리 데모 용으로 만든 이미지입니다 :이미지 div를 픽셀 행으로 나누고 이벤트를 첨부하십시오.

내가 이렇게 생각하는 방법은 픽셀의 행으로 이미지를 분할 한 다음에 각 픽셀 행에 hover 이벤트를 연결하는 것입니다 Mock image

나는 정보를 추가 할 수 있습니다. 그러나 어떻게해야할지 모르겠습니다.

따라서 이미지를 픽셀 행 집합으로 나누어 이벤트를 추가하거나 더 좋은 방법이 있습니까?

출처

2014-05-13 Roman

아이디어가 있지만 다소 복잡합니다. 이제 나는 그것을 설명하려고 시도 : 당신은 당신의 이미지, 보이지 않는 테이블에 중첩해야합니다. 테이블에 색상 변형 수와 같은 행이 있어야합니다. 모든 행에서 하나의 셀만 필요합니다. 에 대한 사이클을 사용하여이 테이블을 수행 할 수 있습니다. CSS를 사용하면 모든 셀에 동일한 클래스를 할당하면 모든 셀에서 마우스 오버를 관리 할 수 있습니다. 내가 명확하지 않은 경우 알려주기

출처

2014-05-13 13:12:35 Daniele94

약간의 노력이 필요합니다. 그러나 먼저 html5 canvas 속성을 사용하여 필요한 그라디언트 효과를 만들 수 있습니다. 여기

내가 만든 데모입니다 : http://jsfiddle.net/manublueheart/XSWeK/

그리고 당신이 아래의 코드를 impliment 할 필요가 캔버스의 섹션에 대한 텍스트 위로 마우스를 만드는 방법에 대한 튜토리얼이있다.

이 정보가 도움이되는지 확인하십시오.

자습서 : http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

데모 : http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

// Create gradient 
var grd=ctx.createLinearGradient(0,0,0,800); 
grd.addColorStop(1,"blue"); 
grd.addColorStop(0,"green"); 

// Fill with gradient 
ctx.fillStyle=grd; 
ctx.fillRect(10,10,200,600);

당신은 내가 getValueForPos라고 한 해당 색상에 마우스 포인터의 y COORD을 변환하는 기능을 필요

출처

2014-05-13 13:24:24 Manu

(..) 이리.

div.addEventListener('mousemove', function(e) { 
    var yPos = parseInt(e.y - img.getBoundingClientRect().top); 
    var colorValue = getValueForPos(yPos); 
    // Do something with colorValue in a hover 
});

출처

2014-05-13 13:31:32 Spiked

방금 MouseMove 이벤트를 사용하여 마우스 포인터의 COORD를 가져올 수 없습니다 다음 div 태그의 높이에 당신이 위치의 계산할 수 있음을 비교할 수 있습니다. 그런 다음 hover에 표시하려는 정보를 div에 마우스 위치를 기반으로 참조 할 수있는 배열에 저장합니다. 이렇게하면 너무 많은 dom 객체를 만들지 않고 원하는 효과를 얻을 수 있습니다.

출처

2014-05-13 13:31:47 David

이미지 div를 픽셀 행으로 나누고 이벤트를 첨부하십시오.

답변

관련 문제