Javascript外部リンクの書き方（初心者）
- Javascriptを使った外部リンクの書き方を初心者向けに解説します。
- 具体的な例を使いながら、外部リンクの記述方法を説明します。
- タグや属性の使い方についても詳しく解説します。
- ベストアンサー
Javascript外部リンクの書き方（初心者）
以下のJavascriptを外部リンクにしたいのですが、記述の仕方が分かりませんので、お教えください。 （引用元：Javascript例文辞典） <html> <head> <title>一定時間ごと画像を入れ替える（複数箇所に異なる画像［規則的なファイル名版］）</title> <script language="JavaScript"><!-- count = 0; function changeImg() { count++; count %= 4; document.btn1.src = "a" + count + ".gif"; document.btn2.src = "b" + count + ".gif"; } // --></script> </head> <body onLoad="setInterval('changeImg()',2000)"> <img src="a1.gif" name="btn1"> <img src="b1.gif" name="btn2"> </body> </html>
- naodon
- お礼率88% (94/106)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
count = 0; function changeImg() { count++; count %= 4; document.btn1.src = "a" + count + ".gif"; document.btn2.src = "b" + count + ".gif"; } の部分を changeImg.js などの別ファイルにします。 <script … //--></script> の部分を <script src="changeImg.js"></script> に置き換えます
関連するQ&A
- 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
- 文書オブジェクトについて？？？
フォームボタンの画像を入れ替えたいのですが、 正しく動きません。何が悪いのでしょうか？ 文字コードはEUC-JPを使っていますが、関係あるのでしょうか？ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <TITLE>Javascript</TITLE> <script type="text/javascript"> <!-- function btn_click(dat) { if(teban == 1){ document.forms['btn'].elements['btn1'].src = "./img/b.gif"; }else{ document.forms['btn'].elements['btn2'].src = "./img/d.gif"; } } --> </script> </HEAD> <BODY> フォームのボタンを使ってクリックすると画像が変わる ようにしたい <form name="btn"> <input name="btn1" type="image" src="./img/a.gif" onClick="play_start(1); return false;"> <input name="btn2" type="image" src="./img/c.gif" onClick="play_start(2); return false;"> </form> </BODY> </HTML>
- 締切済み
- JavaScript
- 一つのページで二つ動かすのはできないですか
画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか？ 無理だったら、他に何かいい方法があれば教えてください。 これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- num = 18; nme = "img" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- javascriptのマウスイベントに関して質問です。
javascriptのマウスイベントに関して質問です。 マウスが画像の上に乗ったら画像を切り替え、画像から離したら元の画像に戻すような プログラムを作りたいのですが、うまくいきません。 マウスをもっていっても画像が切り替わりません。 プログラムは以下のように作りました。 どこが間違っているのかまったくわかりません。 よろしくお願いします。 <html> <head> <title>画像切り替え</title> <script type="text/javascript"> <!-- function changeillustsikaku() { document.gazoukirikae.src="./sikaku.gif"; } function changeillustmaru() { document.gazoukirikae.src="./maru.gif; } //--> </script> </head> <body> <h2>画像切り替え</h2> <div> <img src="./sikaku.gif" name="gazoukirikae" alt="四角" onMouseOver="changeillustmaru()" onMouseOut="changeillustsikaku()"> </div> </body> </html>
- ベストアンサー
- JavaScript
- スワップイメージ＋ページ内移動（NN4.7）
JavaScriptについて初心者です。どなたか分かる方いましたら、ご教授願います。 【仕様】 ボタンを押下すると、以下の挙動を同時にする。（ボタンは複数） ・同一ページ内の別の画像が切り替わる。 ・同一ページ内の指定した場所へ移動する。 いろいろと調べて以下のようなJavaScriptを作成しました。 <html> <head> <script type="text/javascript"> <!-- function chimg01(){ document.img01.src='images/img01_b.gif' document.location.replace("#a"); } function chimg02(){ document.img01.src='images/img01_c.gif' document.location.replace("#a"); } --> </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
- JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方
いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか？ １、ウインドウに「閉じる」ボタンを付けたい ２、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>
- 締切済み
- JavaScript
- changeimgの際のalt設定
head部分の記述 <!-- function changeimg(src) { document.getElementById("img").src = src; } //--> </script> body部分の記述 <a href="javascript:changeimg('./img/img02.gif');">02の絵です</a> <img src="./img/img01.gif" alt="01の絵" id="img" width=100 height=100> このようにすると「02の絵です」をクリックすると01の絵が02に変わる、というのを、検索して見つけました。 これを使いたいのですが、img02.gifにalt属性をつけるには、どのようにしたらよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Javascript上での”、’の使い分け
こんにちは、 最近、HTMLの勉強をやり直しています。（といっても詳しいわけではありません。） Javascriptで"と’の二つを使います。 例）ボタン画像の切り替え <a href="javascript:void(0);" onmouseover="document.btn.src='btn2.gif';" onmouseout="document.btn.src='btn1.gif';"> <img src="btn1.gif" name="btn" border="0" width="120" height="40"></a> この際に、”、’の使いわけがありますが、このことをうまく理解できません。 ほか、Javascriptとは離れますが、 Styleseetで、 HTMLタグでは、色の指定する場合、"#ffffff"というように”を使いますが、Styleseetでは使っていません。 これも自分の中でうまく納得できていません。 何か、こうだよっていううまい説明がありましたら教えてください。よろしくお願いします。
- ベストアンサー
- 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がわからなくて困っています
ＪａｖａＳｃｒｉｐｔで割り算をしたいのですが、変な所にボタンを作ってしまったり、 不意に改行されてしまったりと、 ネットで調べてみたのですが、私の能力では例が応用できなくて困っています。 光の速さが約３０万キロで、東京大阪間の距離が約５００キロの時、 光の速さで往復した時の回数を計算して求めるもというものです。 "btn1.gif"をクリックして、計算結果が表示されれば完成なのですが、そこがよくわかりません。 分かりにくい説明かと思いますが、どなたかよろしくお願いします。 --------------------------- <html><head><title>StarQuest</title> <style> body{background-image:url(star02.jpg); background-repeat:no-repeat; scrollbar-track-color:#000000; } </style> <script language="JavaScript"> function keisan(){ "往復の回数(計算結果)"="光の移動距離"/"東京大阪間の距離"; } </script> </head> <body bgcolor="#000000" text="#00CCFF" link="#FFFFFF" vlink="#00CCFF"> <font size="-1"> <form> 光は、一秒間に<input type=text name="光の移動距離" value=30>万キロ進むと言われています。<br> 東京大阪間は約<input type=text name="東京大阪間の距離" value=500>キロと言われていますので、<br> 光の速さで移動すれば約<input type=text name="往復の回数(計算結果)">往復もできますね。<br> <a herf="javascriptonclick(0);" onclick="keisan()" onmouseover="document.btn.src='btn2.gif';" onmouseout="document.btn.src='btn1.gif';"> <img src="btn1.gif" name="btn" border="0" widtht="120" height="40"> </a><br><br> <a href="star02.html">Next</a> </font> </body></html>
- ベストアンサー
- JavaScript
お礼
BLUEPIXY様 お礼が送れ、申し訳ありませんでした。OKWebからのお知らせメールが届かなかったか見落としていたようで、気が付きませんでした。おかげさまで、解決いたしました。ありがとうございました。