サブウインドウを開く方法！閲覧者に不便をかけない小窓とは(2ページ目)

サブウインドウを開かずに済ませる代替方法いろいろ

最後に、サブウインドウを開かずに済ませる代替方法を3つご紹介いたします。

■現在のページ上に、別HTMLの内容を重ねて表示する方法 現在表示中のウェブページ全面をグレーアウトさせた上で「小さなボックス」を重ねて表示し、そこに「別のHTMLの中身」を表示する方法があります。この方法ならサブウインドウを開く必要はありません。

ここでは「Colorbox」というスクリプトを使って、任意のウェブページの中身を「今見ているページ」の上からオーバーレイ表示する方法を解説しています。

■別窓を開かずに、その場で拡大画像を表示する4つの方法 サブウインドウを開く目的が「拡大画像を表示するため」なのであれば、Lightbox系スクリプトを使う方法がお勧めです。サムネイル画像のクリックで拡大画像を表示するページを作る際によく使われているスクリプトで、ページを移動したり別ウインドウを出したりすることなく、その場で拡大画像を表示できます。

なお、拡大画像を全画面に拡大表示する方法としては、「サムネイル画像をその場で全画面に拡大表示させる方法」があります。こちらもご参照下さい。

■画像にマウスを載せた際に、半透明の説明を重ねる方法 サブウインドウを開く目的が、ちょっとした補足説明文を表示するだけなのであれば、その場で説明文を浮き上がらせる方法を使っても良いのではないでしょうか。ここでは、マウスを載せたときにだけ「半透明の説明文」が下方からスライドして現れる表示効果の作り方を解説しています。

閲覧者に不便をかけないサブウインドウの開き方と、サブウインドウを使わない代替方法

今回は、JavaScriptで作るサブウインドウの問題点を解決する方法と、そもそもサブウインドウを使わずに済ませる方法をご紹介いたしました。ぜひ、試してみて下さい。また、下記の関連記事もあわせてご参照下さい。

【関連記事】

• ページ移動せずに内容を変更するタブ機能の作り方
• 色が変化するタブ機能をHTML＋CSSだけで作る方法
• 別ウインドウで開くリンクにアイコンを付加
• 表示面積の狭いボックス内をスクロールバーで見せる
• JavaScriptで画像のスライドショーを作成する方法