ロールオーバーのメニューとサムネイル→拡大画像の同時使用

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

0   名前： はな ： 2007/07/07（土） 13:34  ID:o5prilem sub-bK
メニューのロールオーバー(http://www.tagindex.com/javascript/link/change1.html
)と画像表示のロールオーバー(http://www.tagindex.com/javascript/link/change3.html)をカスタマイズしたものを同時に使ったことろ、メニューのロールオーバーまでもが画像に表記された。
メニューの方の画像は、change3.htmlの画像が出ている位置に表示させたくない。
関係しようなHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>施工例</title>
<link rel="stylesheet" type="text/css" href="../sample.css">
<link rel="stylesheet" type="text/css" href="../menew.css">
<link rel="stylesheet" type="text/css" href="../exteria/refo.css">
<script src="../kihon/menew.js" type="text/javascript"></script>
<script src="gaikan.js" type="text/javascript"></script></head>
<body>
<!--メインコンテンツ始まりー-->
<table SUMMARY="施工例集"><tr><td>
<table SUMMARY="施工例集"><tr><td>
<A HREF="gaikan.htm" onMouseOver="On('img21')" onMouseOut="Off('img21')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A></td>
<td>
<A HREF="gaikan.htm" onMouseOver="On('img22')" onMouseOut="Off('img22')"><IMG SRC="../f-gaikan10.jpg" ALT="外観写真" height="70" border="0"> </A></td></tr>
<tr><td>
<A HREF="gaikan.htm" onMouseOver="On('img23')" onMouseOut="Off('img23')" ><IMG SRC="../mn-kan.jpg" ALT="外観写真" height="70" border="0"></A> </td>
<td>
<A HREF="gaikan.htm" onMouseOver="On('img24')" onMouseOut="Off('img24')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A></td></tr>
<tr><td>
<A HREF="gaikan.htm" onMouseOver="On('img25')" onMouseOut="Off('img25')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0" ></A> </td>
<td>
<A HREF="gaikan.htm" onMouseOver="On('img26')" onMouseOut="Off('img26')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A></td></tr>
<tr><td>
<A HREF="gaikan.htm" onMouseOver="On('img27')" onMouseOut="Off('img27')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A> </td>
<td>
<A HREF="gaikan.htm" onMouseOver="On('img28')" onMouseOut="Off('img28')" ><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A></td></tr>
<tr><td>
<A HREF="gaikan.htm" onMouseOver="On('img29')" onMouseOut="Off('img29')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A> </td>
<td>
<A HREF="gaikan.htm" onMouseOver="On('img30')" onMouseOut="Off('img30')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A></td></tr>
</table></td><td><IMG SRC="../ikedahp1.jpg" ALT="START" NAME="sekou" WIDTH="380"></td></tr></table><!--メインコンテンツ終わりー--></div>

<!--メニューのテーブルー-->
<table cellspacing=0 cellpadding=0 summary="メニュー">
<tr><td><A HREF="http://www.asahihouse.jp/" onMouseOver="On('img0')" onMouseOut="Off('img0')"><IMG SRC="../botan/top1.gif" ALT="TOP" BORDER="0" NAME="img0" WIDTH="175" HEIGHT="40"></A></td></tr>
<tr><td class="main" onClick="subopen('menu1')">
<A HREF="#a" onMouseOver="On('img1')" onMouseOut="Off('img1')"><IMG SRC="../botan/asahiie1.gif" ALT="旭ハウスの家" BORDER="0" NAME="img1" WIDTH="175"></A></td></tr>
<tr class="sub" ID="menu1"><td>
<A HREF="../kihon/change1.html" onMouseOver="On('img2')" onMouseOut="Off('img2')"><IMG SRC="../botan/wagaya1.gif" ALT="我が家スタイル" BORDER="0" WIDTH="175" HEIGHT="33" NAME="img2"></A>
<A HREF="../kihon/change1.html" onMouseOver="On('img3')" onMouseOut="Off('img3')"><IMG SRC="../botan/kokoti1.gif" ALT="心地いい家・庭" BORDER="0" WIDTH="175" HEIGHT="33" NAME="img3"></A>
<A HREF="../kihon/change1.html" onMouseOver="On('img4')" onMouseOut="Off('img4')"><IMG SRC="../botan/ie1.gif" ALT="家ができるまで" BORDER="0" WIDTH="175" NAME="img4"></A></td></tr>
<tr><td class="main" onClick="subopen('menu2')">
<a href="#a" onMouseOver="On('img5')" onMouseOut="Off('img5')"><IMG SRC="../botan/iejyuku1.gif" ALT="家塾" BORDER="0" NAME="img5"></a></td></tr>
<tr class="sub" ID="menu2"><td>
<A HREF="../kihon/change1.html" onMouseOver="On('img6')" onMouseOut="Off('img6')"><IMG SRC="../botan/ietatu1.gif" ALT="家づくりの達人" BORDER="0" WIDTH="175" HEIGHT="33" NAME="img6"></A>
<A HREF="../kihon/change1.html" onMouseOver="On('img9')" onMouseOut="Off('img9')"><IMG SRC="../botan/kisuki1.gif" ALT="気がすき" BORDER="0" WIDTH="175" HEIGHT="33" NAME="img9"></A></td></tr>
<tr><td class="main" onClick="subopen('menu3')">
<a href="#a" onMouseOver="On('img7')" onMouseOut="Off('img7')"><IMG SRC="../botan/gaiyou1.gif" ALT="会社概要" BORDER="0" NAME="img7"></a></td></tr>
<tr class="sub" ID="menu3"><td>
<A HREF="../kihon/change1.html" onMouseOver="On('img8')" onMouseOut="Off('img8')"><IMG SRC="../rinku.gif" ALT="sample5" BORDER="0" NAME="img8 "></A></td></tr></table>
</body>
</html>
続きは字数制限により、次レスへ
1   名前： はな（追加ソース） ： 2007/07/07（土） 13:34  ID:o5prilem sub-bK
関係しそうなJSその１
if (document.images) {


// 設定開始（使用する画像を設定してください）
// 画像0
var img0on = new Image();
img0on.src = "../botan/top2.gif"; // ポイント時の画像
var img0off = new Image();
img0off.src = "../botan/top1.gif"; // 通常の画像

// 画像1
var img1on = new Image();
img1on.src = "../botan/asahiie2.gif"; // ポイント時の画像
var img1off = new Image();
img1off.src = "../botan/asahiie1.gif"; // 通常の画像

// 画像2
var img2on = new Image();
img2on.src = "../botan/wagaya2.gif";
var img2off = new Image();
img2off.src = "../botan/wagaya1.gif";

// 画像3
var img3on = new Image();
img3on.src = "../botan/kokoti2.gif";
var img3off = new Image();
img3off.src = "../botan/kokoti1.gif";

// 画像4
var img4on = new Image();
img4on.src = "../botan/ie2.gif";
var img4off = new Image();
img4off.src = "../botan/ie1.gif";

// 画像5
var img5on = new Image();
img5on.src = "../botan/iejyuku2.gif";
var img5off = new Image();
img5off.src = "../botan/iejyuku1.gif";

// 画像6
var img6on = new Image();
img6on.src = "../botan/ietatu2.gif";
var img6off = new Image();
img6off.src = "../botan/ietatu1.gif"

// 画像7
var img7on = new Image();
img7on.src = "../botan/gaiyou2.gif";
var img7off = new Image();
img7off.src = "../botan/gaiyou1.gif"

// 画像8
var img8on = new Image();
img8on.src = "../botan/gaiyou2.gif";
var img8off = new Image();
img8off.src = "../botan/gaiyou1.gif"

// 画像9
var img9on = new Image();
img9on.src = "../botan/kisuki2.gif";
var img9off = new Image();
img9off.src = "../botan/kisuki1.gif"// 設定終了


}

// ポイント時の処理
function On(name) {

if (document.images) {
document.images[name].src = eval(name + 'on.src');
}

}

// 放した時の処理
function Off(name) {

if (document.images) {
document.images[name].src = eval(name + 'off.src');
}

}
// ツリー
chMenu=0;
function subopen(tName){
tMenu=(document.all)?document.all(tName).style:document.getElementById(tName).style;
if(chMenu)chMenu.display="none";
if(chMenu==tMenu){chMenu=0;
}else{chMenu=tMenu;
tMenu.display="block";}
}/* himajin.moo.jp */

関係しそうなJSその２
if (document.images) {


// 設定開始（使用する画像を設定してください）

// 通常の画像
var img20 = new Image();
img20.src = "../ikedahp1.jpg";

// ポイント時の画像1
var img21 = new Image();
img21.src = "../ikedahp1.jpg";

// ポイント時の画像2
var img22 = new Image();
img22.src = "../f-gaikan10.jpg";

// ポイント時の画像3
var img23 = new Image();
img23.src = "../mn-kan.jpg";

// ポイント時の画像4
var img24 = new Image();
img24.src = "../mn-kan.jpg";

// ポイント時の画像5
var img25 = new Image();
img25.src = "../mn-kan.jpg";

// ポイント時の画像6
var img26 = new Image();
img26.src = "../mn-kan.jpg";

// ポイント時の画像7
var img27 = new Image();
img27.src = "../mn-kan.jpg";

// ポイント時の画像8
var img28 = new Image();
img28.src = "../mn-kan.jpg";

// ポイント時の画像9
var img29 = new Image();
img29.src = "../mn-kan.jpg";

// ポイント時の画像10
var img30 = new Image();
img30.src = "../mn-kan.jpg";

// 設定終了


}

// ポイント時の処理
function On(name) {

if (document.images) {
document.images['sekou'].src = eval(name + '.src');
}

}

// 放した時の処理
function Off(name) {

if (document.images) {
document.images['sekou'].src = eval(name + '.src');
}

}
実際の使いたいページを仮にサーバーにUPしてみたもののURL
http://www.asahihouse.jp/sekourei/gaikan.htm
画像は、適当に使っているので気にしないでください。考えてみたこと・・・
各JS内ある、document.images～の部分の変更の様な気がするのですがよく分かりません。

また、（http://www.tagindex.com/javascript/link/change1.html）の様なロールオーバーメニューと、
サムネイルを選ぶと画像が拡大するJSを同時に使っていたサイトのソースを見てみたのですが、
どうやらそのサイトでは、画像の拡大のほうにオンマウスではなくオンクリックを使っているようでした。

他のサイトで、サムネイルの方にオンマウスを使っているサイトでは、メニューとサムネイル画像が別フレームになっていました。

希望としては、フレームは使いたくなく、両方オンマウスのほうがいいと思うので対策法をお願いします。
両方オンマウスが出来ない場合は、サムネイルのほうだけオンクリックでお願いします。

同一ファイル内に両方オンマウスを使っているのが問題なのでしょうか？
2   名前： 匿名希望♪ ： 2007/07/07（土） 13:34  ID:D/mQtTzV sub-Ax
メニューと画像とで、
同じ関数( On, Off )を使っていることがまずおかしいです。
関数内部で場合分けをしているわけでもないですし。
メニューと画像は別々の関数を用意したほうがいいですよ。
3   名前： はな ： 2007/07/07（土） 13:34  ID:o5prilem sub-bK
同じ関数とは、
JSその１と、
// ポイント時の処理
function On(name) {

if (document.images) {
document.images[name].src = eval(name + 'on.src');
}

}

// 放した時の処理
function Off(name) {

if (document.images) {
document.images[name].src = eval(name + 'off.src');
}

}
JSその２で両方
// ポイント時の処理
function On(name) {

if (document.images) {
document.images['sekou'].src = eval(name + '.src');
}

}

// 放した時の処理
function Off(name) {

if (document.images) {
document.images['sekou'].src = eval(name + '.src');
}

}
function On(name)とfunction off(name)にjs1・js2のどちらもnameを使っているせいでしょうか。

JSその２の同じ部分で
if (document.images) {
document.images['sekou'].src = eval(name + '.src');
}
が同じ場合は統一し、HTMLのonMouseOverとonMouseOutの後ろの部分が同じになってもいいということですね。
4   名前： はな ： 2007/07/07（土） 13:34  ID:o5prilem sub-bK
実際にソースの変更をしてみたのですが思うようにいきません。
JSの変更点
if (document.images) {


// 設定開始（使用する画像を設定してください）

// 通常の画像
var img20 = new Image();
img20.src = "../ikedahp1.jpg";

// ポイント時の画像1
var img21 = new Image();
img21.src = "../ikedahp1.jpg";

以下省略
// 設定終了


}

// ポイント時及び放したときのの処理
function On(gazou) {

if (document.images) {
document.images['sekou'].src = eval(gazou + '.src');
}

}
HTMLの変更点
サムネイル画像のテーブル内表記のみ
<A HREF="gaikan.htm" onMouseOver="On('img21')" onMouseOut="On('img21')"><IMG SRC="../ikedahp1.jpg" ALT="外観写真" height="70" border="0"></A>
<A HREF="gaikan.htm" onMouseOver="On('img22')" onMouseOut="On('img22')"><IMG SRC="../f-gaikan10.jpg" ALT="外観写真" height="70" border="0"></A>
拡大画像
<IMG SRC="../ikedahp1.jpg" ALT="START" NAME="sekou" WIDTH="380">
JS1は変更なし
主な変更点
①ポイント時と放したときの関数を統一
②JS１、２共にnameを使っていたので、２のほうだけgazouに変更

結果:変わっていません
現状をまた同じURLにUPしておきます。

5   名前： はな ： 2007/07/07（土） 13:34  ID:o5prilem sub-bK
解決しました。
function Onのonの部分を、samと変えてみたところ問題なく表示されるようになりました。
function Onの部分はonとoffしか使えないと思っていたので、他のものも使えることを知りました。
匿名さんありがとうございました。

これでフレームを使うことなく、両方ともオンマウスで使えそうです。

6   名前： 匿名希望♪ ： 2007/07/07（土） 13:34  ID:D/mQtTzV sub-Ax
よかったです♪

1つだけ…
この掲示板には「匿名」というお名前の方がいらっしゃるので
名前を書くときは「匿名希望♪」と正確に書かれた方がよろしいかと思います。

失礼しました。
7   名前： 匿名希望 ： 2007/07/07（土） 13:34  ID:D/mQtTzV sub-Ax
あ…「♪」って機種依存でしたっけ…汗
♪はやめよう…
一覧へ戻る