viviのホームページ作成奮闘記

本広告は、一定期間更新の無いブログにのみ表示されます。
ブログ更新が行われると本広告は非表示となります。

  

http://www.takumitaniguchi.com/


http://egao-saku.com/


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

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

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

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

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

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」とつけます。
１）●●_on.gif
２）●●_off.gif

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


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

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