안녕하세요! 멜랑콜리한 대학생입니다!
제가 요즘 보드게임에 빠져서, 웹 보드게임을 만들어서 서비스 해보고 싶어서 공부하고 있는데,
이런 형태의 지도가 있으면, 각각의 지역을 선택하면 해당 로비로 이동하는것을 해보려고 하거든요..
[Map.png 배경이 될 바닥 이미지. 아무런 기능도 없음]
해서 이렇게 그렸는데, 저 가운데 있는 건물은 따로 '투명 레이어' 위에 그린거고, png 파일로 저장했어요.
[Bang.png, 배경의 검은색은 원래 투명이예요. ]
해서 이미지 두개는 img src로 불러오고, style:position:absolute; z-index 값을 주면 겹레이어로 쌓을 수 있다고 하더라구요.
<div id="bG" Style="position:absolute; z-index=99;"> // 가장 바닥이 되는 맵 이미지. 아무런 기능도 없음.
</div>
<div id="Bang" Style="position:absolute; z-index=10";> // 배경 이미지 위에 얹혀질 건물 이미지. 클릭하면 게임 로비로 이동.
<img src="Bang.png" onclick="goBangLobby()" onMouseOver="imgEvent()">
</div>
이런식으로 했는데, 클릭하면 제일 위에 있는 이미지(Bang.png) 어느곳을 클릭해도 페이지가 넘어가버리더라구요...
ㅠ_ㅠ
누가 png로 투명이미지로 만들어서 그리면 그린 부분만 클릭 된다고 해서 마우스로 열심히 그린건데..
아무리 검색해도 저 건물만 클릭해서 이동하는 방법은 잘 안나오는데, 조언 부탁드립니다 ㅠㅠ
글쓰기