IE 에서는 잘 되는데 크롬 등등에선, 이미지 맵으로 된 링크 작동이 이상..

코드는 아래와 같구요..

작동은 leftMenu 나 rightMenu 상의 img 위에 마우스가 올려지면, centerVisual의 이미지가 바뀌는 겁니다.

centerVisual 에 올려지는 이미지에는 이미지맵 세팅되고, 각각 링크가 걸려 있어요.

top 영역 밖으로 마우스가 이동하면 기본 이미지가 centerVisual 에 세팅됩니다.

그런데, IE 에서는 제대로 동작을 하는데..

크롬이나 사파리, 파이어폭스에선, 이미지맵에 마우스 커서가 올려질 때 centerVisual 에 기본 이미지가 세팅됩니다.

고민 고민하다 보니.. 이미지맵에 마우스가 올려지면 top 영역이 아닌 것으로 인식한다..

그러고 보니 map 들은 top 밖에 있네요.. top 밖에 있는 map 들을 top 안에 넣으니까 크롬 등에서도 정상 작동..

이것이 IE 의 미덕인지.. ㅠ.

<div class="top">

  <div class="leftMenu">

    <ul>

      <li><a class="tooltip01"><img src="imgA.gif" alt="" /></a></li>

      <li><a class="tooltip02"><img src="imgA1.gif" alt="" /></a></li>

      <li><a class="tooltip03"><img src="imgA2.gif" alt="" /></a></li>

      <li><a class="tooltip04"><img src="imgA3" alt="" /></a></li>

    </ul>

  </div>

  <div class="centerVisual">

    <img src="imgMain.gif" alt="메인 비주얼" />

  </div>

  <div class="rightMenu">

    <ul>

      <li><a class="tooltip05"><img src="imgB.gif" alt="" /></a></li>

      <li><a class="tooltip06"><img src="imgB1.gif" alt="" /></a></li>

      <li><a class="tooltip07"><img src="imgB2" alt="" /></a></li>

    </ul>

  </div>

</div>

<map name="map1">

  <area shape="rect" coords="79,268,162,288" href=".." target="_self" alt="" />

  <area shape="rect" coords="248,268,332,288" href=".." target="_self" alt="" />

  <area shape="rect" coords="420,268,501,288" href=".." target="_self" alt="" />

</map>

..중간생략..

<map name="map7">

  <area shape="rect" coords="43,258,135,281" href=".." target="_self" alt="" />

  <area shape="rect" coords="138,257,216,281" href=".." target="_self" alt="" />

</map>

<script>

    $(".top ul > li > a > img").mouseenter(function() {

      $(".top ul > li > a > img").each(function() {

        $(this).attr("src", $(this).attr("src").replace("on", "off")); // leftMenu 와 rightMenu 상의 이미지를 Off 세팅

      });

      $(this).attr("src", $(this).attr("src").replace("off", "on"));; // leftMenu 와 rightMenu 에서 현재 마우스가 올려진 이미지만 On 세팅

      var firstNum = path.substr(path.length -10, 1);     // num 을 뽑아내기 위해 세팅

      var secondNum = path.substr(path.length -8, 1); // num 을 뽑아내기 위해 세팅

      var num = (firstNum -1) *4 +(secondNum *1);

      $(".centerVisual > img")

        .attr("src", "/images/mainVisual1_" + num +".gif") // centerVisual 이미지 변경

        .attr("usemap", "#map" + num);                          // 변경된 centerVisual 이미지에 이미지맵 세팅

    });

    $('.top').mouseleave(function() {

      $('.centerVisual > img').attr('src', '/kr/images/tee/neo/mainVisual1_basis.gif'); // 중앙이미지 초기화

      $('.top li img').each(function(){ this.src = this.src.replace("on", "off"); });          // leftMenu 와 rightMenu 이미지 모두 Off 세팅

    });

</script>