オンマウスでフレーム越しに画像を表示するのは？

[新着] Webテンプレートを仮オープンしました

0   名前： ゆい ： 2005/11/27 14:49
初めまして。ゆいと申します。こちらで
http://www.tagindex.com/javascript/link/change3.html
ポイント時に画像を切りかえる解説がありますが、それがフレーム越し
だったらどうなるか解らず、質問させて頂きます。

例えば縦割りの二分割のフレーム画面で、左のフレームのテキストに
マウスを乗せると、右のフレームの中央に小さなサンプル画像が表れて、
その左フレームのテキストをクリックすると右フレームに大きな画像が
出る。と言うものを作りたいのです。

フレーム画面と左のテキスト画面、右の画像画面と、3つの画面で指定が
必要だと思うのですが、同一画面でしかオンマウスの画像の切り替えが
成功せず、すっかり混乱して頭を悩ませています。
解り易く解説をしてくださる方がいらっしゃいましたら、どうぞ
よろしくお願いします。
1   名前： m035 ： 2005/11/27 14:49  ［URL］
条件：
1.左のフレームのテキスト（リンク）に対応し、右のフレームに画像（0〜2.jpg）表示。
2.条件1のテキストをクリックで右フレームの画像拡大。
3.マウスがテキストから離れたら規定の画像（none.jpg）を表示。

作成手順：
（1）フレームの親となるhtml。bodyタグの代わりにframesetを入れ、frameで左フレームのhtmlを指定、name="fleft"とし、
さらにframeで右フレームのhtmlを指定、name="fright"とします。
（参考　http://www.htmq.com/html/frameset.shtml）

（2）html（親、左、右フレーム用）は同じディレクトリに置いてあるとして、読み込む画像も同じディレクトリ内のimgフォルダ内に、
デフォルトで表示するnone.jpgと0.jpgから連番で2.jpgまでの画像を準備しておきます。

（3）左フレームのhead内に以下の<scriptから/script>までを入れておきます。
<script type="text/javascript">
<!--
function imgA(url,wid,hei){
window.top.fright.imgB(url,wid,hei);//右フレームの関数imgBの呼び出し
//window.frame名.関数名(引数);で指定フレームの関数を呼び出せます
}

function off(){
imgA('img/none.jpg',100,100);//マウスが離れたときの動作
}
//-->
</script>

body内には
<a href="#" onclick="imgA('img/0.jpg',600,480)" onmouseover="imgA('img/0.jpg',100,100)" onmouseout="off()">0.jpg</a>
<a href="#" onclick="imgA('img/1.jpg',600,480)" onmouseover="imgA('img/1.jpg',100,100)" onmouseout="off()">1.jpg</a>
<a href="#" onclick="imgA('img/2.jpg',600,480)" onmouseover="imgA('img/2.jpg',100,100)" onmouseout="off()">2.jpg</a>
のように、
imgA(表示する画像URL,表示する幅,表示する高さ)を
onclick・・・クリックしたとき
onmouseover・・・マウスが乗ったとき
にそれぞれ指定。幅と高さはpxとして数値のみ入力します。
onmouseout・・・マウスが離れたとき
にはoff()を設定し、JavaScript内の関数off()でマウスが離れた時の表示をimgA（）で同様に設定しておきます。
なお、このときの画像URLは後述する（4）の使われるイメージのurlと一字一句同じものにしてください。
2   名前： m035 ： 2005/11/27 14:49  ［URL］
以下つづきです・・・

(4)右フレームのhead内に以下の<scriptから/script>までを入れておきます。
<script type="text/javascript">
<!--
var imgURL=new Array("img/none.jpg","img/0.jpg","img/1.jpg","img/2.jpg");//使われるイメージのurlを「"」で囲み、「,」で区切って入れておく。
var imgP=new Array();
for(i=0;i<imgURL.length;i++){
imgP[imgURL[i]]=new Image();
imgP[imgURL[i]].src=imgURL[i];//使われるイメージのプレロード
}

function imgB(url,wid,hei){
if(document.images){
var obj=document.images["view"];
obj.src=imgP[url].src;
obj.width=wid;
obj.height=hei;
}
}
//-->
</script>
body内には
<img src="none.jpg" name="view" alt="画像表示エリア" title="ここに画像が表示されます">
のように、nameにviewをこの例では入れておきます。
<center>と</center>の間にimgタグを入れておくと見栄えがいいとと思います（と言うより位置を指定したほうが良いでしょうね・・・）。
コレで完成。親フレームのhtmlを開けば動作が確認できるはず。

説明が足らないでしょうから、分からないことは書き込んでくれれば出来る限り対応します。
それと↓にサンプルページ作りましたのでどうぞ。ソースもDLできます。
http://www.geocities.jp/ram0kb/js/imgch/ind.html
3   名前： ゆい ： 2005/11/27 14:49
m035さま

さっそくのとても丁寧な返信、その上サンプルページやソースのDLまで、
何から何まで本当にありがとうございます！！
こんなに沢山の解説、文字を入力するのだって大変なご苦労でしたでしょうに、
見ず知らずの私に、m035さまの温かいお気遣いが涙が出るほど嬉しいです。
ここ二週間程、このオンマウスでフレーム越しに画像を表示させる方法と格闘
し続けていて、結局自力では出来なかったので藁にもすがる思いでした。

ありがたくソースをDLさせて頂いて、まずその雛型に当てはめてみましたら、
お陰様で無事思い通りの表示が出来ました！
これから、そのm035さまのタグを元に自分の作っているSCCのページにはりきって
組み込んでみますね。
初心者なもので恐らくこの作業がまた数日間かはかかるかと思いますが、そこで
またつまづいたら、質問させて頂いても構いませんか？
どうぞよろしくお願い致します。

m035さまのサイトの方もお邪魔させて頂いたのですが、本当に勉強になること
ばかりでいそいそとブックマークさせて頂きました。
沢山の感謝をこめて。どうもありがとうございました！
4   名前： はる ： 2005/11/27 14:49
>>2
念のためお聞きしますが、
どのバージョンのJavaScript、もしくはDOMを想定していますか。

この書き方だとlanguage="JavaScript1.1"が要りそうだけど、
でもDOM2-HTMLの書式もあったりして、何となくちぐはぐ。
5   名前： m035 ： 2005/11/27 14:49  ［URL］
>>>2
>念のためお聞きしますが、
>どのバージョンのJavaScript、もしくはDOMを想定していますか。
う〜ん。特には考えてないです。おそらくほとんどのブラウザで動くだろう、と思われる書き方をしたつもりです。
勉強不足ですね、すいません。

>この書き方だとlanguage="JavaScript1.1"になりそうだけど。
そうですか。教えていただきありがとうございます。
6   名前： ゆい ： 2005/11/27 14:49
はるさま
m035さま

細やかなお気遣い、本当にありがとうございます。
language="JavaScript1.1を記述すれば良いのですね。
正直解らない事ばかりなので、知識の深い方に色々とご親切を
頂いて感謝するばかりです。
これからもどうぞよろしくお願いします。
一覧へ戻る