デキタ☆

9月から作ってきたサイトたちが、やっと今日カットオーバーを迎えました！！

http://www.oc-delivery.com
http://www.recruit.oc-delivery.coma
http://www.panic-office.jp

ホントにココまで来るのにいろいろありました…

スケジュールもタイトだけど、コンセプトから企画、デザイン、テキスト、情報・・・
今までにはありえない案件のウェイトでした。。。

出来上がってみると・・・やっぱり感慨深いですね。
この案件を通して、みんなすごく成長したと思います。
最初は正直どうなることやらって不安しかなかったけど
すごく良いものができたと思います。

ほんと・・・最初は・・・・・・・・・・・・

毎日深夜作業で、休日もなくて
それでもみんな文句ひとついわずにがんばってくれて。
すごくみんな優しくて、お互いを尊重してて･･･

心から、良いチームだな☆と思いました。

これで胸を張ってディレクターの皆さんをプレゼンに送り出してあげられるかな。

今こうしてBLOGを書きながらこの2ヶ月を思い返して。。。

目の前が涙でにじんできた。。。

ろーるおーばーとｊQuery。

最近ちょぴっとハマリ中のｊQueryについて流し読みしてたら面白いものを発見したのでメモφ(・・*)ゞ

オオチャクがダイスキな私がこっそりいつも使ってる
Javascriptのロールオーバー。
コレ、jQueryにしたらもっと楽なことが発覚。

ちなみに私がよくやるのは
画像の末尾で切り替えるタイプのスクリプト。
画像の名前を_onと_offにしておけば、オンマウスで
切り替えてくれるタイプ。
（私はアホなので、_on⇒_over　_off⇒_outで使ってます。。。）

▼rollover.js▼
function rollover() {
if(document.getElementsByTagName) {
  var images = document.getElementsByTagName("img");

  for(var i=0; i < images.length; i++) {
   if(images[i].getAttribute("src").match("_off."))
   {
    images[i].onmouseover = function() {
     this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
    }
    images[i].onmouseout = function() {
     this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
    }
   }
  }
}
}

if(window.addEventListener) {
window.addEventListener("load", rollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", rollover);
}

▼HTML▼
<a href="#" title="#"><img src="navi_1_off.gif" alt="OFF"></a>

これはめっちゃベンリで、いつも使ってたんだけど、
ｊQueryはもっとすごかった･･･

プラグインで、jQuery_Auto　というのを使うと、
オンマウス時の画像にだけ_overをつければ
指定ができちゃうらしいｗｗ

$.auto.hover = {

init: function() {
  $('IMG.Hover')
   .bind('mouseover', this.enter)
   .bind('mouseout', this.exit)
   .each(this.preload);
},

preload: function() {
  this.preloaded = new Image;
  this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_over$2");
},

enter: function() {
  this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_over$2");
},

exit: function() {
  this.src = this.src.replace(/^(.+)_over(\.[a-z]+)$/, "$1$2");
}
};

※コレは抜粋です。
　　　きちんとしたソースは、jQuery_Auto　に置いてあります☆

使い方としてはjquery.jsとjquery_auto.jsを読み込んでから、
HTMLのほうへはimgタグにclassを増やすだけ。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery_auto.js"></script>

<img src="sample.gif" alt="sample" class="Hover" />

読み込む画像はテキトウな名前をつけて、オンマウス時のものにはさらに_overを付加。
（同じ階層にないとNG）

• sample.gif
• sample_over.gif

プリロードも記述されてるから読み込みも早いし、
なんと言ってもラクだし、いうことなしです☆

やっぱりAjaxオモシロイｗ

と思ったお勉強タイムでした☆

ちなみにこれには他にもタブが作れたり
オートセレクトだったりが入ってました♪

時間見つけて試してみますーヽ(=´▽`=)ﾉ