다른 이미지에서 이미지의 "앵커 포인트"를 만들 수 있습니까?

Question

나는이 질문을 내가 "웹 가이"가 아니라고 주장함으로써 서술 할 것이다. 자바 스크립트 나 다른 XML 기반의 프로그래밍 기술과 관련한 프로그래밍 경험이 거의 없다. 나 한테 쉽게가!

내가 만들고자하는 것은 imagemap과 비슷한 것으로, 하드웨어 섀시에서받은 정보를 기반으로 웹 페이지에 이미지를 배치하고 다양한 하드웨어를 채 웁니다. 슬롯 "을 해당 위치에있는 하드웨어 조각의 이미지와 함께 섀시의 이미지에 표시합니다.

이 지점을 만들고 브라우저 창이 아닌 이미지와 관련되게하여 샤시의 이미지를 만들어 적절한 슬롯 위에 카드의 이미지를 배치 할 수 있습니다.

vars을 사용하여 오프셋을 저장 한 다음 섀시 이미지에 상대적인 오프셋 var을 사용하여 다른 이미지를 배치하는 메커니즘이 있습니까? 이런 종류의 일을하는 다른 방법이 있습니까?

Answer 1

에 대해 읽을 수 있으며, 일부 마크 업에 대한 스케치는 다음과 같이 될 것이다.

<div class="chassi"> 
    <div id="slot1" class="slot"></div> 
    <div id="slot2" class="slot"></div> 
    // more slots if needed 
</div> 

<style> 
    .chassi 
    { 
     position: relative; 
     background: url(/path/to/your/image.png); 
    } 
    .slot 
    { 
     position:absolute; 
    } 
    #slot1 
    { 
     left: 20px; 
     top: 20px; 
    } 
    #slot2 
    { 
     left: 20px; 
     top: 60px; 
    } 

</style> 

그런 다음 자바 스크립트를 사용하여 슬롯 데이터를로드하고 이미지를 "슬롯"-divs에 추가하십시오.

Answer 2

CSS 절대/상대 위치 지정을 사용하여 올바른 위치에 간단하게 배치 할 수 있습니다.

다른 솔루션은 <canvas>을 사용하여 실제로 여러 개의 다른 이미지로 구성된 이미지를 그립니다.

Answer 3

그것은 image mapping을 불러 당신은 내가 ThiefMaster에 동의 here