usemap 사용시 크롬에서 작동하지 않는다면..?

아래 코드를 MS 사의 인터넷익스플로러(Internet Explorer, IE) 에서 실행하면 잘 실행됩니다.

그런데, Google 사의 크롬(Chrome) 에서 실행하면..? 작동하지 않습니다.

<img src="..." usemap="#idMap">

<map name="nameMap" id="idMap">

 <area ... href="..." target="..." />

</map>

아래 코드와 같이, 대체로는 map 의 name 과 id 를 동일한 명칭으로 세팅하는데..

누군가가 이걸 다르게 세팅해서 우연치 않게 발견했네요. ~.

<img src="..." usemap="#Map1">

<map name="Map1" id="Map1">

 <area ... href="..." target="..." />

</map>

어떻게 보면 usemap 에서 '#' 을 사용하기 때문에 map 태그의 id 에 기재된 "idMap" 이 작동할 것같지만,

usemap="#nameMap" 과 같이 해야 map 태그 하위 태그인 area 의 href 에 기술된 내용이 작동합니다.

이것이 조금 이상하다구요..? jquery 등의 툴을 사용하는 경우, id 에 '#' 을 class 에 '.' 를 사용하는 CSS Selector 를 생각하겠지만..

HTML 초창기 부터 정해져온 규약을 그냥 무시할 수는 없는 거죠.

이를테면, <a name="nameA"></a> 가 열리게 하기 위해 <a href="#nameA">...</a> 를 사용하는 것과 같은 겁니다.

그래서 사실은 map 에는 id 를 부여할 필요가 없이 그냥 name 만 기술하면 되는 거에요. (아래 내용 참조)

어느새인가 부터 id 를 기술하기 시작하던데, 스펙상 필요하지는 않다는 거죠.

<img src="..." usemap="#Map1">

<map name="Map1">

 <area ... href="..." target="..." />

</map>

.Fine.