TopJavaScript > 2007年3月
2007年3月30日

HighSlide JS の onclick 属性を JavaScript で登録する

March 30,2007 12:38 AM
Tag:[, ]
Permalink

サムネイルをポップアップ表示する HighSlide JS で onclick 属性および onkeypress 属性を JavaScript で自動的に登録する方法です。
ここでは Movable Type と WordPress プラグインを例に説明します。

1.概略

HighSlide JS を有効にするには、「Highslide JS でサムネイル画像を拡大表示する」の5項で説明した通り、a 要素に class="highslide" に加え onclick="return hs.expand(this)" を設定する必要があります。また配布サイトでは言及されていませんが onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。

つまり、HighSlide JS に対応させるためには下記の青色部分を記述する必要があります。

<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a>

が、a 要素に毎回 class 属性、onclick 属性、onkeypress 属性を設定するのは結構面倒ですし、他の画像表示ツールに移行した場合の修正稼動も懸念されます。ということで class 属性のみ設定すれば、イベントハンドラである残りの onclick 属性、onkeypress 属性は JavaScript で設定できるようにします。

当サイトでも、ひとつ前のエントリー「poEDIT の使い方」等、HighSlide JS にはこの方法を適用しています。
動作は Windows XP + IE6/IE7/Firefox2/Opera9 で確認しています。

2.Movable Type の場合

下記のスクリプトをテンプレートの </head> の前に設定するか、外部ファイルとして自身のサーバにアップロードしてください。

<script type="text/javascript">
function addHighSlideAttribute() {
  var isIE = (document.documentElement.getAttribute('style') ==
              document.documentElement.style);
  var anchors = document.getElementById('content').getElementsByTagName('a');
  for (var i = 0, len = anchors.length; i < len; i++) {
    if (anchors[i].className == 'highslide') {
      if (!anchors[i].getAttribute('onclick')) {
        isIE ? anchors[i].setAttribute('onclick', new Function('return hs.expand(this)')) :
               anchors[i].setAttribute('onclick','return hs.expand(this)');
        isIE ? anchors[i].setAttribute('onkeypress', new Function('return hs.expand(this)')) :
               anchors[i].setAttribute('onkeypress','return hs.expand(this)');
      }
    }
  }
}
</script>

外部ファイル(例えば highslide_eh.js)にする場合は先頭と末尾の script タグを除去して、</head> の前に

<script type="text/javascript" src="<$MTBlogURL$>highslide_eh.js"></script>

というようなタグを設定してください。

そしてテンプレートの </body> の直前に下記のタグを追加します。

<script type="text/javascript">
addHighSlideAttribute();
</script>

3.WordPress の場合

下記のプラグインをインストールして、有効化してください。このプラグインと WPJ-Highslide 0.2 を併用すると便利です。

highslide_eh.zip / highslide_eh.lzh

4.参考・関連サイト

Comments [13] | Trackbacks [4]
2007年3月 5日

Slider によるフォントサイズ変更でアクセシビリティを向上させる

March 5,2007 1:35 AM
Tag:[, , ]
Permalink

以前ご紹介した Slider を利用して、ページのフォントサイズを変更するカスタマイズをご紹介します。

下のサンプルをクリックし、ページ左上にある Slider を操作すると、中央カラムおよびサイドバーにある文字のフォントサイズをダイナミックに変更することができます。
Slider は矢印キー・PageUp/PageDown・マウススクロール(これは IE のみ)でも操作可能です。IE より Firefox の方がよりスムーズに動きます。

フォントサイズ変更サンプル

ここでは Movable Type 用公開テンプレートを用いて、フォントサイズ変更用 Slider の設定方法をご紹介します。Slider および本カスタマイズはブログツールやテンプレートに依存するものではありませんので、他のブログツールや異なるテンプレートでも利用可能です。
Slider のダウンロード・インストールについては「Slider の利用方法」の2項をご覧ください。

1.Slider 用ライブラリ・CSSのインクルード

テンプレートの /head の直前に下記のタグを追加します。

<link type="text/css" rel="stylesheet" href="slider/css/bluecurve/bluecurve.css" />
<script type="text/javascript" src="slider/js/range.js"></script>
<script type="text/javascript" src="slider/js/timer.js"></script>
<script type="text/javascript" src="slider/js/slider.js"></script>
<style type="text/css">
.horizontal {
    width: 155px;
    height: 20px;
}
</style>

.horizontal は Slider をサイドバーの幅に合わせるため、slider/css/bluecurve/bluecurve.css の設定を上書きしています。

2.Slider の設定

テンプレートのサイドバー部分に下記のタグを追加します。この部分に Slider が表示されます。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>

3.フォントサイズ用スクリプトの設定

下記のスクリプトをテンプレートの /body の直前に追加します。

<script type="text/javascript">
//<![CDATA[
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.onchange = function () {
    document.body.style.fontSize = (100 + (s.getValue()*2)) + '%';
};
s.setValue(25);
window.onresize = function () {
    s.recalculate();
};
//]]>
</script>

フォントサイズを決定しているのは、

document.body.style.fontSize = (100 + (s.getValue()*2)) + '%';

の部分で、s.getValue() がスライドバーの移動によって実際に値を取得している部分です。
また、スライドバーのデフォルト位置については、

s.setValue(25);

で設定しています。この両者を変更することで、フォントサイズの増減率やスライドバーのデフォルト位置を変更することができます。色々試してみてください。

4.CSS 修正

スタイルシートで設定している font-size プロパティの値を px 指定から % 指定に変更します。フォントサイズ変更方式については下記の記事を参考にさせて頂きました。ありがとうございました。

Ogawa::Memorandaprototype.jsを用いたフォントサイズ変更スクリプト

以下、サンプルで使用している公開テンプレートにおける変更箇所です。青は追加または変更を示します。.blog セレクタの font-size プロパティは削除してください。
カスタマイズに無関係のプロパティは省略していますので予めご了承ください。

body {
    font-size: 100%;
}
.blog {
    font-size: small;
}
.date { 
    font-size: 55%;
}
.entry {
    font-size: 62%;
}
.entry-header {
    font-size: 93%;
}
.entry-footer {
    font-size: 72%;
}
.sidetitle {
    font-size: 52%;
}
.side {
    font-size: 52%;
}
Comments [0] | Trackbacks [2]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3