金沢観光情報 【 きまっし金沢 】

スクロールマップ(スクロール地図)を作成してみました。    


きまっし金沢で使っている大きな地図は,インラインフレームを利用してスクロールバーで上下左右に移動させていたのですが,フレームの窓を大きくとろうとするとスクロールバーが隠れてしまい使いにくいので,マウスの動きに合わせて地図も移動できるスクロール地図(スクロールマップ)を導入したいと思っていたのです。
ネットや本で,スクロール地図(スクロールマップ)の導入方法を調べたのですが,それほど情報がなく,やっとみつけたサイトや本を参考に試してみても,なかなかうまくいきません。
「スクロール地図を作ろう」というページを見つけてこれぞ探していたページと喜んでいたのですが,ホームページ製作の会社が昔作ったページで,ページこそは残っているのですが,トップページからはつながっていなく,説明も決して判りやすくなく,いろいろファイル構造とか探してみたのですがJavaScriptの知識が無い事もあって,自分のページ上で再現できませんでした。これを使えれば,思い通りの事ができたのですけど。

http://www.jmixnet.co.jp/map/info/c1-1.html

http://www.jmixnet.co.jp/map/info/c2-1.html

http://www.jmixnet.co.jp/map/info/c2-2.html

http://www.jmixnet.co.jp/map/info/c2-3.html

http://www.jmixnet.co.jp/map/info/c2-4.html

http://www.jmixnet.co.jp/map/info/c2-5.html

ただ,文字情報だけを動かす事はホームページ上で再現できました。
http://kimassi.net/mapscroll1/mapscroll1.html

スクロール地図(スクロールマップ)を製作するについて,基本的にはインラインフレームを使うのは同じですが,フレームの中に画像を入れるのではなくて,フレームの中に別のページを入れて,フレーム内のページの地図画像をマウスの動きに同期させる手法をとります。本格的なスクロール地図(スクロールマップ)は分割された地図の画像を使っているようですが,きまっし金沢では,そんなに本格的なスクロール地図(スクロールマップ)までは必要ないので,とりあえずマウスで地図画像を上下左右にスクロールする方法を調べました。
インラインフレームはページ内に
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 ></iframe></center>
を入れます。
scroll.htmは任意のページ名で良いですし,width:900; height:480は使用したいインラインフレームの窓の大きさに合わせます。スクロールバーを消したい場合は
scrolling=”no”を入れます。
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 scrolling=”no”></iframe></center>

画像をマウスの動きに合わせて画像をスクロールする方法を根気良く探したら説明も親切で簡単に使えるページが見つかりました。
http://www.pat.hi-ho.ne.jp/oka_tosho/drag_drop1/drag_drop1.htm
を参考にやっとスクロール地図(スクロールマップ)っぽいものができるようになりました。

外からリンクするページ(ページ本体)
————————————————————————————————-
<html>
<head>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<META http-equiv=”Content-Style-Type” content=”text/css”>
</head>
<body>
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 ></iframe></center>
</body>
</html>
————————————————————————————————

インラインフレーム内のページscroll.htmの内容は
————————————————————————————————
<html>
<head>
<meta http-equiv=”Content-Language” content=”ja”>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<META http-equiv=”Content-Style-Type” content=”text/css”>
<script language=”JavaScript” src=”http://kimassi.net/mapscroll3/scroll.js”></script>
<style type=”text/css”>
<!–
.dragme{position:relative;}
–>
</style>
</head>
<body>
<img src=”yasuimisemap.gif” width=”3059″ height=”3421″ class=”dragme”>
</body>
</html>
——————————————————————————————-
“yasuimisemap.gif” width=”3059″ height=”3421″ の内容は地図の画像の名称,大きさに合わせて変更します。
“http://kimassi.net/mapscroll3/scroll.js”はscroll.jsのある位置のアドレスに合わせて変更します。

scroll.jsの内容は
——————————————————————————————-
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX – x : tx + event.clientX – x;
dobj.style.top = nn6 ? ty + e.clientY – y : ty + event.clientY – y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? “HTML” : “BODY”;
while (fobj.tagName != topelement && fobj.className != “dragme”)
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className==”dragme”)
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function(“isdrag=false”);
——————————————————————————–
です。

できた今回導入したスクロール地図のサンプルはhttp://kimassi.net/insyokutentizu.htmlです。
一応スクロールバーも利用できるようにしておきました。
ついでに店名の上にマウスを乗せると説明文の表示もするようにしました。地図上からGoogleMapなどの詳細地図にリンクする事も簡単にできます。本当は地図画像の端っこに行くと,それ以上はスクロールしないようにすれば良かったのですが,スキル不足で,そこまではできませんでした。とりあえずは現状で満足しています。
このスクロールマップはFirefoxでは動作しないようです。



福井観光Web 飛騨高山観光Web 金沢のお医者さん情報(金沢の医院・病院の情報) 金沢お葬式情報 京都紅葉情報