UL 을 이용한 Rollover Button


Home > Document > Web design > Menu > Button > UL, LI rollover

list-style-type 을 이용한 Rollover Button

Rollover 란 뒤집히다, 바뀌다 라는 뜻을 가진 숙어로, Rollover button은 형태가 어떻게 바뀌건 cursor가 올라갔을 때 변화가 생기는 button 을 말합니다. 그 유명한 Beatles 의 노래 제목 중에 'Roll over Beethoven' 곡이 있는데, 서양 사람들이 악성이라고 부르는 베토벤을 뒤집어 엎자고 했으니 비난도 만만치 않았겠죠. 하지만 필요하다면 과감하게 뒤집을 건 뒤집어야 되겠죠... 자 그럼 본론으로 들어가서, 우선 간단한 Rollover를 list-style-type을 이용해서 만들어 보겠습니다. 아래와 같은 효과를 내는 button 부터...

예제 1 list-style-type을 이용한 Rollover button 예제 source
<html>
<head>
<title>list-style-type을 이용한 Rollover button</title>

    <script type="text/javascript">
    <!--
    function over(obj){
    obj.className = "disc"
    }
    
    function out(obj){
    obj.className = "none"
    }
    // -->
    </script>

    <style type="text/css">
    <!-- 
    A {text-decoration: none; color:#0000cd; } 
    A:hover {text-decoration: underline; color:#ff6347;}
     // color를 바꿔서 변화를 주거나 모양을 disc에서 square로 바꿔줘도 좋겠죠?
    .disc{list-style-type:disc;color:brown}
    .none{list-style-type:none;}
    -->
    </style>

</head>
<body>
    <ul>
        <li class="none" onmouseover="over(this)" onmouseout="out(this)">
            <a href="#">Item 1</a>
        </li>
        <li class="none" onmouseover="over(this)" onmouseout="out(this)">
            <a href="#">Item 2</a>
        </li>
        <li class="none" onmouseover="over(this)" onmouseout="out(this)">
            <a href="#">Item 3</a>
        </li>
    </ul>
</body>
</html>
코드 실행 하기



list-style-image를 이용한 Rollover button

앞의 Rollover button은 단순히 list-style-type 만으로 만들어 본 Rollover button 이지만 나름대로 효과를 볼 수 있습니다. 꼭 복잡해야 좋은 효과를 내는 것은 아니니까요. 그럼 이번에는 list-style-image 를 이용한 Rollover button을 만들어 보도록 하겠습니다. list-style-image의 장점이라면 list-style-type이 정해진 모양 만을 사용해야 되는 반면 list-style-image는 자신이 원하는 모양을 넣을 수 있다라는 거죠. 이 예제에 사용할 image는 ( red_arrow (1K) ) 가 되시겠습니다. 그림 위를 우클릭 후 '다른 이름으로 그림 저장'을 선택해서 저장하시져. Image 크기가 넘 작아서 잘 안보이져?...^^ 그래~서 준비한 확대 image(사실은 table로 만들었습니다.)가 아래의 그림 입니다. 빨간색 이외 부분은 gif98a format으로 투명하게 처리된 image 입니다. width:3px, height:10px 로 위의 투명하게 비어있는 부분은 list-style-image 의 위치와 list-item 의 행 간격 때문에 의도적으로 만든 부분입니다.

     
     
     
     
     
     
     
     
     
     


예제 2 list-style-image를 이용한 Rollover button 예제
<html>
<head>
<title>list-style-image를 이용한 Rollover button</title>
    <script type="text/javascript">
    <!--
    function listOn(obj){
    obj.className = "on"
    }
    
    function listOff(obj){
    obj.className = "off"
    }
    // -->
    </script>
    <style type="text/css">
    <!-- 
    li.on{list-style-type:none;list-style-image:url(images/red_arrow.gif);}
    li.off{list-style-type:none; list-style-image:none;}
    -->
    </style>
</head>
<body>
    <ul>
        <li class="off" onmouseover="listOn(this);" onmouseout="listOff(this);">
            <a href="#">Link 1</a>
        </li>
        <li class="off" onmouseover="listOn(this);" onmouseout="listOff(this);">
            <a href="#">Link 2</a>
        </li>
        <li class="off" onmouseover="listOn(this);" onmouseout="listOff(this);">
            <a href="#">Link 3</a>
        </li>
    </ul>
</body>
</html>
코드 실행 하기

이와 같이 간단한 Rollover button을 만들어 보았고, image file의 경로는 편의상 이 사이트의 경로 위주로 링크를 걸었으므로 여러 회원님들이 실험하실 때는 각자가 알아서 경로를 설정하시기 바랍니다.




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색