JavaScriptで画像をクリックすると大きさが変わらない問題の解決方法
- JavaScriptを使って画像をクリックした際に、その画像のサイズを交互に大きくしたり小さくしたりするプログラムを作成しました。しかし、2回目のクリックからは画像のサイズが変わらなくなってしまいます。この問題を解決する方法を教えてください。
- JavaScriptで書かれたプログラムにおいて、画像をクリックした際にサイズを変更するための関数を作成しました。しかし、2回目のクリック以降では関数が実行されず、画像のサイズが変わらなくなってしまいます。この問題を解決する方法を教えてください。
- JavaScriptを使用して、画像をクリックするとその画像のサイズが交互に大きくなったり小さくなったりするプログラムを作成しました。しかし、2回目のクリック以降では画像のサイズが変わらなくなってしまいます。この問題の解決策を教えてください。
- ベストアンサー
このソースを直して！【JavaScript】
JavaScriptで、「画像をクリックしたらその画像を交互に大きくしたり小さくしたりする」というプログラムを書いたのですが、２回クリックしたら画像をクリックしても何も起こらなくなってしまいました。どうしたら解決するでしょうか？ <html><head><title>test</title> <script type="text/javascript"><!-- x=128; y=128; function kaeru(){ document.images["gazou"].height = x; document.images["gazou"].width = y; if(x=64){x=128; y=128;} if(x=128){x=64; y=64;} } //--></script> </head><body> <a href="JavaScript:kaeru()"> <image src="co.gif" id="gazou" width="64"height="64"> </a> </body></html> 回答よろしくお願いします。 ちなみに if(x=128){x=64; y=64;} の所はelseにしようと思っていたのですが、elseにしたらそのelse文が実行されませんでした。
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
比較演算子は == です = ですと代入になってしまいます if ( x = 64 ) { x = 128; y = 128; } といった記述は ( x = 64 )が式として評価され 0で無いので x=128; y=128; が実行されます 同じように if(x=128)についてもいえます if ( x == 64 ) { x = 128; y = 128; } else { x = 64; y = 64; } といった記述しましょう
関連するQ&A
- javascriptで別ウインドウを開いたのですが背景設置が上手くいきません。
いつもお世話になっております。 JavaScriptを使用し別ウインドウで画像を表示させているのですが、 そのウインドウの背景が上手く設定できません。 どのように編集すればよいでしょうか？ 現在の状態は以下の通りです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>aaa</title> <script language="javascript"> <!-- function OpenWindow(){ var width = document.images['00'].width + 228; var height = document.images['00'].height +254; subWin = window.open("","subWin","status=no,menubar=no,toolbar=no,scrollbars=no,resizable=yes,screenX=0,screenY=0,width=" + width + ",height=" + height + '"'); with(subWin.document) { open(); write("<html><head><title>sample1</title></head>"); write("<body onload='window.resizeTo( document.images[00].width + 40,document.images[00].height + 120)'><div align='center'><img id='00' src='b/1b.jpg'><br>"); write("<button type='button' onclick='window.close()'>閉じる</button></body></div></html>"); close(); } } --> </script></head> 宜しくお願いします。
- ベストアンサー
- JavaScript
- Javascriptにてページ作成
Javascriptを用いて、 1)以下を中央ぞろえ 2)太字・(HTMLでの)フォント6程度の「タイトル」 3)ページを開いた際の時間が30以下で「画像1」 30秒より後の場合は「画像2」を表示 4)3)の背景色を変更 5)最終更新日時を自動取得 といった条件を満たしたページを作成したいのです。 2)は検索して調べたところ、おおむね以下のような感じになると思います。 <script type="text/javascript"> <!-- dd = new Date(); mySeconds = dd.getSeconds(); myimg= '<img src="「画像1」" width= "x" height="y">'; myimg2= '<img src="「画像2」" width= "x" height="y">'; if(mySeconds<30){ document.write(myimg+"<br>"); }else{ document.write(myimg2+"<br>"); } document.write(dd.toLocaleString() +"<br>"); // --> </script> そして5)の日時自動取得は <script type="text/javascript"> <!-- document.write(document.lastModified); // --> </script> こんな感じになると思うのですが。 それ以外の条件を満たすJavascriptで、ぴんとくるものが見つかりません。 他の条件はHTMLで記述するべき(HTMLのほうが楽？)ことなのでしょうか？ HTMLは基本的なことだけかじった程度の知識で、Javascroptというものに頭を悩ませています。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- Javascript 間違っている箇所を指摘願います。
大学の授業でJavascriptを扱っています。 が、熟練者ではなく、全くの初心者です。 初級者向けの授業なのに、なぜJavaを扱うのだ？と思っているほどです。 先生がスクリーンに映し出したプログラムを同じように打ち込んで写すというやり方なのですが、同じプログラムを書いたはずなのに、正しく表示されません。 Javaに詳しい方がおられましたら、僕の書いたものを以下に載せますので、間違っている箇所を指摘していただけたらと思います。 課題１ 計算をendを入力するまでし続けるプログラムらしいのですが。 <html> <body bgcolor=pink> <center> <h1> <script type="text/javascript"> //typeの部分をlanguage="javascript"と書いてもよい。 s=0; while(true){ m=prompt("数値を入力（終りは文字列endを入力）。","")}; if(m=="end"){ break; }else{ n = parseFloat(m); s=s+n; document.write("n"="+n+"<br>"); }; }; document.write("合計"(s)="+s); </script> </h1> </center> </body> </html> 課題２ <html> <body> <script language="javascript"> for(x=3;x<=10;x++){ document.write("<img src="aki10.jpg" width="+x+"% height="+x+"% hspace=2>"); }; for(x=9;x>=3;x--){ document.write("<img src="aki10.jpg " width="+x+"% height="+x+"% height="+x+"% hspace=2>"); }; </script> </body> </html> 課題３ チェックボックスをクリックすると、写真が変わるような仕組みになっています。 <html> <head> <script language="javascript"> function flip(){ if(document.f.check.checked){ document.image.src="aki10.jpg"; }else{ document.image.src="aki01.jpg"; }; }; </script> </head> <body bgcolor=gray> <center> <img src="aki10.jpg" name="image" width=400 height=300> <form name="f"> <input type="checkbox" name="check" onClip="flip()"> </form> </center> </body> </html> ちなみに、jpgは間違ってません。 そういう名前の写真があるのだと思ってください。 詳しい方、１つでも結構ですので、よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptのコードの間違いを教えて
いつもお世話になっております。 現在、JavaScriptの勉強をしているのですが、if構文のところでつまずいてしまいした。 下のコードがうまく実行できません。 間違いを指摘して頂ければと思います。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Javascript</title> </head> <body> <script type="text/javascript"> var x = window.prompt("好きな値を入力してください","100"); if (x>100) {window.document.write("100より大きいです");} else {if(x<100)) {window.document.write("100より小さいです");} else {if(x=100)) {window.document.write("100です");} } } </script> </body> </html> なお、テキストエディタで記述し、実行はGoogleChromeで行いました。 よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- Ｊavascriptの質問です。
Ｊavascriptの質問です。 昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。 昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。 問題点： (1)windowをリサイズたときに、動かない点 (2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＯＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。） 恐れ入りますがよろしくお願いいたします。 ■ＨＴＭＬ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="css/test1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function changeStyle(y,x) { /*変数トレース*/ document.write("関数CALL\n"); document.write(y+"/"); document.write(x); /*CSSの書き換え（ＣＳＳ）を書き換えると位置をへんこうできるものと思っています。*/ document.getElementById("box").style.marginTop = y; document.getElementById("box").style.marginLeft = x; } // --> </script> <script type="text/javascript"> <!-- function relocate() { window.focus(); /*firefoxのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerHeight && window.innerHeight > 960){ y=((window.innerHeight - 960)/2); }else{y=0;} /*ＩＥのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerWidth && window.innerHeight >1100){ x=((window.innerWidth - 1100)/2); }else{x=0;} /**/ if( 0 != document.body.clientHeight && document.body.clientHeight > 960){ y=((document.body.clientHeight - 960)/2); }else{y=0;} if(0 != document.body.clientWidth && document.body.clientWidth > 1100){ x=((document.body.clientWidth - 1100)/2); }else{x=0;} /*CSSの変更*/ changeStyle(y,x); } //--> </script> </head> <body onResize="relocate()"> <!-- イベントハンドラセット（リサイズ時にＣＳＳ変更）こちらが問題のようです。 --> <div id="box">123456</div> <!-- 目的のボックス--> <script type="text/javascript"> <!-- /*オンロード時に１度ＣＳＳを変更する。もちらは動作します。*/ relocate(); // --> </script> </body> </html> ■ＣＳＳ @charset "utf-8"; /* CSS Document */ *{ margin: 0px; padding: 0px; } #box { background-color: #FF3300; height: 960px; width: 1100px; border: 100px none #999999; margin-top:0px; margin-left:0px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- JavaScript 時間ごとに画像を変える。
JavaScriptで時間ごとに画像を変える様にしたいのですが、 画像が表示されません(T_T) どこが間違っているのでしょうか？ function setImg(){ var gTime02 = (new Date()).getHours(); var arImg = new Array("9_12.gif","13_15.gif","16_18.gif","19_08.gif"); function ifImg(){ if(gTime02 >= 9 && 12 >= gTime02){ arImg[0]; }else if(gTime02 >= 13 && 15 >= gTime02){ arImg[1]; }else if(gTime02 >= 16 && 18 >= gTime02){ arImg[2]; }else {arImg[3];} } document.write("<img src='images/"+ifImg+"' border='0' width='150' height='60'>"); }
- ベストアンサー
- その他([技術者向] コンピューター)
- javascriptで画像をテーブルに出力する方法
javascriptで定期的に入れ替えている画像をテーブルに出力（表示）する方法を教えてください。 <html> <head> <script language="JavaScript"><!-- myImageCnt = 4; myImage = new Array( "img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg" ); myNowCnt = 0; function myChange(){ if (myNowCnt == myImageCnt-1){ myNowCnt=0; }else{ myNowCnt++; } document.myFormImg.src = myImage[myNowCnt]; setTimeout( "myChange()" ,5000 ); } // --></script> <img src="img0.jpg" width="200" height="200" name="myFormImg" /> <script language="JavaScript"><!-- myChange(); // --></script> </head> </html>
- ベストアンサー
- JavaScript
- JavaScriptソース
文字列をクリックするとサブウィンドウが開くという JavaScriptです。必死にやってみましたが、IEではOK、ネスケでは作動しません。何度も何度もやってもだめで、どこからみても見本のソースと一緒なのにできません。ネスケでは厳密に作らないとだめだとか。すいません、どこが変なのでしょう。下にソースをのせます。よろしくお願いします。 <HEAD>～</HEAD>の間 <SCRIPT language="JavaScript"> <!-- function WinOpen1(){ window.open('SUBWSOURCE/uosu1.html','window2','resizable=1,scrollbars=0,menubar=0,directories=0,status=0,location=0,width=600,height=500'); } // --> </SCRIPT> <BODY>の部分 <td width="140"><p><img src="TOPPARTS/OSUTOP01.JPG" width="140" height="80" border="0"><br> <img src="common/spacer.gif" width="1" height="5" border="0"><br> <a href="javascript:WinOpen1();"><font size="2">文字列</a></font><font size="1">テキスト</font></td> </tr> </table> ちなみにここでは１つ分ですが、実際は１０のウィンドウが開くよう指示しています。大変見にくいとは思いますが、よろしくおねがいします・・。
- 締切済み
- JavaScript
- javascriptでループをやめたい
javascript初心者です。 下記の様にソースが書いてあります。 画像が表示され、順番に表示されるのはいいのですが、 最後の画像になった時に、最初の画像に戻り、永遠と画像がループし、 表示されてしまいます。最後の画像になった時に、表示を止め、 最後の画像のまま表示を止めたいのですが、わかりません。 ご教示お願いいたします。 <SCRIPT language="JavaScript"> <!-- FITime=1; FOTime=8; n=10; flg=1; num=0; cnt=7; Fna="./img"; Fexp="jpg"; // 以下スクリプト本体 function fade(img){ if(flg==1){ document.images[img].src=Fna+num%cnt+"."+Fexp; if(n<=0) flg=0; document.images[img].filters['alpha'].opacity=n; if(n>=99)speed=0.05;else speed=5; n-=speed; setTimeout("fade('"+img+"')",FOTime); } else{ document.images[img].src=Fna+(num+1)%cnt+"."+Fexp; document.images[img].filters['alpha'].opacity=n; if(n>=98)speed=0.05;else speed=2; n+=speed; if(n>=100) {flg=1;++num;if(num%cnt==0){num=0;}} setTimeout("fade('"+img+"')",FITime); } } //--> </SCRIPT> </head> <img src="img0.jpg" name="img" style="filter:alpha(opacity=100)">
- ベストアンサー
- JavaScript
- 画像縮小プログラムが、最初に読み込んだ時（再読み込みしない場合）動きません。
今javascriptを使って、縦横比を固定したまま画像を縮小するプログラムを作っています。 ソースコードは function keep_max() { for (i in document.images) { if (document.images[i].className == 'small_sale_thumb') { max_width = 100 ; max_height = 110 ; }else { continue; } if ( document.images[i].height > max_height) { now_width = document.images[i].width; now_height = document.images[i].height; factor = max_height/now_height; document.images[i].height = max_height ; document.images[i].width = now_width * factor; } } } それで、このようにして画像を表示しようとします。 <img width="100" class="small_sale_thumb" src="http://hogehoge.co.jp/bc11/u3785993.jpg" /> <script type='text/javascript'> keep_max(); </script> このようにして、他のドメインのサイト（楽天など）の画像を読み込み、 縮小して表示しようとしているのですが、最初に読み込んだ場合、このプログラムが作動しません。 しかも何故か、二回目に読み込んだ場合（同じページを再読み込みした場合等）作動します。 これはいったいどういうことでしょうか？ ちなみに今妥協策として、bodyのonloadタグにもこれを仕込んでいますが、この場合、画像表示から縮小までにタイムラグがあります。 このプログラムを上手く動かす方法or他のクライアントサイドでの縮小の仕方はありませんでしょうか？？ ちなみに縮小したい画像の件数が多いので、負荷対策のためGD等のサーバーサイドでの縮小は考えないようにしています。
- ベストアンサー
- JavaScript
お礼
あ゛！