HTML 페이지의 이미지 위에 상자 표시

번호가 매겨진 상자가 들어있는 (다소 큰) 레이아웃 이미지를 표시하는 간단한 HTML5 페이지가 있습니다. select 요소를 기반으로 이미지의 특정 번호가 매겨진 상자에 빨간색 빈 상자를 표시하고 싶습니다. Showing Box on Layout Image HTML 페이지의 이미지 위에 상자 표시

가 나는 각 상자의 각 번호가 상자의 좌표와 폭과 높이를 미리 채울 수 있습니다 같아요

<div data-role="content" style="scrolling: scroll; position: relative;"> 
     <div style="float:left; position: absolute; border: 2px solid red; left: 154px; top: 52px; width: 20px; height: 20px;"></div> 
     <img alt="Floor Plan" src="../common/images/floorplan.jpg" width="100%" /> 
    </div>

는 다음과 같은 이미지의 결과 :

이

내가 지금까지 무엇을 가지고 javascript 배열에서 선택한 목록을 기반으로 상자 div의 해당 CSS 요소를 동적으로 변경할 수 있습니다. 하지만 브라우저 크기를 조정하면 이미지 크기가 자동으로 줄어 듭니다 (대부분의 브라우저에서 Firefox를 사용하고있는 것으로 추측됩니다). 그러나 상자는 크기가 조정되지 않습니다.

이 문제는 어떻게 해결할 수 있습니까? 다른 솔루션도 환영합니다. 미리 감사드립니다.

출처

2014-05-20 Samik R

좌표를 백분율로 계산할 수 있습니다. –

@WesleyMurch 제안에 감사드립니다 - 도움이되었습니다. –

멋지게 완료되었습니다. 복잡한 토너먼트 브래킷을 가지고 전에 이것을해야했습니다. 다시 생각해 보았을 때, 다르게했을 것입니다. 그러나 당시 이미지 배경에 결과를 오버레이하는 것이 더 쉬워 보였습니다. –

이 사이트의 몇 가지 답변과 @WesleyMurch가 제공 한 힌트를 기반으로 솔루션을 출시 할 수있었습니다. 본질적으로 높이와 너비 스케일을 따로 따로 계산해야했습니다 (나는 동일 할 것이지만 예상하지 못했습니다!). 원래의 왼쪽 위 좌표와 위쪽 좌표에 스케일 인자를 적용하여 왼쪽 위 좌표와 위쪽 좌표를 얻습니다. . 마지막으로 높이와 너비를 오프라인 계산을 사용하여 백분율로 지정해야했습니다. 이 사람을 도움이

<html> 
<head> 
<title>Test</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8"> 
    function positionBox(event, x, y) 
    { 
     // Get the dimensions of the rendered image 
     var renderedImg = event.currentTarget; 
     var cw = $(renderedImg).width(); 
     var ch = $(renderedImg).height(); 

     // Get the dimensions of the original image 
     var originalImage = document.getElementById("testImg"); 
     var nw = originalImage.naturalWidth; 
     var nh = originalImage.naturalHeight; 

     var newx = Math.floor((x * cw)/nw); 
     var newy = Math.floor((y * ch)/nh); 

     $("#redBox").css("left", newx + "px"); 
     $("#redBox").css("top", newy + "px"); 
     $("#redBox").css("visibility", "visible"); 

     alert("Current image dim = (" + cw + "," + ch + "), natural dim = (" + nw + ", " + nh + "), new top-left = (" + newx + ", " + newy + ")"); 
    } 
</script> 
</head> 
<body> 
<div style="scrolling: scroll; position: relative;"> 
    <div id="redBox" style="float:left; position: absolute; border: 2px solid red; left: 0; top: 0; width: 6.3%; height: 4.6%; visibility: hidden;"></div> 
    <img id="testImg" alt="Floor Plan" src="floorplan.jpg" width="100%" onload="positionBox(event, 918, 626);" /> 
</div> 
</body> 
</html>

희망 : 여기

처럼 솔루션 모습입니다. 일부 지원 스레드는 here, here 및 here입니다.

출처

2014-05-24 09:29:59

HTML 페이지의 이미지 위에 상자 표시

답변

관련 문제