Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

あれこれポップアップ

半透明ポップアップが出てる様を眺めるにつけ、かっこよすぎ！って自画自賛したいアルヨー。

これは何？

ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。

多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑）

だうんろーど他

お持ち帰り用アーカイブをダウンロード
  • 2003/10/04 (v1.2.5) / zip 圧縮 / 34 KB （改訂履歴）
  • 構成ファイルをひとまとめにしたアーカイブ。外部 JavaScript, 外部 CSS, 画像ファイルのセット。
  • バージョンアップの際は構成ファイルぜんぶを新しいものに差し替えてくださいね。
動作おためしページ
どういう感じなのかを気軽に試してみるページ。ただし「動作想定ブラウザ」以外ではまず動作しません。

詳細な能書き他

  • マウスポインタが触れている要素の任意の属性値（複数可・名前空間接頭辞付き可）をポップアップに表示します。ポップアップへ出すと設定した属性が存在するならば、要素の種類を問わずポップアップします。
  • ポップアップを出すために必ず存在しなければならない属性を要素ごとに設定可。
  • マウスポインタをかざしてからポップアップが出るまでの遅延時間を設定可。
  • マウスポインタ位置からポップアップまでの距離を調整可。
  • ポップアップは放置してれば勝手に消えます。また消えるまでの時間も設定可。
  • ポップアップ内に任意の画像を表示するための「あれこれポップアップ」専用の拡張属性 ap:banner を用意。
  • URI 型の値をとる属性 (href, cite, src などなど）はポップアップ内にリンクアンカー化して表示。もちろんクリックすればそのリンク先へ飛べます。引用部分とかでべんりかもしれず。
  • ポップアップの見てくれは、半透明ブラック背景で角丸な「リッチスタイル」と、よくある黄色い背景の「スタンダードスタイル」から選択可。デフォルトは見た目のキャッチーさを鑑みて（笑）「リッチスタイル」。「リッチスタイル」にはアルファチャンネルな PNG-24 画像を使っていますが、それをマトモに表示できないハズの WinIE でも、ちょっとした小細工で半透明表示を実現。（なんか背景がズレやすいのですが…）
  • ブラウザ側の設定が画像表示 OFF であるなら、いくらスクリプト側で画像使用の「リッチスタイル」使用を設定していようが、自動的に画像を一切使わない「スタンダードスタイル」を使用します。同様に、 CSS が無効設定になってる場合はスクリプト自体の動作を回避します。
  • ポップアップの出現を完全に抑制できる class 属性値 AP-noPopup を用意。
  • ポップアップ自体のワンクリックで、一時的にそのページ内での「あれこれポップアップ」の動作を無効化する事が可能。
  • application/xhtml+xml な XHTML でも動作します。そのはず。

動作を想定するブラウザ

やはり DOM というものををそれなりしっかりと実装してるブラウザでないとダメでして。なおかつ JavaScript 有効・ CSS 有効でないと動作しません。具体的な動作想定ブラウザというか、動作の確認をとっているモノは以下です。

Mozilla, Mozilla Firebird, Camino, Netscape7 などの Gecko 系ブラウザ
最も良好に動作。
Safari, OmniWeb 4.5 などの AppleWebKit 系ブラウザ
おおむね良好（→a:hover スタイルの反応・追従性低下について）
WinIE6
それなりに良好（→WinIE での「リッチスタイルポップアップ」の表示状況に関して） ただし各種 IE コンポーネントブラウザでの動作状況まではわかりません。

設置マニュアル

注意事項

  • 「あれこれポップアップ」の設置には、 Web サイトを公開運営するにあたっての最低限の知識が必要です。 HTML の書き方だとかそういう初歩的な質問には応じません。
  • Web ページオーサリングツール系の操作方法に関する質問も当然応じられません。ツール付属の操作説明書を読むべき。
  • ArekorePopup.js や ArekorePopup.css を純粋なテキストエディタ以外の物で編集した際の動作は保証しません。
  • というかこの「あれこれポップアップ」は完全無保証、現状渡しです。設置者の自己責任と判断の元で使用してください。このスクリプトのせいでブラウザが落ちた等の苦情をサイト利用者から受けたとしても、ぼくは責任もちませんのであしからず。

とりあえず設置

  1. お持ち帰り用アーカイブを解凍して出てくる ArekorePopup ディレクトリを任意の場所に置きます。

  2. 「あれこれポップアップ」を適用したい HTML に、ArekorePopup.js と ArekorePopup.css を組み込みます。 HTML ソースを例のように記述してください。

    ディレクトリ階層の例：
    rootDir
   ├ fugahoge.html (適用先 HTML)
   └ ArekorePopup
         ├ ArekorePopup.js
         ├ ArekorePopup.css
         └ *.png
    HTML 記述例：
    <html>
   <head>
      …
      <link href="ArekorePopup/ArekorePopup.css" rel="stylesheet" type="text/css">
      <script src="ArekorePopup/ArekorePopup.js" type="text/javascript"></script>
   </head>
   <body>
      …
   </body>
</html>
    • ArekorePopup.js と ArekorePopup.css は必ず同じバージョン番号の物を併用する必要があります。バージョン番号はファイル内容の先頭あたりに書いてあります。
    • link 要素の href や script 要素の src は、絶対 URL でも当然 OK です。臨機応変にヤってください。
    • 上記の HTML ソースはあくまで例です。実際は、適用先 HTML が採用している文法規則に則って記述してください。たとえば XHTML の場合、 link 要素は空要素なので <link ... /> とする必要があります。
  3. 「あれこれポップアップ」がちゃんと動作するか確認。 HTML にとりあえずどこかへのリンクでも書いておいて、それをマウスで触ってみてください。
  4. 「あれこれポップアップ」の動作をカスタマイズする場合は「動作設定の変更・カスタマイズ」に進む。

動作設定の変更・カスタマイズ

動作の各種設定や調整を行うには、 ArekorePopup.js を編集します。改行コードは LF なので、それに対応したテキストエディタ等を使用してください。

ポップアップに表示する属性

this.attrs = ['ap:banner', 'title', 'href', 'cite', 'datetime'];

これらが存在する要素の上にマウスポインタを置くと、その属性値がポップアップに表示されます。たくさん指定するとそのぶん動作は重くなります。

  • HTML/XHTML のものについては、すべて小文字で指定してください。
  • 名前空間接頭辞付きの場合は、'xlink:href' の様に接頭辞付きで記述してください。 HTML/XHTML のものについては接頭辞は不要です。というかつけないでください。

URI 型の値をとる属性（href とか cite とか）の場合は、リンクアンカー化されてポップアップ内に表示されます。もちろんクリックすればそのリンク先へ飛べます。

まったく何も指定せずカラッポ ( this.attrs = []; ) にすると、「あれこれポップアップ」のポップアップどころか、ブラウザ本来の title 属性値ツールチップも出なくなります。それはそれで何かに利用できるかもしれず。

ポップアップ出現のために必ず存在しなければならない属性

this.requiredAttr = { 'a' : 'title' };

ポップアップ出現のために必ず存在しなければならない属性を要素ごとに指定します。上記の例では、 a 要素は title 属性値のある物のみポップアップが出現する事になります。

  • { '要素名':'属性名','要素名':'属性名', ... '要素名':'属性名' } という書式です。
  • なにも指定したくない場合は、 {} のように中をカラにすればいいです。
  • 各要素名に対し指定できる属性名は一つのみです。
  • HTML/XHTML のものについては、要素名・属性名ともにすべて小文字で指定してください。
  • 名前空間接頭辞付きの場合は、要素名・属性名ともにその接頭辞付きで記述してください。 HTML/XHTML のものについては接頭辞は不要です。というかつけないでください。

名前空間 URI 設定

this.ns = {
   xhtml1 : 'http://www.w3.org/1999/xhtml',
   xhtml2 : 'http://www.w3.org/2002/06/xhtml2',
   ap     : 'http://www.remus.dti.ne.jp/~a-satomi/ap'
};

要素や属性の生成・検出の際に使用します。通常はこのままで OK 。

「ポップアップに表示する属性」や「ポップアップ出現のために必ず存在しなければならない属性」のところで名前空間接頭辞付きのものを使う場合に、ここで接頭辞と名前空間 URI の対応関係を設定します。

Safari においてだけ動作させるか否か

this.safariOnly = false;

このスクリプトの本来の出自は「 <a> 要素以外の title 属性値を知る術がまるで無い Safari の救済のため」であります。このようなややこしいスクリプトが全ブラウザに対して動作するのは高リスクであることは間違いないので、本来の救済目的である Safari にだけ適用すればいいという立場のための設定。

事前処理を HTML 読み込み完了時に一括して行うか否か

this.initBeforehand = false;

ポップアップを出すためには事前の準備処理が欠かせません。そもそも出すか出さないかを調べるとか、ブラウザ本来のツールチップを出さないようにする処理とか、 ap:banner 属性で示された画像の先読み処理とかの。それをどのタイミングで行うかの設定。

  • true ：HTML の読み込み完了時に一括して行う。
  • false ：マウスポインタが任意の要素に触れ次第、その部分に対して逐次行う。

false を推奨。ただし、処理を逐次行う都合上、 a:hover スタイルの反応性・追従性が少々低下します。一応、一度でも触れた部分は二度目以降の処理を速く済ます（＝スタイル追従性が改善する）ようになってはいます。加えて、他のスクリプトによって HTML へ DOM 的に要素が生成追加されてる場合、その要素に対しても正常にポップアップを出させるためには、こちらの処理方法を選択する必要があります。('true' 設定だと、ブラウザ本来のツールチップが出て終わりだったりします）

true は v1.1 までの処理形態と同じ。a:hover スタイルの反応性はこちらのほうが上。ただしこの場合、適用対象 HTML がちょっとでも大きいと、 HTML 読み込み完了後の結構長い時間、ブラウザが操作不能になります（表を参照の事）。処理に掛かる時間は HTML のファイルサイズやテキストの量ではなく、使用されている要素（タグ）の数やネストの深さに比例します。「あれこれポップアップ」を適用する対象の HTML がシンプルで小さい場合以外、推奨しません。やむを得ず true にする場合は必ず「一括準備処理の処理時間制限」を忍耐の範囲内におさまる秒数に設定してください。たのみます。

ファイルサイズ 132KB 、要素数 1585 の HTML の読み込み完了後、「あれこれポップアップ」スクリプトの動作によりブラウザが操作不能になる時間（わが家での実測値）
OS CPU ブラウザ 'true' の場合 'false' の場合
MacOSX G4/867MHz Safari 8 秒 0.023 秒
MacOSX G4/867MHz Camino 12 秒 0.014 秒
MacOSX G4/867MHz Mozilla Firebird 12 秒 0.014 秒
Win2000 PII/300MHz Mozilla Firebird 25 秒 0.05 秒
Win2000 PII/300MHz WinIE6 14 秒 0.06 秒

一括準備処理の処理時間制限

this.initTimeout = 3000;

「事前処理を HTML 読み込み完了時に一括して行うか否か」にて「一括して行う」を設定した場合の、その処理時間制限。単位ミリ秒 (1/1000 秒) 。

制限時間を超えたところで処理を打ち切るので、適用対象 HTML がちょっとでも大きい場合、ページの下の方では「あれこれポップアップ」のポップアップは出ません（必要な事前処理が出来てない故）。出るとしてもブラウザ本来の title 属性値ツールチップ。

ポップアップ出現までの遅延

this.popupDelay = 1000;

マウスポインタをかざしてからポップアップが表示されるまでの遅延時間。単位ミリ秒 (1/1000 秒) 。

ポップアップ存続時間

this.popupSustain = 5000;

ポップアップが表示されてから勝手に消えるまでの時間。単位ミリ秒 (1/1000 秒) 。

ただしマウスカーソルがポップアップ上にある間はこの時間を超えても消えません。逆に、一度ポップアップ上に来たあとでポップアップ外に出ると時間に達してなくてもその場ですぐ消えます。

ポップアップ表示位置

this.offset = { X: 0, Y: 20 };

マウスポインタ位置からポップアップ左上までの距離。 X, Y はそれぞれ右方向・下方向。単位 pixel 。

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

this.useRichStyle = true;
  • true ：「リッチスタイル」 PNG-24 画像を使った半透明角丸ポップアップ。クールな見てくれの実現のためにいろんなムリをしてるので、処理が多少重いかも。
  • false ：「スタンダードスタイル」 よくある黄色い背景のポップアップ。軽いはず。

ブラウザ側の設定が画像非表示の場合、たとえ true を設定してても自動的に false になります。

「リッチスタイル」ポップアップのテキストの影

this.richStyleUseTextShadow = true;
  • true ：つける。
  • false ：つけない。

テキストの影は、 WinIE においては DirectX フィルタで実現。 Gecko, Safari ではテキストを二重に生成してそれを重ねて実現。そういう余計なことをするぶん、重くなります。

「リッチスタイル」ポップアップの画像表示に WinIE で DirectX Alpha Image Loader を使用するか否か

this.richStyleUseAILoader = true;
  • true ：使用。
  • false ：使用しない。

本来 WinIE は PNG-24 の半透明画像を正常表示できません（半透明になりません）。しかし DirectX Alpha Image Loader を通せば半透明表示が可能となります。ただし、DirectX Alpha Image Loader 経由の表示の場合、「ボックスサイズにフィットするように画像が伸び縮みする」か「画像サイズにフィットするようボックスサイズが伸び縮みするか」のみで、繰り返しの敷き詰め (CSS で言うところの background-repeat: repeat) は不可能。それにやっぱり多少は重くなります。

よって、「リッチスタイル」ポップアップの背景画像を自作画像に取り替える際、その画像が半透明な PNG-24 でないとか、そもそも PNG ではないとかの場合は、 DirectX Alpha Image Loader が不要なので false にしといたほうがいいです。半透明な PNG-24 だけども「繰り返し敷き詰め」が重要な場合も、 false に設定する必要があります（その場合 WinIE ではもちろん透過しません）。

「リッチスタイル」ポップアップの角丸の半径

this.richStyleEdgeWidth = 16;

角丸表示を実現してる画像パーツ群のピクセルサイズに沿った数値を指定。単位 pixel 。配布アーカイブに同梱のものから別の物に置き換えるのでなければ変更不要。

この値が 1 以上である場合、 ArekorePopup.css の ins#AP-popup-parent.AP-richStyle セレクタの padding 値 (px 単位で指定) を、これと同じにする必要があります。

この値を 0 にすると、ポップアップは単一の背景画像だけ使って表示されます。その時使われるのは次項 richStyleImages の simple_background に指定されてる画像。

「リッチスタイル」ポップアップが使用する画像の指定

this.richStyleImages = {
   body               : 'body.png',
   rect_top           : 'top.png',
   rect_left          : 'left.png',
   rect_right         : 'right.png',
   rect_bottom        : 'bottom.png',
   angle_top_left     : 'top-left.png',
   angle_top_right    : 'top-right.png',
   angle_bottom_left  : 'bottom-left.png',
   angle_bottom_right : 'bottom-right.png',
   simple_background  : 'body.png'
};

角丸表示を実現するためにポップアップの各部分に当てはめられる画像ファイルの指定。配布アーカイブに同梱のものから別の物に置き換えるのでなければ変更不要。

初期状態のまま、各画像ファイルが ArekorePopup.css と同じディレクトリにある場合は上記のように単にファイル名で指定。別ディレクトリにある場合は ArekorePopup.css からの相対 URL 指定。

simple_background は「「リッチスタイル」ポップアップの角丸の半径」に 0 を設定したときに使用される画像です。

ArekorePopup.css のあるディレクトリ位置のマニュアル設定

this.cssDir = '';

通常はカラのまま変更不要。その場合、スクリプトは適用先 HTML 中の <link> 要素を走査して、 ArekorePopup.css の置かれてるディレクトリの URL を検出します。検出できなかった時はスクリプトは動作をとりやめます。

何らかの理由で HTML に ArekorePopup.css を読み込む <link> 要素を記述できない場合に、ここで ArekorePopup.css （と画像ファイル）の置かれたディレクトリへの URL を指定できるという寸法です。

'ap:banner' 拡張属性を利用してポップアップに画像を表示

ポップアップに画像を表示するための「あれこれポップアップ」専用の XHTML 拡張属性。

HTML の任意の要素に 'ap:banner' 属性を書き加え、属性値には表示したい画像の URL を与えておきます。そして「ポップアップに表示する属性」にこの 'ap:banner' を加えておけば OK 。 'ap:banner' 属性値のある要素にマウスポインタをかざせば、めでたく指定された画像がポップアップ上に出ます。 HTML 例は以下。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ap="http://www.remus.dti.ne.jp/~a-satomi/ap"
      xml:lang="ja">
    …
    <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>
    …

もちろんポップアップ上に表示するのですからして、巨大な画像を指定したらブラウザ画面がポップアップに覆われたりして死ねます。きおつけましょう。一般的なリンクバナーサイズのものを表示することを想定してますゆえに、名前も ap:banner ナノデス。

表示する画像のタテサイズ（高さ）がみなだいたい同じであるなら、 ArekorePopup.css の ins#AP-popup-parent li.ap-banner img セレクタにて height プロパティを明示しておく事を推奨します。画像が表示される事によってポップアップの表示が崩れる事があるので、その予防のために。たとえば、表示するものが同人サイト系のリンクバナーの場合、横 200 px ・縦 40 px のものがほとんどなので、以下のようにします。

ins#AP-popup-parent li.ap-banner img { height: 40px !important }

「事前処理を HTML 読み込み完了時に一括して行うか否か」で「逐次行う（デフォルト）」に設定してる場合は、マウスポインタが要素に触れてから実際にポップアップが出るまで（「ポップアップ出現までの遅延」で設定した秒数）の間に画像の先読みを行ってます。もしその間に読み込みが完了しなかった場合は、表示されません。たぶん次に触ったときあたりに出るでしょう（笑）。

「事前処理を HTML 読み込み完了時に一括して行うか否か」で「一括で行う（非推奨）」に設定してる場合は、 HTML 読み込み完了時に ap:banner 属性も一括してサーチして、その場で全画像をドカドカ先読みします。 ap:banner 属性の数が多いとエライ事になります（笑）

'AP-noPopup' class 名を利用する

ポップアップに表示する属性値の選び方によっては、ありとあらゆるところでポップアップが表示されてしまって、ウザいことこの上ない事もあり得ます。そんな時は 'AP-noPopup' という class 名の出番です。 HTML 中で class="AP-noPopup" が指定されてる要素、あるいはその子孫要素の上空では、「あれこれポップアップ」が出現する条件にあっても出現しなくなります。

たとえば、 href 属性を持つものはその値をポップアップすると設定しているとします：

<a href="fuga.html">hoge</a>                     …出現
<a href="fuga.html" class="AP-noPopup">hoge</a>  …出ない
<div class="AP-noPopup">                         …出ない
   <a href="fuga.html">hoge</a>                  …出ない
</div>                                           …出ない

ブラウザが標準的に持ってる title 属性値ポップアップも出なくなります。

そのほかメモ

WinIE での「リッチスタイルポップアップ」の表示状況に関して

「リッチスタイル」の角丸半透明ポップアップは複数の半透明 PNG 画像を背景画像として使い、ポップアップの四辺四隅にそれを配置することで実現してます。 WinIE は未だに半透明 PNG 画像を正常に表示できないので、その代替措置として DirectX Alpha Image Loader を経由して表示させています。しかしこの場合、どうしても配置ズレが不規則に発生するようです。スクリプト内の計算上はズレてなくても画面上の実際はズレていたり、その逆だったり、いかんともしがたい状態です。ヘルプミー。

暫定対処処置

a:hover スタイルの反応・追従性低下について

「事前処理を HTML 読み込み完了時に一括して行うか否か」で「逐次処理」を設定してると、どのブラウザでも a:hover スタイルの反応・追従性が少々低下するわけですが、その度合いはそのスタイル指定の複雑さにもよります。リンクアンカーの文字色を変えるだけとか、そういった程度であればそんなに影響は無いですが、逆にダイナミックに背景画像を入れ替える等の元々重い a:hover スタイルは目に見えて反応が遅くなったり。もしよければ、スタイルを軽めのものに変えてみるのもひとつの安全策です。

ブラウザによっても低下具合は違います。最も影響が薄いのは Gecko 系。つぎに WinIE 。 Safari (現在の最新版 1.0 (v85.5)) は、 a:hover スタイルを何も用意してなくても、全般的にマウスオーバー系の挙動が元からトロいブラウザなので、「あれこれポップアップ」のせいでスタイルの反応が鈍くなるといっても、ほとんど大差無いんじゃないかってぐらいの勢いです。実は、スクリプト内で HTML DOM ノードに加えた変更が反映するのもなんか遅い、とかいう問題もあったりしますが…。 Safari のバージョン上げ待ち。

原理主義的なもの

ap: 接頭辞つきの属性を使うことについて

ap:banner 拡張属性は、 XML 名前空間のしくみを使って語彙が拡張可能という XHTML の特性を利用するものです。従って XHTML ではない HTML でこの属性を使うのは invalid ( 妥当でない ) です。たとえ XHTML であっても、もはや純 HTML とは言い難くむしろ XML という風情なので、 ap:banner 属性を使った XHTML を application/xhtml+xml ではなく text/html の MIME タイプで提供するのも、仕様原理主義的立場では invalid です。

…ただ、 HTML4 や text/html の XHTML で ap:banner 属性を利用したところで特段問題なく動作しますし、上記のような厳密性からの多少の逸脱に目をつぶることが可能なら利用してください。逆に、そういった厳密性が宗教的イデオロギー的あるいは技術的観点において重要であるのであれば、その厳密性を損なうような形式では使うべきではありません。

「リッチスタイルポップアップ」の見てくれの実現方法について

「リッチスタイルポップアップ」の見てくれは、内容のカラッポな div を大量生成したり、特定ブラウザの独自拡張機能を使ったりとか、同じ字面のテキストを CSS で「ずらし重ね」したりとかの、 HTML/CSS 原理主義的に「すべきではない」とされている手法をアレコレ使って実現しています。

これも「ap: 接頭辞つきの属性を使うことについて」と同様に、原理主義的立場を完遂したいのであれば、「リッチスタイル」を選択すべきではありません。「スタンダードスタイル」であれば、ポップアップ内の HTML DOM ノードの構成も CSS も、原理主義的立場で見た場合でも大丈夫な作りになってます（そのはず）。

「想定動作ブラウザ」以外の主要ブラウザでの状況に関して

  • Opera 7 やそれ以前は、標準 DOM の実装がイマイチなので動作しません。
  • MacIE5.x は、標準 DOM の実装がそこそこなので頑張れば動く気もしないでもないけど、このブラウザに苦労して対応するのは今更感があって以下略。
  • NN4.x とか、そーゆー石器時代のブラウザは早く窓から投げ捨ててください。このスクリプトは try 〜 catch 構文というものを使ってますが、石器時代のブラウザはそれを解することができずにスクリプトエラーとしてしまうかもしれません。 NN4.x では、もちろんスクリプトエラーになって、しかも HTML に同時に適用されている他のスクリプトもそのせいで全部止まってしまいます。注意してください。

適用サイト利用者向け FAQ

ポップアップ内の URL がリンクアンカーっぽい感じで、クリックしたらリンク先へ飛べそうなのですが。
とべます。
ポップアップ内にマウスポインタを持っていこうにも、消えちゃうじゃないですか。
ポップアップが出たら素早くポップアップ内へポインタを持っていけば、うまいこといきます。でもって、ポップアップ内にマウスポインタがある場合は、ポップアップは時間が経っても勝手には消えません。
訪問先ページがこのスクリプトを採用してて、ちょっとうざいです。
ポップアップ内のリンクアンカーじゃない部分をクリックすることで無効化ダイアログが出ます。といっても別に無効化状態をクッキーに記憶したりはしないんで、ページの再読み込みをすれば復帰します。
それで無効化できるにしても、毎度その操作をするのさえうざいじゃん。なんとかすれ。

以下のいずれか。

  • ユーザ CSS に以下を記述。

    ins#AP-popup-parent { display: none !important; position: static !important; }

    「あれこれポップアップ」は起動時、ポップアップを入れる容器 (ins#AP-popup-parent) をまず生成し、それの表示位置を実際に動的変化させられるかどうかで CSS が有効か否かを判断してます。そして無効であるようなら動作の開始を取りやめます。よって、「あれポ」の起動そのものを阻止するためには、ユーザ CSS で強制的に表示位置を動かせなくしてしまえばいいという案配。各ブラウザでのユーザ CSS の設定方法は各自で調べてくださいな。

  • JavaScript を OFF る。 JavaScript が OFF であればどうあがいても動作しません。
  • このスクリプトを作成・公開してるぼくに苦情を言う。「公害スクリプトを垂れ流してるんじゃねー」
  • このスクリプトを採用してるそのページの管理・製作者に苦情を言う。「ウザいスクリプトを使ってるんじゃねー」

改訂履歴

v1.2.5 (2003/10/04)

  • リッチスタイルポップアップの背景画像を変更。ちょっぴりドロップシャドウをつけてみた。 1mm くらい浮いてる感じに見えたらナイス。そのへんの関係で、四隅の角丸の半径がちょっと小さくなった（せざるをえなかった）。以前の画像は old_images ディレクトリに入れておいてあります。
  • DOCTYPE スイッチ機構により WinIE6 にて Standard Mode となる HTML の場合、ポップアップの表示が大崩壊したり、画面をスクロールしてる状態でポップアップの出る位置がおかしくなってたを修正。
  • ポップアップの最大の横幅を画面の 90% までに抑える処理を追加。（スクリプト側でやってるので、 max-width プロパティが使えない WinIE や Safari でも大丈夫。というか CSS のほうで max-width を指定しないほうがいいです）
  • a 要素（他）から出したポップアップの場合、そのポップアップ内に表示される URL のリンクにも、元の a 要素（他）に指定されてる target 属性を反映するように変更。（しかし以前から Gecko 系では Shift + クリックや Cmd + クリックがなぜか効かない…）
  • WinIE でリッチスタイルポップアップの表示に DirectX Alpha Image Loader 使用の場合（＝デフォルト）、 HTML 側でいかに target 属性を指定していようとも、ポップアップ内に表示される URL のリンクをクリックした際の飛び先にそれが反映してなかったのを反映するようにした。同様に、ポップアップ内リンクを Shift + クリックしても別窓で開かなかったのも修正。
  • WinIE でリッチスタイルポップアップの背景画像がどうしてもズレる問題（あるいは WinIE の仕様） は相変わらず克服試行錯誤中。もう、画像同士がピッタリ隣り合わず溝が見えるのよりは、いっそ重なって黒い線が見えるほうが、まだズレが目立たなくて良いんじゃね？という方向。
  • ユーザ CSS で「あれこれポップアップ」スクリプトの起動を阻止する方法が、 Gecko 系以外に WinIE6, Safari でも使えるようになった。サイト閲覧者から「ポップアップうぜぇ」と苦情を言われたときは、この方法を教えてあげてくださいまし。その関係で、Safari ではスクリプトの発動まで 0.5 秒ほど間が空きます。 Safari は DOM の動的変更処理の反映がイマイチ遅いせい。
  • ポップアップが出た際にステータスバーに余計な操作説明を出してたのはウザかったというか、リンク先 URL とかが分からなくなるし、シテハイケナイ事だったと反省して取りやめ。
  • そのほかバグ潰し。
  • 以上の変更に合わせて ArekorePopup.css を改訂。

v1.2 (2003/10/02)

  • ポップアップに画像を表示させるためのしくみ (ap:banner 拡張属性) を搭載。 (kiyo 氏発案 。多謝)
  • ポップアップ出現のために必ず存在しなければならない属性を要素ごとに指定可能になった。
  • 一定秒数を過ぎたらポップアップが自動的に消えるようになった。ただし、ポップアップ上にすばやくマウスポインタを移動させるか、あるいはポップアップ上にマウスポインタがある間は消えません。
  • ポップアップ上以外の任意の場所をクリックすることで、いつでもポップアップを即座に消せるようになった。
  • ポップアップの出現（とそのための処理）自体を一時的に完全無効にすることができるようになった。
  • URI 型の値をとる属性（href とか cite とか）の場合は、リンクアンカー化してポップアップ内に表示するようになった。もちろんクリックすればそのリンク先へ飛べます。（某尾崎大先生（誰）発案。多謝）
  • ポップアップを出すための事前処理をいつ行うか選べるようになった。
  • WinIE にて img 要素の src 属性値がなぜか href 属性値としても扱われてる問題を対処。
  • WinIE にて img 要素 に alt 属性値があるとブラウザ本来のツールチップがいつも出てくる件を対処。
  • WinIE でどうしてもリッチスタイルポップアップの背景がズレる件の対処として、単一の画像のみで背景を表示する方策を追加。
  • WinIE にてリッチスタイルポップアップが画面外にはみ出やすかった問題をほぼ改善。
  • WinIE にて table 要素に対する属性値読み出し処理がスクリプトエラーにされてしまう事がある件を対処。
  • Mozilla Firebird にてウインドウ左下のスタイル選択メニューから "No Theme" を選んだ際にポップアップが出なくなる問題を対処。
  • ポップアップ生成処理を見直した。大きめのページでポップアップを出す時のパフォーマンスが、特に WinIE でそこそこ改善したと思われ。
  • スタンダードスタイル使用時に、ポップアップを出すと常にスクリプトエラーが出てたダサいバグを直した。
  • そのほかバグ潰し。
  • 以上の変更に合わせて ArekorePopup.css を改訂。

v1.1 (2003/09/22)

  • 「リッチスタイル」ポップアップが WinIE でも半透明表示になるようにした。ただし時折、背景が醜くズレます。
  • 「リッチスタイル」ポップアップで文字に影がつくようになった。
  • ブラウザが画像非表示設定のときは有無をいわさず「スタンダードスタイル」ポップアップで表示する処理を入れた。
  • ブラウザが CSS 無効設定のときはスクリプトの実行を取りやめる処理を入れた。
  • ページ側の a:hover スタイルの反応が鈍くなる問題をほぼ解消。
  • ポップアップ遅延関係の処理をもうちょっとカッチリと。
  • ArekorePopup.css の記述をもうちょっとカッチリと。

v1.0 (2003/09/17)

  • ファーストリリース
Copyright © 1998-2006 ALIMIKA SATOMI/NYAN-NYAN-HANTEN.Created: 2003/09/17, Last-modified: 2003/10/04