%xhtml-charent; ]> blockquote:before { display: block; margin: 1em 0 -0.5em; content: "[引用]"; } #styleSelect { border: none; padding: 0 } #styleSelect fieldset { border: 1px solid #f19da7; -moz-border-radius: 0.8em; padding: 0.5em 2em; font-size: 90%; } #styleSelect legend { display: inline } #styleSelect label { margin-right: 2em; } function styleSelect() { setTimeout('styleSelect_()', 1000); } function styleSelect_() { var btn = AP.getElements('input'); for (var i = 0; i < btn.length; i++) btn[i].onclick = switchStyle; var i = (AP.useRichStyle && AP.image.enabledCheck()) ? 0 : 1; AP.setAttr(btn[i], 'checked', 'checked'); } function switchStyle(e) { AP.useRichStyle = (this.value == 0); } if (typeof AP == 'object') AP.addEvent(window, 'load', styleSelect);

あれこれポップアップ・動作サンプルぺージ

「」のためのサンプル文書。内容は特に無関係です。リンクアンカーや、点線の下線の表示されてる箇所や、リンクバナーや、引用部分などなどにマウスポインタをかざして、1 秒ほどじっとしてみてくださいな。

なお、Mozilla 他の Gecko 系ブラウザ、 Safari 等の AppleWebKit 系ブラウザ、 WinIE の 6 あたりのブラウザでないときっと動作しません。そして JavaScript と CSS が有効でないと動作しないのであしからず。

ポップアップスタイル選択：

サンプル 1 : よくある日記テキスト

Apple が WaSP の偉いさんと契約したらしー。

MacMinuteが、Appleは同社のサイトデザインを新しくするため、Webの標準化を推し進める上で重要な役割を担ってきたWeb Standards Project(WaSP)の元リーダーで、現在名誉職にあるJeffrey Zeldman氏と、同団体の現リーダーであるDouglas Bowman氏と契約したと伝えていました。

ほう。ユーザビリティは悪くないものの、画像ばっかしで鬼テーブルレイアウトびしばしでアクセシビリティ激悪な Apple サイトがどうなるのか見物。単に div 厨化して終わったりして。海外における自称「 Strict HTML 化しますた！」って奴は、単にテーブルレイアウトをやめて div 厨化しただけの事を指すらしいと、よくそふぃあさんが嘆いていたり。

画像形式は PNG 形式のみです。ぼくは PNG 推進派なのですヨ。もしどうしても GIF 版が使いたいという方がおられましたらば、ご自身の責任でもって GIF に変換して使ってください。

サンプル 2 : 拡張属性 ap:banner テスト

この部分の HTML ソースは以下のようになってます：

<ul>
    <li>
        <a href="http://www.remus.dti.ne.jp/~a-satomi/"
           ap:banner="http://www.remus.dti.ne.jp/~a-satomi/common/img/banner/nyan2h_ban.png"
           title="娘娘飯店しるきぃうぇぶ">娘娘飯店しるきぃうぇぶ</a>
    </li>
    …
</ul>

サンプル 3 : class="AP-noPopup" テスト

  • S.O.B
  • S.O.D.
  1. S.O.B
  2. S.O.D.

この部分の HTML ソースは以下のようになってます：

<ul>
    <li><abbr title="Sabotage Organized Barbarian">S.O.B</abbr></li>
    <li><abbr title="Stormtroopers Of Death" class="AP-noPopup">S.O.D.</abbr></li>
</ul>

<ol class="AP-noPopup">
    <li><abbr title="Sabotage Organized Barbarian">S.O.B</abbr></li>
    <li><abbr title="Stormtroopers Of Death">S.O.D.</abbr></li>
</ol>