[문의] usemap처럼 좌표를 이용한 탭 이동 문의

안녕하세요

아래 테이블에서 1번 상자를 클릭하면 1번 탭으로 이동하고, 2번 상자를 클릭하면 2번 탭으로 이동하는

방법으로 탭을 만들고 싶어서 문의드렸습니다. 

1번	2번
3번	4번

 

 

아래가 테이블 탭 소스구요

 

<table border="1"><tbody><tr><td>1번</td><td>2번</td></tr><tr><td>3번</td><td>4번</td></tr></tbody></table>

 

그림파일에서처럼 usemap 명령을 이용하여 좌표로 이용한 직사각형 박스 설정 형식으로 하고 싶습니다.

 

아래와 비슷한 형식으로 만들고 싶습니다. 

<img src "그림파일" usemap="#90q"></p><div data-inven-tabs=""><map name="90q">
<area title="1번" shape="rect" coords="1,1,130,38" data-inven-tab-for="tab_1">
<area title="2번" shape="rect" coords="143,1,282,38" data-inven-tab-for="tab_2">
<area title="3번" shape="rect" coords="1,1,433,38" data-inven-tab-for="tab_3">

<area title="4번" shape="rect" coords="295,1,433,38" data-inven-tab-for="tab_4">

</map></div>

<div data-inven-tab-id="tab_1"> 1번 탭 내용

...

 

 

 

 

가능한지 여부와, 가능하다면 소스도 부탁드립니다