0
책상 위치 매핑 솔루션에서 작업하고 있습니다.이미지의 위치 매핑
목적은 워크 스테이션 상태를 표시하도록 조작 할 수있는 평면도의 설정 위치에 이미지를 배치하는 것입니다.
현재 평면도를 매핑하는 과정은 매우 길고 정리가 좋습니다.
- 나는 PDF로 찍은지도가 있습니다.
- 포드 컴퓨터 주변에 직사각형/정사각형 DIV 배치
- 포드 div 위치를 절대로 설정하고 WIDTH, HEIGHT, TOP : #px, LEFT : #px로 설정하여 제자리로 이동하십시오.
- 장소 여러 포드 DIV 절대 각 워크 스테이션 사업부의 위치를 설정
- 내부 20 픽셀 DIV 년대에 의해 20 픽셀 및 설정하여 장소로 이동 : WIDTH, HEIGHT, TOP : #px, LEFT : #px.
- 는
너희들이이 일을 더 나은 방법을 알려 주시기 바랍니다 수 (데이터베이스에서 해당 워크 스테이션의 상태에 따라이 이미지 소스를 동적으로 PHP로 작성) DIV의이 책상의 각각의 이미지를 넣어 ?
이 작업을 수행하고 코드를 내보내는 데 도움이되는 프로그램이 있습니까? 나는 이것을 완전히 잘못된 방향으로 가고 있습니까?
나는 벡터 이미지를 찍어 그래픽 프로그램에 매핑 한 다음 웹 사이트로 이동하는 방법을 들어 보았습니까?
CSS :
/*MAP POSITION*/
#map {height: 521px; width: 900px; position: relative;}
/*POD POSITION*/
#deskGroup01-01{width:235px; height:120px; position: absolute; left:8.5em; top: 4.5em; }
/*WKS POSITIONS*/
#dg1Wks01-001{width:20px; height:20px; position: absolute;left:1em; top: 1.5em;}
#dg1Wks01-002{width:20px; height:20px; position: absolute;left:4.5em; top: 6em;}
#dg1Wks01-003{width:20px; height:20px; position: absolute;left:7.5em; top: 7.6em;}
#dg1Wks01-004{width:20px; height:20px; position: absolute;left:14em; top: 7.5em;}
#dg1Wks01-005{width:20px; height:20px; position: absolute;left:17em; top: 6em;}
#dg1Wks01-006{width:20px; height:20px; position: absolute;left:19.9em; top: 1.4em;}
#dg1Wks01-007{width:20px; height:20px; position: absolute;left:13.6em; top: 1.2em;}
#dg1Wks01-008{width:20px; height:20px; position: absolute;left:10.5em; top: 2.5em;}
#dg1Wks01-009{width:20px; height:20px; position: absolute;left:7.8em; top: 1.2em;}
HTML : 내가 갈 수있는 가장 좋은 방법 아이콘을 사용하는 대신 색상 강조로 이미지 매핑을 사용하지 않는 것입니다을 결정
<div id="map">
<img src="images/imagemap.png" border="0" width="900" height="520" usemap="map" />
<!-- Desk Grouping 1 -->
<div id="deskGroup01-01">
<div id="dg2Wks01-001">
<img id="01-001" class="trigger" src="<?php select_icon($deskno, $location); ?>" alt="01-001" title="01-001">
</div>
</div><!-- end Desk Grouping 1 -->
</div><!-- end lvlmap -->