東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

デザイン事務所ダウンアンダー

営業
10:00-
19:00

透過pngテスト

     2012/01/09   技術ノート   , ,  野村貞次

背景画像

人物画像(元)

人物画像(切り抜き)

Divに背景画像を指定し、人物画像(切り抜き)を配置したもの

Divに背景画像を指定し、人物画像(切り抜き)を配置しclassにiepngfixを指定したもの

IE7以下では透過pngを正しく扱えないため、js、htc等を使用しなければなりません。
ここではiepingfix.htcを使用しています。

htcは絶対パスで読み込まないと正しく動作しないため、WordPressではヘッダファイル(header.php)にスタイル指定しています。

  • <style type=”text/css”>
  • <!–
  • .iepngfix {
  • behavior: url(“<?php bloginfo(‘template_url’); ?>/iepngfix.htc”);
  • }
  • –>
  • </style>

CSSファイルで指定しないのは、<?php bloginfo(‘template_url’); ?>を決め打ちしなければならなくなるためです。

なお、こちらで入手できるiepngfix.htcはblank.gifの読み込みに問題が発生するようです。
各人、blank.gif(1px×1pxの透明GIF)を用意してください。

上記対策では、透明GIFをサイト毎に書き換えなければなりません。
これは面倒なので、iepngfix.htcを修正しました。

修正箇所は14行目の

  • var blankImg = ‘http://www.isella.com/aod2/images/blank.gif’;

です。これを

  • var str = document.URLUnencoded ;
  • var blankImg = str.replace(/(.*\/).*/,”$1″) + “blank.gif” ;

とします。

何をやっているかというと、

  • iepngfix.htcへのURLを取得してstrに代入。
  • strから正規表現とreplace関数を使ってファイル名を取り除き、blank.gifを連結。

strに当該ファイルのURLを入れて・・というところまでは最初から思いついたのですが、

  • var str = location.href ;

とやると、うまく動作しません。

これはHTC内のJavaScriptのクセというか方言のようなものなのかしら?
ここで解決方法を見つけました。

当然、iepngfix.htcと同じディレクトリにblank.gifを設置してください。

     2012/01/09   技術ノート   , ,  野村貞次

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

 こちらの記事も読んで見ましょう

透過pngテスト 東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー,2010 All Rights Reserved.

ページ先頭へ