スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > 初めての訪問者にポップアップを表示

初めての訪問者にポップアップを表示

投稿日:2006年12月05日   レベル:初心者    ソフトウェア:DreamWeaverGoLiveFrontPage

このチュートリアルでは、“初めての訪問者”用にポップアップウィンドウを自作する方法を紹介しています。


Step1 − ポップアップウィンドウ
ポップアップウィンドウがウェブマーケッティングにおいて効果的で多大な結果を残していることは確かな事実です。しかし、それらは訪問者にとって不快な場合も多くあります。このポップアップを訪問者にたいしてどのように使うべきなのでしょうか?そこで、初めてサイトを訪れた訪問者に対してのみポップアップを使うということを検討してみましょう。

Step2 − 効果的な利用方法
最初に、ウィンドウコンテンツを含んだ、ポップアップをHTMLで作成します。このテクニックを効果的に使うために、相手になんらかの反応が必要な内容を含ませてください。例えば、新しい発刊物の購読申し込みに関してならば、今、ここから申し込めば無料で進呈物がもらえるなどの内容にするなどの工夫が必要です。
初めての訪問者にポップアップ

Step3 − サンプルソース

<HTML>
<HEAD>
<TITLE>Claim Your FREE Gift</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>
<TABLE BORDER="0" CELLPADDING="2" ALIGN="Center">
<TR>
<TD BGCOLOR="red"><P ALIGN=Center>
<FONT face="Verdana,Helvetica" SIZE="3" color="white">
<B>Claim Your FREE Gift!</B></FONT>
</TD>
</TR>
<TR>
<TD><B><FONT face="Verdana,Helvetica" SIZE="3"><BR>
Subscribe to YOUR PUBLICATION for a wealth of information
to assist you in YOUR PUBLICATIONS SUBJECT. <FONT color=
"red">ALL new subscribers will receive YOUR FREE GIFT.v </FONT></FONT></B><BR>
<BR>
<FORM METHOD="POST" ACTION="YOURFORM.cgi">
<CENTER>
<TABLE BORDER="0" CELLPADDING="2" ALIGN="Center">
<TR VALIGN="Top">
<TD>
<INPUT type="text" name="email" value="you@domain.com"
size="20" onfocus="value=''">
<INPUT TYPE="submit" VALUE="Subscribe"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
<P ALIGN=Center>
<BR>
<A HREF="javascript: self.close()"><FONT face="Verdana,
Helvetica" SIZE="2">Close Window</FONT></A><BR>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
ドキュメントは”popup.htm”として保存してください。そしてあなたのHTMLファイルがあるサーバーにアップしてください。

Step4 − Javascriptソース
次にやることは、以下のスクリプトを、あなたのHTMLファイルの<BODY>タグの後に記述してください。

<SCRIPT LANGUAGE="JavaScript">
<!--
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
var expire=new Date();
window.name = "thiswin";
newwin=open("popup.htm", "dispwin",
"width=350,height=350,scrollbars=yes,menubar=no");
expire=new Date(expire.getTime()+7776000000);
document.cookie="COOKIE1=here; expires="+expire;
}
// -->
</SCRIPT>
もし、ファイル名を”popup.htm”以外で保存していたら、スクリプト内の”popup.htm”という部分を、あなたのファイル名に変更してください。幅と高さも好きなように変えることができます。あなたのウィンドウが正確に表示されることだけを確認しておきましょう。

Step5 − まとめ
ポップアップウィンドウは新しい購読者の獲得、商品の告知などに大いに役立ちます。訪問者の反応も非常によい手段の一つです。このスクリプトを使って、不快でないポップアップウィンドウを作ってみましょう!!

引用:Web Design Library 著者:Shelly Lowery翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング