CSS로 요런거 가능할까요?

· 12년 전 · 2591 · 16
 
 

 

위에 있는 도형들이 에디터로 올리니까 좀 깨지기는 하는데..
 
기본적인 도형들은 css 로 그릴 수 있더라구요..
 
다각형 영역을 css 로 롤오버 할 수 있는 방법이 없을까요? ; background-position 요런거 이용해서요..
 
사각형의 경우는 가능한데 원이나 다각형도 혹시 가능할까 해서요..
 
구글링으로 여러가지 방식을 찾아봤는데 영 쓸만한게 없네요 ㅠ.ㅠ
 
 
 
예를들면 요런식으로 해당 대륙에 마우스를 올리면 활성화 이미지가 나오는 방식이구요..
 
다각형 좌표는 138,67,55,197,364,284,508,194,319,224,304,56,301,56 요런식으로 되어있다고 할때
 
각 지역별로 이미지를 만들어서 롤오버 하는게 아니라
 
기본이미지 한장과 오버시의 이미지 한장.. 이렇게 두 장으로
 
다각형 좌표를 잡아서 각 부분별 롤오버를 구현할 방법이 없을까요?
 
굳이 css 가 아니라도 혹시 비스무레한거 보신분 계시면 신고 좀 부탁드립니다~ (_ _)
 
 
|

댓글 16개

좌표로 제작을 해서 형태가 바뀌면 어떻하죠.. ㄷㄷㄷ
형태가 바뀌면 영역을 다시 따면 됩니다 ㅋㅋ
사각형은 background-position 을 이용해서 처리가 가능한데
원이나 다각형 이런애들은 처리가 힘들어서요 ㅠㅠ
http://mygony.com/archives/1971
맞으려나 모르겟는데 요고 한번 참고해보심이..ㅎㅎ
좀 복잡한 형태의 다각형도 나올 수 있고
단순히 그리는게 아니라 해당 좌표의 롤오버 영역에 정확히 보여져야 해서
이 방법으로는 좀 힘들듯 싶네요 ㅠ.ㅠ
@-@ 화이팅!
넹 감사요 ㅠ.ㅠ
제가 근무끝나고 잘된 예제하나 드립죠. 제 초수퍼개인울트라북에 있어서요.
으으으으 완죤 기대됨요..
구글의 바다에 빠져서 익사하기 직전이었어요 ㅠ.ㅠ
역쉬 천재 묵공님!!!
저도 북마크의 바다를 찾아드리미러야하네요. ㅠㅠ
고런식의 맵 구현을 뭐라 하던데 기억이 나지 않네요?
ㅎㅎv
저도 이름은 잘.. ㅠㅠ
rollover polygon imagemap 뭐 이런걸로 찾았었는뎅 ;
css는 아니지만..
http://raphaeljs.com/ 이런거요?
라파엘도 좀 봤었는데
요건 벡터형태로 그냥 그려주는것 같더라구요..
제가 찾는건 이미지에서 특정 좌표영역만 보여주는걸 찾는거라 ㅠ.ㅠ
복잡한 도형의 경우 csv가 갑 입니다.(지도등에서 많이 사용중이죠 ㅎㅎ)

10년전이라면 테이블로 그리드 100개 짜리 도트를 찍었을지도.... ㅋㅋㅋ (농담)
csv 가 엑셀처럼 데이타 저장하는 방식 아닌가요? -_-
혹시 이미지에서 특정영역만 출력하는거면 링크 좀 부탁드립니당
cvs 입니다.
헛갈렸네요 ㅋㅋ

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기
🐛 버그신고