複数のスクリプトを別起動させる
-
0 名前: タニシゲハヤト : 2005/10/27 00:40
- ”画像にオンマウスで拡大画像と説明、クリックでリンク先へ” のスクリプトを同じページで二つ、または複数、表示してそれぞれが別起動することは出来ないものでしょうか?
単純にこのタグをコピペして、もう一つ作ったのですが、一つは作動してもう一つは作動しないなど、なかなかうまく行きません…フォームとリンクは別起動に出来たのですが、
特にオンマウスで拡大表示が、もう一つのスクリプトでは作動しません。どなたか是非ご教授下さい。
”画像にオンマウスで拡大画像と説明、クリックでリンク先へ”の
:記述タグ:
<HEAD><script language="JavaScript">
<!--
//イメージの事前読み込み
if(navigator.appVersion.charAt(0)>=3)
{
movimg=new Array()
movimg[0] = new Image();movimg[0].src='marve1.jpg';
movimg[1] = new Image();movimg[1].src='marve12.jpg';
};
//画像書き換え
function changImg1(imgNoA,imgNoB)
{
if(navigator.appVersion.charAt(0)>=3){
document.images[imgNoA].src=movimg[imgNoB].src;
};
};
<!---->
</script>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.1.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=1200; pageheight=5000">
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV style="width : 500px;height : 200px;top : 10px;left : 255px;
position : absolute;
z-index : 3;
" id="Layer1" align="center"><img src="photograph.jpg" width="325" height="230"></DIV>
<DIV style="top : 245px;left : 334px;
position : absolute;
z-index : 1;
" id="Layer3">
<form>
<p align="center"><input type="text" size="65" name="e0"></p>
</form>
</DIV>
<DIV style="width : 960px;height : 10px;top : 273px;left : 24px;
position : absolute;
z-index : 2;
" id="Layer2" align="center"><a href="marve1.jpg"style="text-decoration: none"onmouseover="changImg1(0,0);
document.forms[0].e0.value='ザ〜ン!! Marvellicです! 4649!!'"><IMG src="marve1.jpg" border="0" width="112" height="84"BORDER=0> </a><a
href="marve12.jpg"style="text-decoration: none"
onmouseover="changImg1(0,1);
document.forms[0].e0.value='階段並んでパシリッ! 夏の大塚です'"><img
src="marve12.jpg" border="0" width="112" height="84"BORDER=0> </a>
</DIV>
-
1 名前: m035 : 2005/10/27 00:40 [URL]
- 単純にBODY以下を2度書いたのだとすれば、forms[0]は何番目のフォームかをあらわしますので、
二つ目の部分ではforms[1]にしなければなりませんし、
script部分もimagesがこのHTMLの何番目のimgタグかをさしていますので修正が必要です。
-
2 名前: タニシゲハヤト : 2005/10/27 00:40
- m035様 ご解答ありがとうございます。ご指示どおりforms[1]に
書き換えましたが、これはフォームが別起動するだけでオンマウスで拡大表示が、
もう一つのスクリプトでは作動しません。imgタグの番号も修正したのですが…
ちなみにBODY以下を2度書くのではなく、<HEAD>からこのタグを全部コピペ
して、もう1セット同じモノを表示したいと思っております。拡大表示も
もう一つあって、それぞれがオンマウスで別起動するようにしたいのです。
もしよろしければヨロシクお願いします。
-
3 名前: zack : 2005/10/27 00:40
- こんにちは。
<script type="text/javascript">
<!--//
//イメージの事前読み込み
if(navigator.appVersion.charAt(0)>=3){
movimg=new Array(2);
movimg[0] = new Image();movimg[0].src='marve1.jpg';
movimg[1] = new Image();movimg[1].src='marve12.jpg';
}
//画像書き換え
function changImg1(imgNoA,imgNoB){
if(navigator.appVersion.charAt(0)>=3){
document.images[imgNoA].src=movimg[imgNoB].src;
}
}
//-->
</script>
<div style="width:500px;height:200px;top:10px;left:255px;position:absolute;" align="center"><img src="photograph.jpg" width="325" height="230"></div>
<div style="top:245px;left:334px;position:absolute;z-index:1;" id="Layer3">
<form><p align="center"><input type="text" size="65" name="e0"></p></form>
</div>
<div style="width:960px;height:10px;top:273px;left:24px;position:absolute;" align="center"><a href="marve1.jpg"style="text-decoration: none"onmouseover="changImg1(0,0);document.forms[0].e0.value='ザ〜ン!! Marvellicです! 4649!!'"><img src="marve1.jpg" border="0" width="112" height="84" border=0></a><a href="marve12.jpg"style="text-decoration: none" onmouseover="changImg1(0,1); document.forms[0].e0.value='階段並んでパシリッ! 夏の大塚です'"><img src="marve12.jpg" border="0" width="112" height="84" border=0></a></div>
<div style="width:500px;height:200px;top:10px;left:255px;position:absolute;" align="center">
<img src="photograph.jpg" width="325" height="230">
</div>
<div style="top:245px;left:334px;position:absolute;"><form><p align="center"><input type="text" size="65" name="e0"></p></form></div>
<div style="width:960px;height:10px;top:273px;left:24px;position:absolute;" align="center"><a href="marve1.jpg"style="text-decoration: none"onmouseover="changImg1(3,0);document.forms[1].e0.value='ザ〜ン!! Marvellicです! 4649!!'"><img src="marve1.jpg" border="0" width="112" height="84" border=0></a><a href="marve12.jpg"style="text-decoration: none" onmouseover="changImg1(3,1); document.forms[1].e0.value='階段並んでパシリッ! 夏の大塚です'"><img src="marve12.jpg" border="0" width="112" height="84" border=0></a></div>
ではがんばってください。
-
4 名前: タニシゲハヤト : 2005/10/27 00:40
- すいません…解決しません…
”画像にオンマウスで拡大画像と説明、クリックでリンク先へ”の
javascriptを同一ページに二つ以上作って、それどれが別起動するように
したいのです。何処をどのように書き換えればいいのですか?
もしよろしければご教授下さい。
-
5 名前: m035 : 2005/10/27 00:40 [URL]
- >>3のソースでそれぞれが動いていると思うのですが、
具体的に、
OOしたらXXしたいのに△△になっている〜にしたい
のような書き方で質問してください。
どのようにこちらとそちらの理解している内容が異なっているのか伝わらないので・・・
-
6 名前: タニシゲハヤト : 2005/10/27 00:40
- そうですね。内容が行き違ってるのかもしれません。まず>>3のソースを
コピペしてアップします。これはもちろん通常通り作動しました。
問題は次です。そのページにそのソースをもう一つコピペしてアップします。
位置は多少ズラして… そしたら同じスクリプトが二つできますよね。
拡大表示画面も二つ、サムネイル羅列も二つです。つまりこのスクリプトが同じ
ページに2セット出切る訳です。そしてサムネイルにマウスを持って行くと
オンマウスで最初にアップしたスクリプトは拡大表示で作動します。
次に二つ目にアップしたスクリプトです。同じようにマウスを持っていくと、
このスクリプトは二つ目の拡大表示画面が作動しません…
この二つのスクリプト、それぞれが作動するようにしたいのです…拡大表示画面も
是非ともよろしくお願いします。
-
7 名前: m035 : 2005/10/27 00:40 [URL]
- >>3は「拡大画面1つとそれに対応する2つの画像」のセット2つ用のスクリプトです。
それをさらに2セット設置するならさらに修正が必要です。
onmouseoverの
changImg1(3,1); の引数や、
document.forms[1].e0.value='階段並んでパシリッ! 夏の大塚です'"のforms[]の引数
を修正してください。
理由は>>1のとおりです。
-
8 名前: zack : 2005/10/27 00:40
- >>6
見た目上は変わりません。
それは絶対位置で重なってるからです。
位置をずらせば2つとも動作しているのが分かります。
僕の回答に対する返事が最初の質問と同じところからすると
ソースは見ずに表示された画面のみを見てるんでしょうね、ハー。
-
9 名前: m035 : 2005/10/27 00:40 [URL]
- >位置は多少ズラして…
と、書いてあるので「拡大イメージと対応する画像2つ」を>>3のように2つ並べ、
2つ並べたものをさらに2つ置く(4つの拡大イメージとそれぞれのサムネイル)という意味かと思ったんですが、違うのでしょうか。
とりあえず
style="top:245px;left:334px;position:absolute;"
といったところのtopやleftの値をzack氏が指摘しているようにずらしていないなら、ずらしてください。
>>3のスクリプトは問題なく2つとも動くと私も思いますから。
-
10 名前: タニシゲハヤト : 2005/10/27 00:40
- レス遅れましてすいません。 zack様、m035様いろいろご指示して頂きありがとう
ございました。指摘どおりに実行しました所ついに成功いたしました!!
いろいろお手数かけました。私自身の知識の無さもまた痛感いたしました。。
質問させて頂きよかったです!大変感謝しております。また何かありましたら
是非ご教授よろしくお願いします。
ありがとうございました!!