JAVASCRIPTを使った画像切替とリンク設定

2023/08/10 03:19

このQ&Aのポイント

JAVASCRIPTを使用して、header部分に記述せずに本文bodyのみに画像の切替えと各画像へのリンク設定（PDF）を行いたいです。
初心者ですが、色々トライしてみましたが上手くいきません。どうすればいいでしょうか？
以下のコードでは、画像の切替えはできましたが、リンク設定ができませんでした。

ベストアンサー

JAVASCRIPTを使って、できるだけheader部分に記述せずに、

2010/09/13 14:31

JAVASCRIPTを使って、できるだけheader部分に記述せずに、本文bodyのみに記述する形で、画像の切替え（できれば滑らかに）＋各画像へのリンク設定（PDF）を行いたいのですが、上手くできません。。色々トライしてみたのですが、分からないため質問させてもらいます。初心者で恐縮ですが、よろしくお願いします。ちなみに画像の切替だけは以下の内容でできました。 <IMG SRC="images/aaa.gif"NAME="SP" width="448" height="261"> <SCRIPT language="JavaScript">  </SCRIPT>

ayapon407
お礼率71% (5/7)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/09/13 16:14 回答No.1

各、画像に対応するリンク先のPDFのパス（URL）は、 pdf[1]="pdf/aaa.pdf"; pdf[2]="pdf/bbb.pdf"; －－－－みたいに、画像番号に対応して固定で持たせてよいんでしょうか、それなら、ほぼそのままのベタロジックでも出来ると思うんですが．．．（document.SP.src=ってやり方がきにいりませんが） <body> <div> <a href="pdf/aaa.pdf" id="Pdflink"> <IMG SRC="images/aaa.gif" id="SP" width="448" height="261"> </a> </div> <script type="text/javascript"> var NO=1; pdf=new Array(5); pdf[1]="pdf/aaa.pdf"; pdf[2]="pdf/bbb.pdf"; img=new Array(5); img[1]="images/aaa.gif"; img[2]="images/bbb.gif"; img[3]="images/ccc.gif"; img[4]="images/ddd.gif"; img[5]="images/eee.gif"; UP(); function UP(){ setTimeout("UP()",5000); document.getElementById("SP").src=img[NO]; document.getElementById("Pdflink").href=pdf[NO]; NO=NO+1 if(NO>2){NO=1;} } </script> </body>

質問者

お礼 2010/09/14 11:50

早々と教えていただいて、ありがとうございました。最初はうまく動かなかったのですが、最後のところをif(NO>5){NO=1;}に書き換えてうまくいきました！こんなに簡単に実現できるものだったんですね！勉強になりました。ありがとうございました！

質問者

補足 2010/09/14 13:42

すみません、できれば以下追加で教えてください。別ウィンドウでPDFを開きたい場合はどのような記述になるのでしょうか？

その他の回答 (2)

babu_baboo
ベストアンサー率51% (268/525)

2010/09/15 00:44 回答No.3

「なめらかに」ってどっちなのかわからないので、りょうほうにとらい。もじすうせいげんがあるので、むだにちいさくしてみた～。（たま～にチルダ） <!DOCTYPE html> <title></title> <style type="text/css"> ul{width:400px;height:200px;list-style:none;overflow:auto;margin:0;padding:0} li a img{border:0px none;width:400px;height:200px} </style> <body> <ul id="menu"> <li><a href="aaa.pdf"><img src="./img/0.gif" alt="aaa"></a> <li><a href="bbb.pdf"><img src="./img/1.gif" alt="bbb"></a> <li><a href="ccc.pdf"><img src="./img/2.gif" alt="ccc"></a> <li><a href="ddd.pdf"><img src="./img/3.gif" alt="ddd"></a> <li><a href="eee.pdf"><img src="./img/4.gif" alt="eee"></a> </ul> <script> //@cc_on (function(){ var D=100,E='style',F='position',G='lastChild',H='client',I='Width',J='Height'; this.AutoChanger=function(a,b,c,d,e,f,g,h){this.a=a,this.b=b,this.c=c,this.d=d,this.e=e,this.f=this.g=0; for(f=0,g=a.childNodes;h=g[f];)if('LI'==h.nodeName)f++,h[E][F]='absolute';else a.removeChild(h); a[E].overflow='hidden',a[E][F]='relative';(function A(){var a=this,b,c,d,e,f,g,h,i; if(a.g){c=a.a,h=c[G][E],e=++a.g;if(e<a.d)f=a.x*e,g=a.y*e,d=D-a.o*e;else a.g=f=g=0,d=D,c.insertBefore(c[G],c.firstChild);B(h,f,g,d)} else i=a.d,a.g=1,c=a.a[G],b=C(a.e),a.x=[0,0,c[H+I],0,-c[H+I]][b]/i,a.y=[0,-c[H+J],0,c[H+J],0][b]/i,a.o=D/i,B(c[E],0,0,D); a.f=setTimeout(function(){A.call(a)},1<a.g?a.c:a.b)}).call(this)} function B(a,b,c,d){a.left=~~b+'px';a.top=~~c+'px';a./*@if(1)filter='alpha(opacity='+d+')'@else@*/opacity=d/D/*@end@*/} function C(a){return 0<=a&&a<5?a:Math.random()*4+1|0} AutoChanger.init=function(a,b,c,d,e){if(a)return new AutoChanger(a,b||2000,c||60,d||15,e||5)} })(); AutoChanger.init(document.getElementById('menu')); </script>

fujillin
ベストアンサー率61% (1594/2576)

2010/09/13 20:23 回答No.2

リンクに関してはNo1様が回答済みなので、＞（できれば滑らかに）ってのは、例えばフェードアウト、フェードインみたいな意味なのでしょうか？それなら、似た質問が6つほど下に　http://okwave.jp/qa/q6176298.html ついでに・・・画像のURLとリンク先は対になっているので、配列も対で定義して var imgs = [ [ "images/aaa.gif" , "pdf/aaa.pdf" ], [ "images/bbb.gif" , "pdf/bbb.pdf" ], [ "images/ccc.gif" , "pdf/ccc.pdf" ], [ "images/ddd.gif" , "pdf/ddd.pdf" ], [ "images/eee.gif" , "pdf/eee.pdf" ] ]; みたいな設定方法のほうが、後で数が増減したり、順番を入れ替えたりする時にも便利かも。（添え字は0～4になる。共通する「images/」、「pdf/」も省くというのもありかも）

質問者

お礼 2010/09/14 11:55

さらにシンプルな記述方法まで教えていただいてありがとうございます！フェードアウト、フェードインはこれからトライしてみます！ありがとうございました！

関連するQ&A

・JAVASCRIPTを使って、ホームページを作成しています。
・JAVASCRIPTを使って、ホームページを作成しています。・ JAVAを使って、ホームページを作成しています。・メニューのボタンに、マウスオーバーでボタンの画像を切り替える  ・と同時に任意の画像を切り替える // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> ・というscriptを同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。・一つのボタンに２つのJAVAを使う場合何か特別な入力が必要なのでしょうか？・それとも、ただ単純にボタンのタグが誤っているのでしょうか？・どなたかご教授お願い致します。・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript">  </SCRIPT> <script type="text/javascript">  </script> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。・よろしくお願いします！
- ベストアンサー
- JavaScript
HTMLの記述について
HTMLの記述について二つ質問です． (1) ，一つ下のディレクトリにある画像などを参照するとき， a) <img src="images/logo.gif"> b) <img src="./images/logo.gif"> と，どちらの記述でも同じ画像を表示できますが，何か違いがあるのでしょうか． (2) たまに，<br> を <br /> などと記述しているHTMLソースをみかけますが，　これらにも何か違いはありますか？よろしくお願い致します。
- ベストアンサー
- HTML
javascriptについて
javascriptに関してまだまだ初心者で困っております．作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです．そこで以下のようなプログラムを作成したのですが，うまく動きません．ご助言頂ければ幸いです． <html> <head> <script type="text/javascript>  </script> </head> <body> <ul> <li><a href="JavaScript:changeImg(1)"><img src="on.gif" name="image[1]" /></a></li> <li><a href="JavaScript:changeImg(2)"><img src="off.gif" name="image[2]" /></a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptでサイコロのようなものを作成しています。
JavaScriptでサイコロのようなものを作成しています。スタートボタンで"数字の画像"(diceX.gif)が順に入れ替わって、ストップボタンで止まる、というものなのですが、この画像数字の入れ替わる範囲を"1-2の間で、1-3の間で・・・"というように変化させたく思っています。現状は下記のように別々に並べて画像、スタート.ストップが表示されるよういなっていまが、これをセレクトメニューで「2」を選択した場合は1-2の、「3」を選択した場合には1-3..の間での変化と１つの画像、ボタン表示で済むようにしたいのですが、どのように記述すればよいのでしょうか？こういったものを作成するのは初めてで、様々なサイトを参考になんとかここまでこぎ着けましたがどうにも行き詰まってしまいましたなにとぞ宜しくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var myImage1 = new Image(); myImage1.src = "dice1.gif"; var myImage2 = new Image(); myImage2.src = "dice2.gif"; var myImage3 = new Image(); myImage3.src = "dice3.gif"; ・・・ var img =0; fileName = new Array("dice1.gif","dice2.gif","dice3.gif",・・・); function rotate2() { img = Math.floor(Math.random()*2); document.images["dice2"].src = fileName[img]; timer = setTimeout("rotate2()",30); } function stop2() { clearTimeout(timer); } function rotate3() { img = Math.floor(Math.random()*3); document.images["dice3"].src = fileName[img]; timer = setTimeout("rotate3()",30); } function stop3() { clearTimeout(timer); } ・・・ </SCRIPT> <BODY> <IMG src="dice2.gif" name="dice2"> <FORM action="javascript://"> <INPUT TYPE="submit" VALUE="start" onClick="rotate2()"> <INPUT TYPE="submit" VALUE="stop" onClick="stop2()"> </FORM> <IMG src="dice3.gif" name="dice3"> <FORM action="javascript://"> <INPUT TYPE="submit" VALUE="start" onClick="rotate3()"> <INPUT TYPE="submit" VALUE="stop" onClick="stop3()"> </FORM> ・・・
- ベストアンサー
- JavaScript
[JavaScript]Table内の文字列書換
下記のようにTableを作り、上に場所名、下に画像を貼り JavaScriptで反時計回りに定期的に場所名と画像の位置を変えるプログラムを作成しています。画像位置を変えることはできたのですが、文字列を変えることができません。どなたかご教示ください。 ===================================== | 　　　　場所A　　　　| 場所B | ================= =================== | | | | | 画像B | | | | | 画像 A =================== | | 場所C | | =================== | | | | | 画像C | | | | | =================== | | 場所D | | =================== | | | | | 画像D | | | | ===================================== <HTML> <HEAD> <TITLE>TEST</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8"> <META HTTP-EQUIV="refresh" CONTENT="50"> </HEAD> <BODY BGCOLOR="000000" TEXT="#FFFFFF"> <table ALIGN="CENTER" border="5" > <tr><td>A</td><td>B</td></tr> <tr><td rowspan=5><IMG SRC="A.jpg" NAME="SP1"><SCRIPT language="javaScript">  </SCRIPT> </td> </td> <td><IMG SRC="B.jpg" NAME="SP2"</td></tr> <tr><td">C</td></tr> <tr><td><IMG SRC="C.jpg" NAME="SP3"></td></tr> <tr><td>D</td></tr> 一部省略 </table> </body> </ht
- 締切済み
- JavaScript
javascriptでループをやめたい
javascript初心者です。下記の様にソースが書いてあります。画像が表示され、順番に表示されるのはいいのですが、最後の画像になった時に、最初の画像に戻り、永遠と画像がループし、表示されてしまいます。最後の画像になった時に、表示を止め、最後の画像のまま表示を止めたいのですが、わかりません。ご教示お願いいたします。 <SCRIPT language="JavaScript">  </SCRIPT> </head> <img src="img0.jpg" name="img" style="filter:alpha(opacity=100)">
- ベストアンサー
- JavaScript
スワップイメージ＋ページ内移動（NN4.7）
JavaScriptについて初心者です。どなたか分かる方いましたら、ご教授願います。【仕様】ボタンを押下すると、以下の挙動を同時にする。（ボタンは複数）・同一ページ内の別の画像が切り替わる。・同一ページ内の指定した場所へ移動する。いろいろと調べて以下のようなJavaScriptを作成しました。 <html> <head> <script type="text/javascript">  </script> </head> <body> <a name="a"></a> <img src="images/img01_a.gif" alt="あああ" width="400" height="200" name="img01"> --（省略）-- <a href="javascript:chimg01();"><img src="images/btn01.gif" alt="切り替えボタン" name="btn01" border="0"></a> <a href="javascript:chimg02();"><img src="images/btn02.gif" alt="切り替えボタン" name="btn02" border="0"></a> </body> 上記の記述で、IEなどは問題ないのですが、NN4.7の場合、ページをリロードしてしまい、画像の切り替えが効きません。ブラウザ振り分けで、NN4.7のみ他のjsを読み込むようにした方が良いでしょうか？その場合の記述方法も分かれば、お願いしますm(-_-)m
- 締切済み
- JavaScript
プログラムのみで複雑に画像を変える方法役
クリックすると画像が次々と変わるものを作りたいのですが、下記方法では画像の枚数が増えたり、複雑な動作を作る場合、複雑な構造になってしまうと思うのですが、少しでも複雑にならない方法はありますか？フラッシュは使わずにプログラムだけで同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <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> <script language="JavaScript">  </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document～というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }
- ベストアンサー
- JavaScript
javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。画像はsamp0.jpg～samp4.jpgの計5枚ただ、問題があって、画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが分からず困っています。それぞれ、画像0の時は5000ミリ秒　画像1の時は4000ミリ秒画像2の時は3000ミリ秒　… と移り変わる速度を変えたいのです。一応、timeは配列がいいのかと配列にしてみましたそれが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？スクリプトを詳しく教えていただけると、ありがたいです。以下、javascriptの一部を記します。【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ 　var ch = document.getElementById("changeImg"); 　ch.src=img[num].src; 　 if(num<4){ 　　 num++; 　 }else{ 　　 num=0; 　 } 　 setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。詳しい方、ぜひ教えてくださいませ。どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
Javascript　ポップアップウィンドウについて
初歩的なことだとは思いますが、教えてください。ポップアップウィンドウで画像を表示するためのリンクを以下のように記述して使っていますが、ポップアップウィンドウ内に余白が出ます。（ウインドウ枠と画像の間）ウインドウの左上（0,0）の位置に画像を持ってくるにはどうしたらいいのでしょうか。調べたものをいくつか試してみましたが、どれもうまくいきませんでした。よろしくお願いします。 -------------------- ■<head>内 <script type="text/javascript">  </script> ■<body>内 <a href="img/test.gif"><img alt="" src="～.gif" onclick="MM_openBrWindow('img/test.gif','test','scrollbars=yes,width=950,height=400')" /> </a> ------------------------- もしくは、 ■<head>内 <script type="text/javascript">  </script> ■<body>内 <a href="javascript:WindowOpen_01()"><img src="img/table_off.gif" alt="" width="320" height="55" class="mar_t_10" onmouseover="this.src='img/table_ban_on.gif'" onmouseout="this.src='img/table_off.gif'" /></a>
- ベストアンサー
- JavaScript

JAVASCRIPTを使った画像切替とリンク設定

JAVASCRIPTを使って、できるだけheader部分に記述せずに、