www.wanichan.com

Web > Resources > CSS & JavaScript Tips > 別ウィンドウにリンク先を表示させるには?

別ウィンドウにリンク先を表示させるには?

 リンク先のターゲットタイプを _blank にすると簡単ですが、別画面のサイズを指定してポップアップ表示させるには、JavaScriptを用いることで実現できます。ただし、タブブラウザーになった昨今では、別ウィンドウにリンク先を表示させることは難しいでしょう。
スポンサーリンク

もくじ

  1. はじめに
  2. JavaScriptコードを記述する
  3. ポップアップ対象となる部分にリンクを挿入する

1. はじめに

リンク先を簡単に新しいウィンドウで開く方法は、HTMLのハイパーリンクタグに、target="_blank"と記述を追加すると可能ですね。

<a href="http://www.yahoo.co.jp" target="_blank">Yahoo! Japan</a>

しかし、別画面のサイズを指定してポップアップ表示させるには、JavaScriptを用いることで実現できます。

そこで、JavaScriptを使って指定サイズの別ウィンドウにリンク先をポップアップ表示する方法について説明します。

▲Page TOP

2. JavaScriptコード記述する

まず、<head>と</head>の間に以下のJavaScriptコードを追加します。

<script type="text/javascript"><!--
// イメージポップアップ表示
function ImageUp() {
window.open("リンク先のHTMLファイル","window1","width=ウィンドウの幅,height=ウィンドウの高さ");
}
// --></script>

例えば・・・
もし、ポップアップ表示させたいHTMLファイルがmenu.htmで、
ウィンドウ幅が150、高さが300ピクセルの場合で
右側にスクロールバーを表示させたい場合

<script type="text/javascript"><!--
// イメージポップアップ表示
function ImageUp() {
window.open("menu.htm","window1","width=150,height=300,scrollbars=1");
}
// --></script>

となります。

▲Page TOP

3. ポップアップ対象となる部分にリンクを挿入する

そして、ポップアップ表示させたいところにリンクします。

<a href="javascript:ImageUp();">ここをクリック!</a>

お手持ちのソフトを使いたい場合、JavaScriptの記述はHTML編集モードにて行ってください。
ポップアップ表示させたいところにリンクを張る場合、HTML編集でなくても操作は可能です。
リンク先のURLに「javascript:ImageUp();」と入力してくださいね。

備考

FrontPage 2003やExpression Webを使えば、ビヘイビア機能を使用してJavaScriptに触れずにポップアップウィンドウを作成することができます。詳しくはこちらをご覧ください。

また、MicrosoftのWebサイトにおいても、関連情報があります。
QA [FrontPage 2003] ページを表示したとき、ポップアップ ウィンドウを表示するには

ただし、タブブラウザーになった昨今では、別ウィンドウにリンク先を表示させることは困難かと思います。

▲Page TOP

スポンサーリンク
INDEX

おすすめ記事

コメント

▲このページのトップへ