이미지 맵을 사용 할 경우 마우스 아웃 시 하위 메뉴 감추는 기능의 버그가 있어
편법으로 레이어 방식으로 이미지맵 기능을 구현함.
<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 |