グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

JavaScript（jQuery）を使って画像をフェードさせていたところ、
フェード中のいくつかの画像に白い点々が出ているのを見つけました。
（ディスプレイのドット落ちのような・・）

調べてみたところIEのバグのようです。
いろいろな方の記事で書かれているのを見ると、
発生条件は以下のような感じ。

・JavaScript の filter:alpha(opacity); を使用
・JPEG画像を使用
・#02050a の色を使用

要するに、#02050a を含むJPEG画像をJSで透過させると、
#02050a の箇所だけが完全に透過JPEGになってしまう、
というバグのようです。IEのみ。

解決策としては

1. PNG画像などにする
2. #02050a を使わない
3. 背景色を #02050a にする

となりますが、
何故かPNG画像にしただけでは直らず・・
結局、PNG画像 ＋ #02050a の部分を別の色で塗りつぶすことで
解決しました。

ちなみにIE6の頃からあったようですが、IE8でも確認しました。。

ページ内のアンカーリンクをスムーズにスクロールさせる
JavaScriptのメモです。
ページの組み方のせいか、普段から使っているsmooth.pack.jsが思うように動作しなかったので、他の使いやすそうなJSを探してみました。

■smoothScroll.js
使い方はsmooth.pack.jsと同じで、＜head＞＜/head＞内で読み込むだけ。
動作の問題も回避できました。

スクロールの挙動が違うので好みの問題になると思いますが、
様子を見て使い分けて見ようと思います。

先日少し話題になったのでまとめてみました。
JavaScriptのバージョンについてです。

実は自分はあまり気にしたことがなかったんですが、JavaScriptにもちゃんとバージョンがあります。
（自分でコードを書いたりしないので、あまり意識していなかった・・。）

JavaScriptのバージョンが新しいからといって、古い機能がなくなるということはほとんどないそうです。


普段使うように、
<script language="javascript" src="aaa.js" ></script>
と書く分には、特にバージョンを気にする必要はないですしね。

ですが、実際はブラウザごとにサポートしているバージョンは異なっていて、
それよりも新しいバージョンの機能を使うとエラーが出てしまいます。


先ほどのタグの「 language="javascript" 」の部分、ここにバージョンを書くことで、
それより新しい機能を無視することができます。

（例）<script language="javascript1.5" src="aaa.js" ></script>

エラーが出ないように書いておくといいかもしれません。


ブラウザごとの対応バージョンはこちら、DIASPARさんのところでまとめられています。
参考にさせていただきました。

lightboxを使って画像をポップアップさせたとき、エリアの外はデフォルトでは半透明の黒が敷かれるのですが、そこを変えてみました。

カラーは、lightbox.css内にある「 #overlay 」の背景色を変更することで変えることができます。

同じようにして、不透明度も変えられるだろうと思ったのですが・・
どうやら、ここでは設定できないようです。

不透明度のほうは、lightbox.jsの320行目にある

new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

最後の to: の部分で設定できました。
この場合は0.8なので不透明度80%です。