画像

ASCII.jpさんで

◆Web制作会社が作った！超使えるJavaScriptライブラリ

の記事でミツエーリンクスさんがつくった「MJL（MITSUE-LINKS JavaScript Library）」が紹介されてた。

こんど使ってみようと思い引用メモ。

特徴

「必要最小限」の機能のみ実装

MJLは「必要最小限」と判断された、次の6機能を実装しています。

• 画像のロールオーバー
• Adobe Flashオブジェクト埋め込みの機能拡張
• 新規ウインドウの作成
• スタイルスイッチャの実装
• タブインターフェイスの実装
• 要素の高さ揃え

他ライブラリ非依存＆共存・併用可能

MJLは他ライブラリに一切依存しません。
また、他ライブラリとの共存・併用が可能になっています。

一般的な特徴

次の特徴も持っています。

• クロスプラットフォーム（Mozilla Firefox、Apple Safari、Opera、Internet Explorerのサポート）
• 他ライブラリ非依存
• 他ライブラリとバッティングしない名前空間
• 生成コード・内部利用仕様のWeb標準準拠

…続きを読む >>

Popularity: 20% [?]

CSSの指定だけで透過PNG画像をIE６で適用できる情報が、CSS TIPSさんで掲載されていたので引用メモ。

透過pngは便利な機能なのですが、IE6が対応していない為、通常のやり方では使用できません。

IE6とその他のモダンブラウザで透過pngを表示する方法は以下のようになります

記述するcssコード

div.alpha{
	width:100px;
	height:200px;
	background:url("alpha.png");
}
* html div.alpha{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}

div.alphaの記述はすべてのブラウザに対して適応されます。

その後にスターハックを使用して透過pngをサポートしていないＩＥ６のみに適応するスタイルを記述します。（ＩＥの独自拡張フィルタを使用しています）

これでほぼすべてのモダンブラウザで透過pngを表示する事ができます。

実際のサンプルなどはCSS TIPSさんのページに掲載されてます。

またヨモツネットさんにも、CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にするの記事ですごい詳しく書かれてあります。

…続きを読む >>

Popularity: 20% [?]

通常、IE6以下では透過PNGは使えなくて、透明度を設定した部分はグレーで表示されてしまう。IE独自のフィルター機能は意外とめんどー。そこで、IE6で透過PNGを使えるようになるにｊQueryのライブラリがあります。
ｊQueryを使ってる時は導入しやすいですね。
下記２つは名前ほぼ同じだけど、違う種類みたいです。

• jquery.pngfix.js（要jquery.js）
• jquery.pngFix.js（要jquery.js）

…続きを読む >>

Popularity: 87% [?]

通常、IE6以下では透過PNGは使えなくて、透明度を設定した部分はグレーで表示されてしまう。IE独自のフィルター機能は意外とめんどー。
そこで、IE6で透過PNGを使えるようになるにJavascriptのライブラリがあります。

• iepngfix.js
• alphafilter.js
• Unit PNG Fix

内容は以下です。

…続きを読む >>

Popularity: 52% [?]

画像編集アプリといえばPhotoshopですが、高機能は必要なくて、簡単な画像加工をサクサクっと編集したいときにおすすめなオンラインツールです。
インストールしないでブラウザで画像加工できるから超カンタン。

■Ajaxpics
日本語で使えます。※編集後は右クリックで画像を保存できます。Ajaxでできてます。

■picnik ☆おすすめ！☆
これも日本語環境で使えます。もし英語になっていたら上部にあるメニューの「English」を「日本語」にすれば表示されます。
テキスト挿入,効果,フィルタもたくさんあって操作性もイイです♪（写真共有サービス対応◎）こちらはFlashベース。


■DrPic.com
Javascriptでつくられてます。

…続きを読む >>

Popularity: 29% [?]

JSを使わずにCSSで画像リンクをつくることはたくさんありますが、オンマウス時の指定はいろいろあると思います。
自分がよく使うのは、オフマウス時とオンマウス時の画像をつなげて１つの画像にし、a要素の背景画像の設定をして、a要素の高さを 0 にして、代わりにpaddingを上方向に指定するやり方をしてます。

■HTML

<a id="link01" href="#">ここのテキストはCSSの指定で隠れます</a>

■CSS

a#link01 {
display: block;
overflow: hidden;
width: 100px;
height: 0 !important;
height /**/:33px;
padding-top: 33px;
background-image: url(/images/link.gif);
}

/*オフマウス時*/
a#link01 { background-position:? 0???? 0; }

/*オンマウス時*/
a#link01:hover { background-position:? 0???? -33px; }

上の例では高さ33pxの画像を上下につなげて、合計の高さ66pxの一つの画像になり、それをCSSのa要素の指定で、高さを0にし、padding-top: 33pxで、overflow: hidden;にすることであふれる高さを表示しないようになってます。

…続きを読む >>

Popularity: 28% [?]