3개의 배너를 돌리는 스크립트 (흑백 처리 - PC 전용)

흑백 처리 및 비정규 속성(call)을 사용하기 때문에 IE 전용입니다.

<style>

.grayscale{filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);filter:url(filters.svg#grayscale);-webkit-filter:grayscale(1)}

.abs_pos{position:absolute}

.rel_pos{position:relative}

.left_mid{cursor:pointer;left:10px;top:7px}

.center_mid{cursor:pointer;left:150px;top:0px}

.right_mid{cursor:pointer;right:10px;top:7px}

</style>

<br><br>

<div align=center>

  <div class=rel_pos style="width:600px;height:74px;border:1px solid black">

  <img name=banner id=banner1 src=/banner/cafebanner_365x90.jpg width=240 call=1 style=z-index:0 class="grayscale abs_pos left_mid" onclick=obj=this;go_front()>

  <img name=banner id=banner2 src=/banner/cafebanner_365x90.jpg width=300 call=2 style=z-index:1 class="abs_pos center_mid" onclick=obj=this;go_front()>

  <img name=banner id=banner3 src=/banner/cafebanner_365x90.jpg width=240 call=3 style=z-index:0 class="grayscale abs_pos right_mid" onclick=obj=this;go_front()>

  </div>

</div>

<script>

  var imgs=document.getElementsByName('banner')

  //imgs[0].className='abs_pos left_mid'

  //imgs[1].className='grayscale abs_pos center_mid'

  var num=0

  var obj

  var img1,img2,img3

  function set_image(){

    for(num=imgs.length;num--;){

      if(imgs[num].className=='grayscale abs_pos left_mid'){

        img0=imgs[num]

      }

      else if(imgs[num].className=='abs_pos center_mid'){

        img1=imgs[num]

      }

      else{

        img2=imgs[num]

      }

    }

  }

  set_image()

  function go_front(){

    if(obj.className=='grayscale abs_pos left_mid' || obj.className=='abs_pos left_mid'){

      img0.style.zIndex=1

      img1.style.zIndex=0

      img0.className='abs_pos left_mid'

      img1.className='grayscale abs_pos center_mid'

      if(num++<20){

        img0.width=300*(0.8+num/100)

        img0.style.top=7-(7*num/20)

        img0.style.left=10+(140*num/20)

        img1.width=300*(1-num/100)

        img1.style.top=(7*num/20)

        img1.style.left=150+(198*num/20)

        img2.style.left=338*(1-num/20)+10

        setTimeout('go_front()',10)

      }

      else{

        img0.className='abs_pos center_mid'

        img1.className='grayscale abs_pos right_mid'

        img2.className='grayscale abs_pos left_mid'

        set_image()

      }

    }

    else if(obj.className=='abs_pos center_mid'){

      alert(obj.call)

    }

    else{

      img1.style.zIndex=0

      img2.style.zIndex=1

      img1.className='grayscale abs_pos center_mid'

      img2.className='abs_pos right_mid'

      if(num++<20){

        img0.style.left=338*(num/20)+10

        img1.width=300*(1-num/100)

        img1.style.top=(7*num/20)

        img1.style.left=150*(1-num/20)+10

        img2.width=300*(0.8+num/100)

        img2.style.top=7-(7*num/20)

        img2.style.left=348-(198*num/20)

        setTimeout('go_front()',10)

      }

      else{

        img0.className='grayscale abs_pos right_mid'

        img1.className='grayscale abs_pos left_mid'

        img2.className='abs_pos center_mid'

        set_image()

      }

    }

  }

</script>