読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 0人
QRコード
QRCODE
タグクラウド
アクセスカウンタ

2010年11月24日

flashか???

http://www.takumitaniguchi.com/


http://egao-saku.com/


上のサイトはパッと見flashか?とおもうけど、
よく見てみるとflashではない。

最近、iPadやスマートフォンiPhoneのせいか、
JavaScriptでflashっぽいものを表現するサイトが多くなってきましたね。

html5もちらほら見えたりみえなかったり…。
制作工程も随分変わってきました。

私的にサイトの賞味期限というか、鮮度は3年〜5年。
そうなんです。3年〜5年で作り方さえ変わってしまう。
そんな感じです。

web技術の進化は早すぎです…。  

Posted by vivi at 08:58Comments(0)JavaScript

2009年03月31日

シンプルなロールオーバーの仕方

CSSのみでロールオーバーするやりかたはよくみかけますが、ちょっと高度な一面も…。
そこでJavaScriptでやるロールオーバーの方法(しかも簡単!)がありますのでご紹介します。

////////////////////////////////////////////////////////////////////////
# function smartRollover() {
# 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", smartRollover, false);
# }
# else if(window.attachEvent) {
# window.attachEvent("onload", smartRollover);
////////////////////////////////////////////////////////////////////////

上記ソースを◯◯.jsとして保存。そして、外部ファイルとして読み込ませます。

////////////////////////////////////////////////////////////////////////
#<script type="text/javascript" src="◯◯.js"></script>
////////////////////////////////////////////////////////////////////////

★画像を用意します。
通常時の画像と、ロールオーバー時の画像を別々で用意して、ファイル名の最後に「_on」「_off」とつけます。
1)●●_on.gif
2)●●_off.gif


例)<a href="/"><img src="./●●_off.gif" alt="●●●" /></a>


どうでしょう??できましたか?
複雑なコードが多いですが、これはシンプルで使いやすいです。
是非参考にしてみて下さい。

※使用に関しては自己責任でお願いします。
  

Posted by vivi at 12:44Comments(0)JavaScript