ハナモゲラボ　/　試行錯誤のPC人生

読み込ませておけば何かと便利なJQuery。
使い勝手が良すぎてホント重宝しております。

今回はマウスオーバーでフェード効果を使うやり方。
どっかで見て習得したものの、ひさしぶりにこれをやろうと思ったら
案の定ど忘れしてたんで覚え書きとして書いておく。

まずJQueryを読み込ませておいてから、下記のスクリプトを書く。

$(document).ready(function(){
$("img.jquery-hover").fadeTo(0,1.0);
$("img.jquery-hover").hover(function(){
        $(this).fadeTo(300,0.8);
    },
    function(){
        $(this).fadeTo(300,1.0);
    });
});

適当な名前でjsファイルとして保存して、またlinkタグで読み込ませよう。

ちなみにfadeTo(speed, opacity, callback)というプロパティになってます。
speed ： フェードの速度。"slow", "normal", "fast" の文字列か、ミリ秒を数値で指定。
opacity ： 不透明度。0 ～ 1 で指定。この不透明度になるまで、フェードします。
callback ： フェードが終了した後に実行されるコールバック関数。（オプション）
今回は不透明度を1~0.8まで300ミリ秒かけて操作するという設定です。

で、imgタグにclass名「jquery-hover」を足してやれば完成。
なんてお手軽。

#


pタグで囲んで背景色ひいてあげるとその色が透けます。
グラデーション画像ひいてもおもしろいかもです。

あるサイト（PC+携帯サイト）を作っていた時に
「更新1回で済ませたいのでお知らせページをPCと携帯で共用で」
という事がありました。

さて、携帯ではPCサイトはそのまま表示できぬ。
外部CSSで装飾すりゃいーっか、と思ってもDocomoの仕様が・・
（Docomoは外部CSS読み込みができない）
って事は限りなくインラインCSSで装飾した携帯ページを使うしかないか・・
それでも、PCで見たらやっぱり限界があるぞ・・・

そうだ。外部ウィンドウ使って小さく表示させよう。
今ならJavascriptのライブラリがあるのでそれでいけるか！
あ・・・・「閉じる」リンクを作っても携帯では・・・・
んじゃ、携帯用に「トップへ戻る」リンクを追加してっと。
んあああ、でもPCの小さいウィンドウで開いたそのページの
「トップへ戻る」リンクをクリックしてまうとエライ事になるぞっ。

携帯で表示させて、PCで表示させない・・・
携帯で表示させて、PCで表示させない・・・
携帯で表示させて、PCで表示させない・・・

あ

携帯はすべてJavascript非対応だな！

function insertCloseBtn(){document.write
('<a href="javascript:window.close()">閉じる</a>');

こういうjsファイルを書いて、close.jsで保存。
HTMLで

<script type="text/javascript" src="../js/close.js">
コンテンツ～～～～～～～～～
<script type="text/javascript">
<!--
insertCloseBtn();
//-->
</script>
<noscript>
<a href="/mb/index.html">トップページへ</a>
</noscript>

これでスクリプトオンのPCなら「閉じる」だけ表示されて
Javascriptに対応していない携帯電話は「閉じる」がスルーされて
noscriptタグの中身の「トップページへ」が表示される結果になりました。

しかし、携帯電話がJavascriptに対応すると一気にダメになりますが。

※2010/2/5 追記
i-modeブラウザ2.0が2009年5月に発表されてますが
javascript対応となっており、この方法は使えなくなっています。
外部CSSとかPDFにも対応しましたが・・・・
というか、なんでいきなり突出しますかドコモさん・・・・