이유는 모르지만 IE에서
이미지 맵을 사용 할 경우 마우스 아웃 시 하위 메뉴 감추는 기능의 버그가 있어
편법으로 레이어 방식으로 이미지맵 기능을 구현함.

<style>

#image_map{

width:450px;

height:400px;

background:url(http://css.flepstudio.org/images/css_image_map_1.jpg) repeat;

position:relative;

border : 1px solid red;

#image_map a{

display:block;

position:absolute;

}


#image_map a.menu{

width:100px;

height:50px;

top:340px;

border : 1px solid black;

}



#image_map a#link1{

width:430px;

height:320px;

top:10px;

left:10px;

}


#image_map a#link2{

left:10px;

}

#image_map a#link3{

left:120px;

}

#image_map a#link4{

left:230px;

}

#image_map a#link5{

left:340px;

</style>


<div id="image_map">

<a href="http://test_url" id="link1"></a>

<a href="http://test URL" id="link2" class="menu"></a>

<a href="#nogo" id="link3" class="menu"></a>

<a href="#nogo" id="link4" class="menu"></a>

<a href="#nogo" id="link5" class="menu"></a>

</div> 

 

'개발 > HTML, CSS' 카테고리의 다른 글

IMAGE MAP 대신 레이어 영역으로 링크 걸기.  (0) 2011.11.10
HTML5  (0) 2010.06.12

+ Recent posts