JAVASCRIPTで、複数の画像を入れ替える



パソコントラブル解決・過去ログTOP  >  ログTOP

◇-JAVASCRIPTで、複数の画像を入れ替える-淳子(10/28-02:52)No.3984
　┗Re:JAVASCRIPTで、複数の画像を入れ替える-vice(10/28-03:49)No.3989
　　┣Re:JAVASCRIPTで、複数の画像を入れ替える-vice(10/28-04:24)No.3991
　　┃┗Re:JAVASCRIPTで、複数の画像を入れ替える-淳子(10/28-04:41)No.3992
　　┃　┗Re:JAVASCRIPTで、複数の画像を入れ替える-淳子(10/28-05:28)No.3995
　　┗Re:JAVASCRIPTで、複数の画像を入れ替える-淳子(10/28-05:24)No.3994
　　　┗Re:JAVASCRIPTで、複数の画像を入れ替える-vice(10/28-11:38)No.4005
　　　　┗Re:JAVASCRIPTで、複数の画像を入れ替える-淳子(10/29-15:55)No.4111
　　　　　┣Re:追記です-淳子(10/29-16:00)No.4112
　　　　　┗Re:JAVASCRIPTで、複数の画像を入れ替える-vice(10/30-00:31)No.4173
　　　　　　┗Re:JAVASCRIPTで、複数の画像を入れ替える-淳子(10/30-01:57)No.4179
　　　　　　　┗Re:JAVASCRIPTで、複数の画像を入れ替える-vice(10/30-03:26)No.4184
　　　　　　　　┗Re:有難うございました。-淳子(10/30-16:49)No.4215
▲このページのトップに戻る
3984JAVASCRIPTで、複数の画像を入れ替える淳子 10/28-02:52

OS名：Windows98
パソコン名：富士通　FMV
ソフト名：
始めてJAVASCRIPTで、複数の画像を入れ替える記述をしてみました。
本に記載された通り記述してみましたが、よく考えてみると、自分のJPG　GIF
ファイルを持ってくる方法がわかりません。
p1.jpg p2.jpgでの画像を使いたいのですが・・

「切り替える画像番号は、あらかじめ格納しておき、クリックごとに1加算し、指定
枚数を超えたら。0にします。」との説明があるのですが・・・よく判りません。
長文になり申し訳ありませんが、ここにタグを表記させて頂きました。
画像の入れ方の方法を教えて下さい。
以上よろしくお願いします。

<html>
<head>
<title>クリックされたら複数の画像を入れ替える</title>

<script language="JAVASCRIPT">< !--
num=0;
function change()
{
num++;
num %=4;
document. myimg1.src=type"+num+"jpg";
document. myimg2.src=type"+num+"jpg";
}
//--></script>
</head>
<body>
<a href="JAVASCRIPT;change()">
<img src"=type0.jpg" name="my img1"border="0"><br>
<img src"=type0.jpg" name="my img2"border="0"><br>
</a>
</body>
</html>


▲このページのトップに戻る
3989Re:JAVASCRIPTで、複数の画像を入れ替えるvice 10/28-03:49
記事番号3984へのコメント
これでどうでしょう？

===================================================

<html>
<head>
<title>クリックされたら複数の画像を入れ替える</title>
<script language="JAVASCRIPT">
<!--
function swap() {
tmp = document.myimg1.src;
document.myimg1.src = document.myimg2.src;
document.myimg2.src = tmp;
}
//-->
</script>
</head>
<body>
<a href="JavaScript:swap();">
<img src="p1.jpg" name="myimg1" border="0"><br>
<img src="p2.jpg" name="myimg2" border="0"><br>
</a>
</body>
</html>

===================================================

# これなら“p1.jpg”“p2.jpg”じゃなくても、どんなファイル名でも使えますよ。

▲このページのトップに戻る
3991Re:JAVASCRIPTで、複数の画像を入れ替えるvice 10/28-04:24
記事番号3989へのコメント
淳子さんの書かれたコードを元に作るならこんな感じでしょうか。

===================================================

<html>
<head>
<title>クリックされたら複数の画像を入れ替える</title>

<script language="JavaScript"><!--
num=1;

function change(){
document.myimg1.src = "p" + (num % 2 + 1) + ".jpg";
num++;
document.myimg2.src = "p" + (num % 2 + 1) + ".jpg";
}
//--></script>
</head>
<body>
<a href="JavaScript:change();">
<img src="p1.jpg" name="myimg1" border="0"><br>
<img src="p2.jpg" name="myimg2" border="0"><br>
</a>
</body>
</html>

▲このページのトップに戻る
3992Re:JAVASCRIPTで、複数の画像を入れ替える淳子 10/28-04:41
記事番号3991へのコメント
viceさんは No.3991「Re:JAVASCRIPTで、複数の画像を入れ替える」で書きました。
>淳子さんの書かれたコードを元に作るならこんな感じでしょうか。
>
>===================================================
>
><html>
><head>
><title>クリックされたら複数の画像を入れ替える</title>
>
><script language="JavaScript"><!--
>num=1;
>
>function change(){
> document.myimg1.src = "p" + (num % 2 + 1) + ".jpg";
> num++;
> document.myimg2.src = "p" + (num % 2 + 1) + ".jpg";
>}
>//--></script>
></head>
><body>
><a href="JavaScript:change();">
><img src="p1.jpg" name="myimg1" border="0"><br>
><img src="p2.jpg" name="myimg2" border="0"><br>
></a>
></body>
></html>

どうも有り難うございました。
さっそく、試してみたいと思います。
また、結果報告させて頂きます。
取り急ぎお礼まで。

▲このページのトップに戻る
3995Re:JAVASCRIPTで、複数の画像を入れ替える淳子 10/28-05:28
記事番号3992へのコメント
淳子さんは No.3992「Re:JAVASCRIPTで、複数の画像を入れ替える」で書きました。
>viceさんは No.3991「Re:JAVASCRIPTで、複数の画像を入れ替える」で書きました。
>>淳子さんの書かれたコードを元に作るならこんな感じでしょうか。
>>
>>===================================================
>>
>><html>
>><head>
>><title>クリックされたら複数の画像を入れ替える</title>
>>
>><script language="JavaScript"><!--
>>num=1;
>>
>>function change(){
>> document.myimg1.src = "p" + (num % 2 + 1) + ".jpg";
>> num++;
>> document.myimg2.src = "p" + (num % 2 + 1) + ".jpg";
>>}
>>//--></script>
>></head>
>><body>
>><a href="JavaScript:change();">
>><img src="p1.jpg" name="myimg1" border="0"><br>
>><img src="p2.jpg" name="myimg2" border="0"><br>
>></a>
>></body>
>></html>
>
>どうも有り難うございました。
>さっそく、試してみたいと思います。
>また、結果報告させて頂きます。
>取り急ぎお礼まで。

こちらの記述をそのままコピーで、今、試してみましたが、成功しました。
記述していなかったP3.jpgまで、うまく表示され、３枚の画像がクリックするたびに
うまく入れ替わっています。
どうも有り難うございました。M(__)M

▲このページのトップに戻る
3994Re:JAVASCRIPTで、複数の画像を入れ替える淳子 10/28-05:24
記事番号3989へのコメント
viceさんは No.3989「Re:JAVASCRIPTで、複数の画像を入れ替える」で書きました。
>これでどうでしょう？
>
>===================================================
>
><html>
><head>
><title>クリックされたら複数の画像を入れ替える</title>
><script language="JAVASCRIPT">
><!--
>function swap() {
> tmp = document.myimg1.src;
> document.myimg1.src = document.myimg2.src;
> document.myimg2.src = tmp;
>}
>//-->
></script>
></head>
><body>
><a href="JavaScript:swap();">
><img src="p1.jpg" name="myimg1" border="0"><br>
><img src="p2.jpg" name="myimg2" border="0"><br>
></a>
></body>
></html>
>
>===================================================
>
># これなら“p1.jpg”“p2.jpg”じゃなくても、どんなファイル名でも使えますよ。

すみません・・ちょっと、この言われている意味が判らないのですが・・

自分の画像ファイルを、何か違うものに書き換えるようなことが、本の説明にはありました。
ここでは、p1.jpg”“p2.jpg”記述ではありませんでしたが・・


▲このページのトップに戻る
4005Re:JAVASCRIPTで、複数の画像を入れ替えるvice 10/28-11:38
記事番号3994へのコメント
>すみません・・ちょっと、この言われている意味が判らないのですが・・
>
>自分の画像ファイルを、何か違うものに書き換えるようなことが、本の説明にはありました。
>ここでは、p1.jpg”“p2.jpg”記述ではありませんでしたが・・

あ、私が言っていたのはファイル名に数字がなくても、
つまり“first.jpg”と“second.jpg”でも動きますよ、
ってことです。

もとのコードでは数字が入っているファイルでしか動かないので。

▲このページのトップに戻る
4111Re:JAVASCRIPTで、複数の画像を入れ替える淳子 10/29-15:55
記事番号4005へのコメント

>もとのコードでは数字が入っているファイルでしか動かないので。
詳しくご説明頂いて有難うございました。

今、その2枚の画像は、縦に（上下）に並んでいるのですが、これを横に（右左）に並べたいのですが、
それは可能でしょうか？
また、可能であれば、左右に並べた画像の右の画像には右側に文字を（コメント程度）入れたいのです。
左の画像の左側にも、同じく文字を入れたのですが、それも可能でしょうか・・？

どの位置にどのような記述をすれば良いのでしょうか・・
もし、ご説明頂けるようでしたら、よろしくお願い致します。
何度もあつかましく申し訳ございません。

▲このページのトップに戻る
4112Re:追記です淳子 10/29-16:00
記事番号4111へのコメント
先に投稿で記述して頂いた、タグの間に、入れて頂ければ、判り易いと思います。
＞記事ナンバー　3991＜

▲このページのトップに戻る
4173Re:JAVASCRIPTで、複数の画像を入れ替えるvice 10/30-00:31
記事番号4111へのコメント

imgタグのname属性が正しければ、画像がページ内のどこにあっても動作します。
ですから、横に並べてコメントを入れるなら、以下でできます。

<html>
<head>
<title>クリックされたら複数の画像を入れ替える</title>

<script language="JavaScript"><!--
num=1;

function change(){
document.myimg1.src = "p" + (num % 2 + 1) + ".jpg";
num++;
document.myimg2.src = "p" + (num % 2 + 1) + ".jpg";
}
//--></script>
</head>
<body>
<a href="JavaScript:change();">
左のコメント<img src="p1.jpg" name="myimg1" border="0">
<img src="p2.jpg" name="myimg2" border="0">右のコメント
</a>
</body>
</html>

▲このページのトップに戻る
4179Re:JAVASCRIPTで、複数の画像を入れ替える淳子 10/30-01:57
記事番号4173へのコメント
viceさんは No.4173「Re:JAVASCRIPTで、複数の画像を入れ替える」で書きました。
>
>imgタグのname属性が正しければ、画像がページ内のどこにあっても動作します。
>ですから、横に並べてコメントを入れるなら、以下でできます。
>
><html>
><head>
><title>クリックされたら複数の画像を入れ替える</title>
>
><script language="JavaScript"><!--
>num=1;
>
>function change(){
>document.myimg1.src = "p" + (num % 2 + 1) + ".jpg";
>num++;
>document.myimg2.src = "p" + (num % 2 + 1) + ".jpg";
>}
>//--></script>
></head>
><body>
><a href="JavaScript:change();">
>左のコメント<img src="p1.jpg" name="myimg1" border="0">
><img src="p2.jpg" name="myimg2" border="0">右のコメント
></a>
></body>
></html>

viceさん
何度も何度も、ご丁寧にお返事有難うございました。
viceっさんの仰る通り、左右にコメントが書けました。
ただ、この際に、コメントを入れたことで、画像のコメントに下線がついてしまい、
コメント部分、コメントの下線をクリックするだけで、画像は入れ替わってしまいますが・・

コメントには下線をつけず、画像が入れ替わらないような記述はあるのでしょうか？
また、左右並んだ画像の間隔が、殆どないのですが、もう少し間隔を空ける方法はありますか？
この2点は、今後の参考にしておきたいのですが、もし、無理なようでしたら、けっこです。
本当に色々と有難うございました。


▲このページのトップに戻る
4184Re:JAVASCRIPTで、複数の画像を入れ替えるvice 10/30-03:26
記事番号4179へのコメント

え〜っと、何だかHTMLの質問になってきましたね(^^;

aタグで括る範囲を変えればクリックできる範囲も変わります。
画像と画像の間をあけるにはいろんな方法がありますが、
&nbsp;でスペースを挿入するのが一番簡単かと。

==============================================================

左のコメント
<a href="JavaScript:change();"><img src="p1.jpg" name="myimg1" border="0">
&nbsp;&nbsp;（←必要なだけ繰り返す）
<img src="p2.jpg" name="myimg2" border="0"></a>
右のコメント

▲このページのトップに戻る
4215Re:有難うございました。淳子 10/30-16:49
記事番号4184へのコメント
viceさんは No.4184「Re:JAVASCRIPTで、複数の画像を入れ替える」で書きました。
>
>え〜っと、何だかHTMLの質問になってきましたね(^^;

viceさん
本当ですね^_^;
細かい部分まで、何度も教えて頂いて、本当に有難うございました。
お陰様で、HPにアップロードできました。
しばらくは、この関連の質問投稿が続くかと思いますが・・(^_^;)
ご迷惑でなければ、姿を見かけた時には、よろしくお願い致します。
淳子

パソコントラブル解決・過去ログTOP  >  ログTOP  >  JAVASCRIPTで、複数の画像を入れ替える

A1.本ページは参考になりましたか？　又はアドバイスがありますか？
解決　参考になった　参考にならなかった　アドバイスする

A2.何度目の訪問ですか？
初めて来た　　　数度目(２〜４)　５回以上来ている　　 管理人:

A3.何か一言どうぞ(アドレスは書くことができません)

A4.アドレスがあればどうぞ(１つまで)


↑↑↑↑よろしければ押してください↑↑↑↑

何か一言(本ページで参考になったならないを含めて残してあります)
◎：解決　○：参考になった　×：参考にならなかった　！：アドバイスあり

参考回数投稿日時何か一言
(社)日本お助け隊
人間関係のトラブルの相談にのります。
電話相談無料。
和魂カウンセラー認定講座
和魂カウンセラー認定をしています。
全国イベントスケジュール
イベントが登録でき申込みできます。無料。