2012-07-18 2 views
5

이미지가 있습니다 (이미지는 건물의 평면도 임). 이미지는 열리거나 예약 할 수있는 다양한 방을 포함합니다. Imagemap과 핫스팟을 사용하여 객실의 좌표를 표시하고 내가 수행해야하는 작업을 수행하기 위해 onclick 이벤트를 처리하고 있습니다. 문제는 방이 예약되면 핫스팟의 좌표를 어떻게 색칠 할 수 있습니까? 내 데이터베이스의 예약 된 객실을 추적하므로 예약 된 객실을 알면 문제가되지 않지만 문제는 핫스팟을위한 색상 속성이 없다는 것입니다. 이것에 대해 가장 좋은 방법은 무엇입니까? 자바 스크립트?이미지 맵에서 ASP 핫스팟의 색상을 지정하는 방법은 무엇입니까?

클릭 수와 기타 등등의 이미지를 교환 할 수 있지만 수백 개의 객실이 있으며 예약 된 객실/예약되지 않은 객실의 모든 가능성에 대해 많은 이미지가있는 것은 시간 낭비 일 것입니다.

답변

0

HTML5 당신은 jQuery를 말을하지 않습니다하지만 확실히 처음부터 시작하는 것보다 쉬울 것 canvas

+0

멋진 대답을하지만, 나는이 문제는 그리기가 없습니다 그것은 서버 측 클라이언트 측이 아닌가? 내 데이터베이스에 액세스 할 수 있어야합니다. 따라서 pageload에서 예약 된 객실의 색상을 지정하십시오. –

+0

아, 그러면 gdi +를 사용하면 될 것입니다. 아무도 다른 사람이 내 앞에 도착하지 않으면 아침에 예제를 게시 할 것입니다. –

2

를 통해 절차 도면을 가지고있다. jQuery 플러그인은이 작업을 수행합니다 :

http://www.outsharked.com/imagemapster/

데이터베이스 액세스 문제가 붉은 청어의 비트입니다. 페이지가로드 될 때 서버가 마크 업의 일부로 필요한 데이터를 전달할 수있는 이유는 없습니다.

<script type="application/json" id="map-data"> 
    [1,2,10,33] 
</script> 

.. 또는 형식/구조/데이터 유형이 유용합니다. script 블록을 사용할 필요가 없습니다. 숨겨진 div에 넣을 수 있습니다. 실제로는 중요하지 않습니다. JSON을 사용하지 않아도됩니다. 그런 다음 해당 데이터를 ImageMapster와 같은 입력에 사용하여 필요한 영역을 강조 표시 할 수 있습니다. 구성을 마칠 때까지 이미지를 숨기고 최종 사용자가 볼 수있는 한 서버에서로드 된 방식입니다.

마크 업에서 일부 데이터를 복용하고 ImageMapster 사용하여 이미지 맵에서 핫스팟을 설정하는 데 사용의 예 : 내가해야하는 경우

http://jsfiddle.net/jamietre/hD6bM/

+0

내 데이터베이스에 액세스하고 페이지로드시 룸 색상을 변경해야하는 것과 동일한 문제가 있다고 생각합니다.이 서버 측을 수행하는 방법은 무엇입니까? –

+0

확실히 서버 쪽에서 할 수있는 방법이 있지만 이미지를 그리기 위해 GDI + 등을 사용하여 많은 작업이 필요할 것입니다. 또한 최종 사용자는 페이지에 액세스 할 때마다 완전히 새로운 이미지를 다운로드해야하며, 이미지의 사운드는 큰 이미지가 될 수 있습니다. 한 문제를 다른 문제로 교환하십시오. 요즘 Javascript는 꽤 빠르다. 클라이언트에서이 작업을 수행 할 때 성능 문제가 발생할 것으로 예상 할 이유가 없다. 데이터베이스에 특별한 요청을 할 필요없이 페이지로드시 데이터를 JSON으로 전달하고 클라이언트가이를 사용하여 렌더링을 수행하도록 할 수 있습니다. –

+0

서버에서 전달 된 데이터를 사용하는 방법의 예를 사용하여 나의 대답을 업데이트했습니다. –