image :area] css 적용을 해봤습니다.

1)
<area 의 성질을 이용해서 stylesheet 를 적용해봤습니다.
style 값을 조정하는 것이 아닌, class name 을 javascript 로 조정하도록 했죠.

2)

<img width=200 height=200 usemap=#map131104_1 />

<map name=map131104_1 id=map131104_1>
<area id=area1 name=area1 shape=rect coords="0,100,100,0" class=c1
onmouseover="(event.relatedTarget||event.toElement).className='c1 c2'";
onmouseout="(event.relatedTarget||event.toElement).className=''"; />
</map>

<style>
img:hover { background-color:blue; }
/* area tag not act in IE8 */

#area1:hover { background-color:red; }

.c1 { background-color:green; }

.c2 { width:300px; }

</style>

-- 새 창에 샘플 보여주기.. --

3)

..

4)
편집화면에서는 area 가 어디를 표시하는지 잘(?) 보입니다만,
일단, 4개 정사각형으로 분할했다고 할 때, 좌측윗부분이 area 가 지정하는 부분입니다.

<img 위에 커서가 올라가면 파란색이고,
<area 가 지정하는 지역에 올라가면 녹색에, 좌우크기가 300px 로 늘어나고,
<area 가 지정하는 지역 밖으로 나가면 녹색과 좌우크기 지정이 해제됩니다.

5)
<area 가 지정하는 element 를 css 단계에서 찾아내지는 못해서
적용할 수 있는 범위는 이정도까지인 것 같습니다.

음.. 혹시 모르겠군요. <map 과 <area 를 element 레벨로 보는거라면, 
탐색식이 적용 가능할테니까요.
(단지, parent 레벨로 다시 돌아가는 문제부분이..)

..

wantHate killofki@.

http://pba.kr