2010年09月16日

IE6で、PNGボタンのロールオーバー

IE6で、PNG画像を表示しようとした場合、ブラウザの使用上、japascriptを利用しないと表示することが出来ません。
有名どころでいうと、下記が有名と思います。
alphafilter
iepngfix


それぞれを使用しつつロールオーバーを行う場合、状況に応じてうまくいかない場合があります。
まず、alphafilter の場合
alphafilterは、上記に記載したURLを見て貰うと分かりますが、ロールオーバー対応してくれており、ロールオーバーさせたい画像に対して、class属性「btn」を記述すれば、ロールオーバーします。
ただしCSSにて、position: absolute などを利用している場合、ボタン自体が消える現象に遭遇します。

次に、iepngfix の場合
iepngfixは、PNG画像のclass属性に「iepngfix」を記述すれば、PNGが表示されますが、
デフォルトのままの場合、画像が表示されつつ×印が表示されます。
×印を回避するのに、僕の場合は、昔懐かしい、spacer.gif を読み込ませています。

この状態でロールオーバーさせれば、問題ないかと思い普段使っているロールオーバー用のjQuery(こんな感じのやつ)を読み込ませて試してみると、ロールオーバーしました。
ただし問題があって、ロールオーバーした画像に×印がついてしまいました・・・。

前述した通り、spacer.gif を読み込ませれば解決すると思いますが、設定する箇所が1ヵ所しかなく、2個目が設定できません。
ただし色々調べてみると、iepngfixの場合、HTMLソースへの直書きをすることで、ロールオーバーを可能にする方法がありました。
<img src="/images/sample.png" onmouseover="this.src='/images/sample_ov.png',IEPNGFIX.fix(this)" onmouseout="this.src='/images/sample.png',IEPNGFIX.fix(this)" class="iepngfix" alt="sample" width="100" height="100" />


今回、PNGボタンのロールオーバーの必要箇所が1ヵ所のみだったのですが、特殊な位置へ設置する必要があり、iepngfix を直書きにて対応しました。
position: absolute を記述するようなことがなければ、alphafilterが楽かもしれないですね。

そんなことより、IE6がなくなればいいのに!
posted by memo4me at 11:00 | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年09月15日

firefoxでの印刷にて、2ページ目が消える

今まで印刷用ページを作成しても遭遇することがなかったが、
1ページは表示されるが、2ページ目以降が消えてしまうという現象にあった。

IEでは問題なく表示されていても、firefoxにて起こり手詰まり状態・・・。
いろいろ調べてみると、下記を発見。
http://www.webbibo.com/stylesheet/print/overflow_ff.html

こちらのブログでは、下記のように記載されています。
この現象を調べた結果、bodyタグに指定したoverflow: auto;に原因があることが分かりました。
どうやら、この現象はMozilla Firefoxや、Netscape7.1などのMozilla Gecko系のブラウザで発生しているバグみたいです。IEやOperaでは問題なく消えずに改ページしてくれます。


同じように試してみたが、やはりうまくいかない。
仕方ないので、自分のソースをさらに解析してみるとbodyタグには、overflow を使用していないが、
レイアウト部分にて clearfix を利用していた。
これが原因だった模様。

clearfixの詳細は、この辺を。
http://blog.d-spica.com/entry/070307clearfix.html

要するに、overflowを指定しているタグが、同一ページから次のページへまたいでしまう場合に、消えてしまう。
clearfixを使っていても、同一ページ内に収まっている場合は、問題なく印刷されました。

これで結構体力が奪われた気がするな・・・。
posted by memo4me at 00:33 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2010年09月09日

Google Instantを試してみました

米Googleが、「Google Instant」を発表したので、早速試してみました。
まだ日本には導入されていない為、米Googleへアクセスにて実験。

文字を入力している最中から検索結果が表示される!
日本のGoogleでもそうですが、「g」と入力するとサジェストで一番上にくるのは、
「Google Map」になっており、「g」と入力するだけで、Google Mapについて検索され、結果が表示されます。

いろいろなワード試したけど、サジェストが表示される限り、サジェストの上位にあるワードで検索を行い、結果を表示するようですね。

じゃあ逆にサジェストがない場合はどうなるのか?と思い試してみると、
入力している文字にて、自動的に検索をしてくれるようです。
わざわざ検索ボタンを押さないで、結果を返してくれるので、わずかな時間短縮が出来るので効率的です。

動画を見つけたので、張っておきます。


ちょっと思ったのが、今後日本にも導入されたとしてユーザーの行動はどうなるんだろうか。
自分自身が使ってみた印象として、文字を入力して自動的に結果が出る為、目に入った結果が自分の望んでいるものでない場合、
第2ワード、第3ワードと入力してしまったので、今までよりも次ページへ行かなくなるように感じました。
そうなると今以上に、上位表示が必須になってくる気がします。
なので、上位表示が必須のサイトは、SEO対策をちゃんと行う必要が出てくるということになりますね。

便利になる分、頑張れということか。
posted by memo4me at 13:41 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。