|
最初に覚えた超カンタンな手口
元のページにかえる
プラウザの｢戻る｣ボタンを押しても同じ効果が出ます。でも、｢戻る｣ボタンは必ずページのトップに帰ります。
これを使うと、前のページのもとの位置に帰ります。ちょっと押してみてください。
<A href="JavaScript:window.history.back(1)">元のページにかえる</A>
必ずしもブラウザに対応しているわけじゃない
インタネットエクスプローラとネットスケープ、片方だけしか対応していない場合があります。例えばこんな風に
ホームページ寺子屋
<A href="../work-hp.htm" title="経験を語るだけで体系的なものじゃありませんが">ホームページを作りましょう</A>
マウスで触れてみてください、ＩＥなら説明の吹き出しが出たでしょう、ところが、ＮＮでは四角に囲った吹き出しは出ません、そのまんま、リンク先へ直行します。
もっともっとリンク内容を説明して誘導したいのですが、ＩＥ、ＮＮ、どちらにも対応するようにしたい、そこでこんな風にしました。
ホームページ寺子屋
<A href="../work-hp.htm" onmouseover="document.myFORM.myMSG.value='経験を語るだけで体系的なものじゃありませんが'"
onmouseout="document.myFORM.myMSG.value='
'">ホームページを作りましょう</A>
<FORM NAME="myFORM"><INPUT
TYPE="TEXT" SIZE="60"
NAME="myMSG"></FORM>
今度は、どっちのブラウザでも同じ反応があるでしょう。
ＩＥだけ、ＮＮだけ、片方のブラウザにだけしか対応しないやり方はわたしには疑問です。
深い溝が掘ってあってみっともない、とは思いますが、涙をのんで吹き出し方式は放棄しています。
狭い場所に、ページ構成を示していますので、せめてコメントをふくらませて各ページに誘導したい、とこんな形をとりました。
小窓がポップアップその1
レポートの最初に地図を出して、どこの場所かを示すようにしています。
例として四石山
<SCRIPT LANGUAGE="Javascript">
<!--
if (name == "banner") {
}
else
{
var popupURL = "../report/010121-yotuisiyama2-map/010121-yotuisiyama2-map.htm";
var popup =window.open(popupURL,"EasySpacePopup",'toolbar=0,
location=0,directories=0,status=0,menubar=
0,scrollbars=0,resizable=0,width=430,height=340');
// set the opener if it's not already set.
it's set automatically
// in netscape 3.0+ and ie 3.0+.
if( navigator.appName.substring(0,8) == "Netscape"
)
{
popup.location = popupURL;
popup.opener = self;
}
}
//-->
</SCRIPT>
ほんぺんに ../report/010121-yotuisiyama2-map/010121-yotuisiyama2-map.htm
が 430*340 の大きさで開くよう宣言しています。
赤字が編集個所です。
さて、小窓のほう、../report/010121-yotuisiyama2-map/010121-yotuisiyama2-map.htm は
onBlur="close();" の宣言で、小窓の外にマウスが触れたら(業界用語で、フォーカスが去れば)風船が破裂して消え去るように命令を受けています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM
HomePage Builder 2001 V5.0.2 for Windows">
<TITLE>四石山２周辺</TITLE>
</HEAD>
<BODY BGCOLOR="#fffacd" onBlur="close();">
<P><IMG src="010121-yotuisiyama2-map.gif" width="407" height="307" border="0"></P>
</BODY>
</HTML>
ここも赤字が編集個所
解りにくいと不評ですので、再編集したページを作りました。
小窓がポップアップその2
同じ四石山が例題で、サムネイルの写真から大きな写真にリンクさせます。ひとつづつ開いていって、それぞれが勝手に潰れてくれるように仕掛けています。
ほんぺんでJavaScript の宣言があって、n の変数が変われば、430*350
の大きさで小窓が開くよう命令しています。
<SCRIPT langage="JavaScript">
<!--
var n;
var w;
function winopen(){
w=window.open("../report/010121-yotuisiyama2-map/010121
-"+n+".htm","Image","width=430,height=350");
}
//-->
</SCRIPT>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0//EN">
<HTML><HEAD><SCRIPT Language="JavaScript">
<!--
function popup(aName,types,x,y)
{
if (document.layers)
{
document.layers[aName].x = x;
document.layers[aName].y = y;
document.layers[aName].visibility = types;
}
if (document.all)
{
document.all(aName).style.pixelLeft = x;
document.all(aName).style.pixelTop = y;
document.all(aName).style.visibility = types;
}
}
// -->
</SCRIPT>
本文の中に
<A href="JavaScript:n=1;winopen()"><IMG src="yotuisiyama2/010121s-1.jpg" width="157" height="120"
border="0" hspace="9" vspace="9" align="right" alt="わんぱく王国、滑り台終点の恐竜"></A>
n=1 なら、**s-1 と**-1 が対応するよう命令されています。
それを受けて、大きな写真のURLはこうなっています。
<META name="GENERATOR" content="IBM
HomePage Builder 2001 V5.0.2 for Windows">
<TITLE>わんぱく王国、滑り台終点の恐竜</TITLE>
</HEAD>
<BODY BGCOLOR="#fffacd" onBlur="close();">
<A HREF="010121-1.jpg" onMouseover="popup('al','visible',event.x,event.y)"
onMouseout="popup('al','hidden',0,0)"><IMG
src="010121-1.jpg" width="407" height="307" border="0"></A><BR>
</BODY>
</HTML>
どれも、赤字が編集個所、ここでも onBlur の効果が出るよう宣言しています。
ソースを書いていますが、簡略化して書いていますので、それぞれのオリジナルを当たって確認してください。
同じく再編集したページを作りました。
|
