제이쿼리와 자바스크립트를 이용해 마우스 오버시 변경하는 소스

마우스를 올렸을 때 이미지 변하는 스크립트

1) 자바스크립트를 이용하는 방법

- 스크립트 부분 - 

<script type="text/javascript">
function regional_map_on(local){
    document.getElementById('regional_map').src='/img/guide_map_'+local+'.gif'
}
function regional_map(){
    document.getElementById("regional_map").src = "./img/guide_map_bg.gif";
}
</script>

<img src="img/guide_map_bg.gif" width="390" height="310" usemap="#Map" border="0" id="regional_map"/>
                <map name="Map" id="Map">
                <area shape="poly" coords="230,108,222,130,239,165,252,166,258,142,259,129,252,105,246,96,233,100" href="#" alt="영덕" onmouseover="regional_map_on('yd');" onmouseout="regional_map();" />

장점 : 스크립트 코드가 간편하다.

단점 : 각 html 부분에 온마우스오버, 온마우스아웃을 넣어줘야 한다.

2) 제이쿼리를 이용하는 방법

- 스크립트 부분 - 

<script type="text/javascript">
$(document).ready(function(){
        $("#loc_ul").hover(function(){
            $('#regional_map').attr("src",'img/guide_map_ul.gif')
        }, function(){
            $('#regional_map').attr("src",'img/guide_map_bg.gif')
        });
    });

</script>

- html 부분 -

<img src="img/guide_map_bg.gif" width="390" height="310" usemap="#Map" border="0" id="regional_map"/>
                <map name="Map" id="Map">
                  <area shape="poly" coords="321,71,356,77,373,57,358,34,317,39" href="#" alt="울릉" id="loc_ul"/>

장점 : html 코드에는 단순히 id 값만 넣어주면 된다.

단점 : 어차피 조삼모사다. 제이쿼리 부분에 각 아이디값에 적용되는 코드를 다 집어넣어줘야 한다.

※ 소스 다운로드

map.zip