JavaScript

画像拡大表示としは、LightBoxが有名ですが、自分はギャラリーの時はいいかなと思うけど、ちょっとしたサムネイルの拡大表示はもっとサクッと表示してほしいと思っていて、それでおススメなのがこのPopBox。
サムネイル画像にオンマウスでカーソルがルーペになりわかりやす！

PopBox公式サイト

似たようなモノに、・Highslide.jsや・FancyZoon.jsがあるけど、非営利は無料だけど、商用サイトだと有料になるから使いづらい。

このPopBoxはフリーと書いてあったので、おそらく無料。自分はこれつかっていこ。

詳しくは、アークウェブさんのPopBoxの使い方にのってるので参照してください。

…続きを読む >>

Popularity: 83% [?]

JavaScriptを使って表示内容を切り替えるサンプルがKANTENNA.COMさんで掲載されていたので引用メモ。
getElementById()を使って指定IDのオブジェクトにアクセス。

■<a>タグで内容表示切替サンプル

・SW1 ・SW2

■コードは以下です。

<script language="javascript" type="text/javascript">
function Display(no){

　if(no == "no1"){

　　document.getElementById("SW1").style.display = "block";
　　document.getElementById("SW2").style.display = "none";

　}else if(no == "no2"){

　　document.getElementById("SW1").style.display = "none";
　　document.getElementById("SW2").style.display = "block";

　}
}
</script>

<a href="javascript:void(0);" onclick="Display('no1')">SW1</a>
<a href="javascript:void(0);" onclick="Display('no2')">SW2</a>

<div id="SW1">
<p>これはSW1のエリアです。上記SW2をクリックすると消えます。</p>
</div>

<div id="SW2" style="display:none;">
<p>これはSW2のエリアです。上記SW1をクリックすると消えます。</p>
</div>

<div>の中の<p>要素を表示非表示の切り替えをしてますね。

■<a>タグで内容表示切替サンプル２

こちらは、<p>タグの内容もJSに入れて切り替える方法です。
■コードは以下です。

…続きを読む >>

Popularity: 66% [?]

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

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

内容は以下です。

…続きを読む >>

Popularity: 76% [?]