「sIFR 3」のベータがリリース
以前紹介したFlashとCSS,javascriptを組み合わせてアンチエイリアスなテキストを表示させるためのライブラリ「sIFR」のバージョン3のベータがリリースされたみたいです。以前の記事は「sIFRとアイディアマンズ」
複数のバグフィックス、Flashの改善、対応ブラウザの追加などなかなかパワフルになっています。今後アンチエイリアステキスト表示がデフォルトのブラウザも増えてくるとは思いますが、テキスト中心のサイトでこのような形での表現もいいかもしれません。
ちなみに、デモも更新されてました。ここから表示できます。
透過PNGを利用する方法
透過PNGをIE6以下でも利用する方法が紹介されてました。今までは透過PNGを利用をするのは少なかったですが中々使えそうです。
結論を言っちゃうと、javascriptを利用してIEの該当バージョンであった場合に、IE特有のDXImageTransform.Microsoft.AlphaImageLoaderのプロパティーの設定されているspan等で囲った状態に入れ替えてあげると言うものです。参照先で紹介されているjavascriptは「ここ」にあります。
通常IEだと以下のように表示されます。分かりやすいように外側の要素に水色を背景色として入れてみました。
んで、javascriptを利用するとこんな感じになる。
ソースみてみましたが、ちょっと自分的な物に(mootoolsの機能をチョロっと使ってる)更新してみました。よければどうぞ。普通は上記のjavascriptの方が良いと思われます。
- var transpng = {
- init: function() {
- var browser = navigator.appVersion.split(“MSIE“);
- var version = parseFloat(browser[1]);
- if ((version >= 5.5) && (document.body.filters)) {
- var lists = $S(‘img‘);
- var num = lists.length;
- for(var i=0; i<num; i++) {
- var img = lists[i];
- var imgName = img.src.toUpperCase();
- if (imgName && imgName.substring(imgName.length-3, imgName.length) == “PNG“ && img.src) {
- var imgID = (img.id) ? “id=’“ + img.id + “‘ “ : “”;
- var imgClass = (img.className) ? “class=’“ + img.className + “‘ “ : “”;
- var imgTitle = (img.title) ? “title=’“ + img.title + “‘ “ : “title=’“ + img.alt + “‘ “;
- var imgStyle = “display:inline-block;“ + img.style.cssText;
- if (img.align == “left“) imgStyle = “float:left;“ + imgStyle;
- if (img.align == “right“) imgStyle = “float:right;“ + imgStyle;
- if (img.parentElement.href) imgStyle = “cursor:hand;“ + imgStyle;
- var strNewHTML = ““ + imgID + imgClass + imgTitle
- + “ style=\”“ + “width:“ + img.width + “px; height:“ + img.height + “px;“ + imgStyle + “;“
- + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader“
- + “(src=\’“ + img.src + “\’, sizingMethod=’scale’);\”>“;
- img.outerHTML = strNewHTML;
- }
- }
- }
- }
- }
window.onloadなどでinitメソッドを呼んであげないと駄目なので逆に使いにくいか・・・失礼。まぁ。書いちゃったしいいや。たぶん参照先のJSの方が良いと思います(何がしたいんだオレは)。
「アクアマリンふくしま」に行って来た
ちょっと野暮用で福島県いわき市に行く機会があったので噂の(?)水族館「アクアマリンふくしま」に行って来ました。
新しい建物だというのもありましたがかなり面白かったです。展示方法も凝っていて魚が泳いでいる姿を色々な方法で閲覧することが出来るようになってました。写真はここら辺見てください。
