- 締切済み
JavaScriptについて
サイト作成中なのですが、JavaScriptのところでつまづいています。 ボタンをクリックすると別窓で画像が出てきて表示されるというJavaScriptを作ると、ボタンは表示されていたのですが、ボタンを押しても画像が表示されません。つまり押しても何も反応がありません。 恐らく画像の保存場所が違うのではないかとにらんでみたのですが見当違いかな？？ タグは以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function cl(){ popwin=window.open(",'img','width=150,height=150'); popwin.document.write('<IMG SRC="image3.jpg">'); } </SCRIPT> </BODY> クリックしてください。 <FROM> <INPUT type="button" VALUE="クリック" onClick="cl()"> </FROM> </BODY> </HTML> 私はここの部分で間違えてると思いました。 popwin.document.write('<IMG SRC="***.jpg">'); デスクトップに置いてるmyhomepageにimageというフォルダを置いてそこに画像を保存しています。 その場合、<IMG SRC="image/***.jpg">かなと思い実行してみましたがダメでした。。 JavaScriptのときは何か特別なファルダを作る必要が あるんでしょうか？？ JavaScriptに関しては最近はじめたばかりでチンプン カンプンなのでわかりやすく説明していただけるとありがたいです。 ちなみに上記のタグは説明本通り記載しました。 よろしくお願いいたします。
- BLITZ-KRIEGS
- お礼率36% (36/99)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- kai123
- ベストアンサー率53% (88/163)
function使うのも面倒なんで下記のようにしたらどうですか？ function cl(){}の部分を無くして <FROM>の後に <a href="＊＊＊.jpg" target="_blank" onclick=javascript:window.open("＊＊＊.jpg","imge","width=横のサイズ,height=縦のサイズ");return(false)> を入れて、そのあとに <INPUT type="button" VALUE="クリック" onClick="cl()">を入れ その後に、</a>を入れます。 タグの説明としては、 javascriptが有効でないときは、サイズ指定なしのただの新規ウインドウで開きます。 javascriptが有効の時はjavascriptを利用してサイズ指定つきで新規ウインドウを開きます。 "width=横のサイズ,height=縦のサイズ"のところはプロパティなので ここにはスクロールバーの有無、メニューバーの有無など設定できます。 プロパティは width（横のサイズ） 設定方法 width=100 height（縦のサイズ） 設定方法 height=100 toolbar（ツールバーの有無） 設定方法 toolbar=0又はtoolbar=1又はtoolbar=yes又はtoolbar=no menubar（メニューバーの有無） 設定方法 上と同じ指定方法 status（メニューバーの有無） 設定方法 上と同じ指定方法 location（ロケーションバーの有無） 設定方法 上と同じ指定方法 scrollbars（スクロールバーの有無） 設定方法 上と同じ指定方法 resizable（リサイズの許可非許可） 設定方法 上と同じ指定方法 例としては、 横サイズ382、縦サイズ511、リサイズ非許可という指定の場合 "width=382,height=511,resizable=no" プロパティを「,」で並べます。 初期値は「yes」や「1」になります。 BLITZ-KRIEGSさんの場合は <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> </SCRIPT> </BODY> クリックしてください。 <FROM> <a href="***.jpg" target="_blank" onclick=javascript:window.open("***.jpg","imge","width=150,height=150");return(false)> <INPUT type="button" VALUE="クリック" onClick="cl()"> </a> </FROM> </BODY> </HTML> って感じになりますね。 って感じでどうでしょうか？
- gura_
- ベストアンサー率44% (749/1683)
window.openの中の、シングルクォーテーション（'）２個がダブルクォーテーション（"）になっているのが、一番大きな原因でしょう。↓ <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function cl(){ popwin=window.open('','img','width=150,height=150'); popwin.document.write('<IMG SRC="image3.jpg">'); } </SCRIPT> </HEAD> <BODY> クリックしてください。 <FROM> <INPUT type="button" VALUE="クリック" onClick="cl()"> </FROM> </BODY> </HTML>
- yukaself
- ベストアンサー率45% (22/48)
<head>～</head>の中に <SCRIPT LANGUAGE="JavaScript"> <!-- function newwin() { window.open("画像のURL","NewWindow","width=小窓の横サイズ,height=小窓の縦サイズ,scrollbars") } //--> </SCRIPT> <body>から</body>の間に <FORM> <INPUT TYPE="button" VALUE="ボタン名" onClick="newwin()"> </FORM> こん感じのタグでどうでしょうか？
関連するQ&A
- ・JAVASCRIPTを使って、ホームページを作成しています。
・JAVASCRIPTを使って、ホームページを作成しています。 ・ JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 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"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.jpg"; // 設定終了 } // ポイント時の処理 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> とボタンのタグが、 <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
- JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript
- JavaScriptでリクエストを飛ばす方法を教えて下さい。
下記内容で画像の切り替えを教えて頂いたのですがこれに 画像をクリックした時にサーバー側にクリックした事を分るために URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと 思います。 どうしたら良いでしょうか？？ ブラウザーの画面は画像をクリックしても切り替わりません。 誠に恐縮ですが下記ソースに追加して教えて頂ければと思います。 何卒よろしくお願いします。 <html> <head> <script type="text/javascript"><!-- function clickImg( img ) { var arraySrc = img.src.split( '/' ); var src = arraySrc[arraySrc.length - 1]; if( src == "a.jpg" ) { document.cookie = "click=1;"; img.src = "b.jpg"; img.style.cursor = "default"; } } function init() { if( document.cookie ) { var img = document.getElementById( "img1" ); document.getElementById( "img1" ).src = "b.jpg"; img.style.cursor = "default"; } } //--></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>
- 締切済み
- JavaScript
- javascriptについて
javascriptに関してまだまだ初心者で困っております． 作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです． そこで以下のようなプログラムを作成したのですが，うまく動きません． ご助言頂ければ幸いです． <html> <head> <script type="text/javascript> <!-- function changeImg(no){ for (i=1; i<3; i++){ document.image[i].src = "off.gif"; if(i==no) document.image[i].src = "on.gif"; } } //--> </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で画像を変更する
質問が分かりずらいと思いますが、お願いします。 <body>内に↓が書かれています。 <script language="JavaScript"> <!-- function ChangePics() { for(i = 0; i < 3; i++) document.images[i].src = "white.jpg"; } // --> </script> <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> <form> <input type="button" value="画像一括変更" onclick="ChangePics()"></input> </form> ------------------------------------------------------------ [画像一括変更]ボタンをクリックすると表示されていた３枚の「black.jpg」が「white.jpg」に切り替わります。 ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、 <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。 ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。 質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。
- ベストアンサー
- 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 onClick
JavaScript初心者です。 クリックしたら音が出るようにしたいのですが音がでません。 どなたかご回答よろしくお願いします。 <html> <head> <script language = "JavaScript"> <!-- function sound(name){ document.all.music.src = name; } --> </script> </head> <body> <bgsound src = # id = music autostart = true loop = true> <a href = # onClick = sound("img/oto.mp3")> <img src="img/picture.jpg"> </a> </body> </html>
- ベストアンサー
- JavaScript
- クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- JavaScript
- 関数の重複で動かない？
ブログのサイドバーにjavascriptを使ってるのですが同じものを2個貼り付けたら古い方が動かなくなってしまいました。 関数の重複かも、というとところまではなんとなくわかったのですがどこをどうすれば動くようになるでしょうか？ ---------------------------------------- <HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "image/start.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/newyork.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/london.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/yokohama.jpg"; // 設定終了 } // ポイント時の処理 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> </HEAD> <BODY> <IMG SRC="image/start.jpg" ALT="START" WIDTH="150" HEIGHT="100" NAME="def"> <BR> <A HREF="change3.html" onMouseOver="On('img1')" onMouseOut="Off()">NEW YORK</A> ｜ <A HREF="change3.html" onMouseOver="On('img2')" onMouseOut="Off()">LONDON</A> ｜ <A HREF="change3.html" onMouseOver="On('img3')" onMouseOut="Off()">YOKOHAMA</A> </BODY> </HTML> ----------------------------------------------
- 締切済み
- JavaScript
- 画像クリックでウインドウを閉じたいのですが・・・
こんにちは。JavaScriptはwebサイトから頂いて コピーして使うだけの理解力です。どうぞよろしくお願いします。 フォトアルバムを作っていまして、画像をクリックするごとに 画像が入れ替わるところまではできたのですが、 それですと延々と続いてしまいますので、最後の画像で小窓ごと 閉じてしまいたいのですが、どのようなタグになりますでしょうか？ HEADに <SCRIPT LANGUAGE="JavaScript"> <!--// img = new Array("http://www5b.biglobe.ne.jp/○○.jpg","http://www5b.biglobe.ne.jp/○○2.jpg","http://www5b.biglobe.ne.jp/○○3.jpg"); i=0; function myChange(){ i++; i %=img.length; document.my_imgchange.src = img[i]; } // --> </SCRIPT> bodyに <a href="JavaScript:myChange()"><img src="http://www5b.biglobe.ne.jp/○○.jpg" border="0" name="my_imgchange"> と入れています。 例えば3枚目の画像をクリックした時に、また1枚目の画像に戻るのではなくて、 小窓ごと閉じてしまうにはどのようなタグをどこへ埋め込めばよろしいでしょうか？ 色々試してみましたがうまくいきませんでした。 どなたか力をお貸しください。どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
