Rev. 2.73

Guillermo Rauch씨는 MooTools 자바스크립트 라이브러리와 CSS를 이용하여 재미있는 메뉴 네비게이션 효과를 만들었다. 메뉴 항목에 마우스가 이동할 때 마다 배경이미지에 시각적인 변화가 발생하며, 간단한 마크업만으로 사용할 수 있는 것이 특징이다. 이 것을 회사 프로젝트에 써먹기 위해 Prototype/Scriptaculous에서도 사용할 수 있도록 수정하였으며 사용방법은 아래와 같다.

<div id="fancymenu">
  <ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
  </ul>
</div>
new FancyMenu('fancymenu', {
  transition: Effect.Transitions.backOut,
  duration: 0.7
});


※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments

exticon.gif

CSS 2.1은 놀라운 능력을 아주 많이 갖추고 있다. Psyked는 이 것을 응용하여 좌측의 그림에 보이는 것처럼 a[href^=”http:”]와 같은 셀렉터(selector)로 'a'태그의 'hfef' 링크 속성을 분석하여 특정한 아이콘을 자동으로 추가하는 방법을 소개했다. 이 것은 매우 유용하다. 'http:' 문자열에 '$' 오퍼레이터(operator)를 추가로 사용하면 파일의 확장자 까지도 분석할 수 있게 되는 것이다. 아래의 CSS 예제를 보자. 서버단 코드나 HTML, 자바스크립트의 도움없이 처리 할 수 있다는 관점에서 효율성이 뛰어나지만, IE6은 CSS2.1을 지원하지 않기 때문에 치명적이다.


/* external link */
a[href^="http:"] {
    display : inline-block;
    padding-right : 14px;
    background : transparent url(/Images/link_icon.gif) center right no-repeat;
}

/* external link */
a[href^="mailto:"] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/mail_icon.gif) center left no-repeat;
}

/* pdf file link */
a[href$='.pdf'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(Images/pdf_Icon.gif) center left no-repeat;
}

/* document file link */
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/doc_icon.gif) center left no-repeat;
}

/* compressed file link */
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/zip_Icon.gif) center left no-repeat;
}

Comments

SasCam Webcam Server와 자바스크립트로 스트리밍 웹캠을 구현해 보았습니다. SasCam Webcam Server는 무료로 제공되는 웹캠 서버 프로그램입니다. 이 서버는 캠에 잡힌 화면을 하나의 jpg파일에 저장하고 지속적으로 업데이트하는 역할을 합니다. 플래시기반 웹캠 뷰어는 저장된 jpg파일을 계속해서 불러오는 구조로 만들어져 있더군요. 사실, 플레이어가 너무나도 허접스러워서 자바스크립트로 만들어 본 것입니다.

자바스크립트 플레이어 역시 허접스러운 것은 마찬가지입니다. SasCam Webcam Server가 업데이트 한 이미지를 계속 리로드하여 마치 동영상인 것처럼 속이는 꼼수입니다. 좌측 영상은 창문 밖에 심어놓은 배달 확인용 웹캠 화면입니다. 금일 24시간 방영(?)할 예정이니 많은 시청 바랍니다(;) 마우스 클릭으로 재생할 수 있어요. 5년전에 구입한 이 웹캠은 지금까지 한번도 제대로 사용해 본 적이 없었는데, 요런 엉뚱한 용도로 쓰게 되는군요. 서버에 할당해서 저렴한 온라인 방범 솔루션 구성도 생각해 볼만 하겠습니다.

var SasVideo = Class.create();
SasVideo.prototype = {
  initialize: function(element, options) {
    this.options = Object.extend({
      serverIP  : 'http://yourwebcamserveraddress.com/', // your webcam server address
      frameRate : 2, // frameRate / seconds
      autoPlay  : false
    }, options || {});

    this.state = 'idle';
    this.frameIdx = 0;
    this.element = $(element);
    this.frame = this.element.down('img');
    this.src = 'http://' + this.options.serverIP + '/images/SaschArtCamImage.jpg';

    if (this.options.autoPlay) this.play();
    else {
      this.frame.src = this.src;
      this.frame.style.cursor = 'pointer';
      this.frame.alt = 'click to play/stop';
      Event.observe(this.frame, 'click', this.control.bindAsEventListener(this));
    }
  },
  control: function() {
    if(this.state != 'running') this.play();
    else this.state = 'stop';
  },
  play: function() {
    if (this.state == 'stop' || this.options.frameRate < 1) {
      this.state = 'idle';
      return;
    }
    if (this.state == 'idle') this.state = 'running';

    setTimeout(function() {
      var src = this.src + '?' + new Date().getTime();
      try { this.frame.src = src; } catch(e) { return; }
      if (this.frameIdx % 5 == 1) this.element.style.background = 'url(' + src + ')';
      this.frameIdx++;
      this.play(); // loop play
    }.bind(this), 1000 / this.options.frameRate);
  }
};

new SasVideo('SasVideo'); // create object

Comments