JavaScriptで画像へのリンクの貼り方とは？
- JavaScriptを使用して表示させた画像にリンクを張る方法を教えてください。
- JavaScriptのデータは外部リンクになっており、画像にURLを付けたいです。
- JavaScriptで画像へのリンクを張る方法について知識不足で調べきれておらず、急ぎで教えていただきたいです。
- ベストアンサー
JavaScript表示させる画像へリンクの貼り方
初めて質問させていただきます。 JavaScript で、表示させた画像へのリンクの張り方を 教えていただきたいのです。 JavaScript のデータは、外部リンクになっています。 いろいろと見て回ったのですが、JavaScript に関しての知識不足で、 おそらく、調べきれていないのでは・・・とも思うのですが、 急ぎでどうしても必要ですので、教えていただきたいです。 よろしくお願いいたします。 // JavaScript Document //----開始日 YYYY/M/D 形式 半角数字で開始日指定 myStartDate="2012/9/14 16:29:00"; // 終了日 YYYY/M/D 形式 半角数字で終了日指定 myEndDate="2012/9/14 17:50:00"; //表示するHTML myHTML=("<img src='●●.jpg'>"); ←この画像にURLを付けたいです。 /******************************************************************/ myDate=new Date(); //現在の日付取得 mySD=new Date(myStartDate); myED=new Date(myEndDate); if(myDate.getTime()-mySD.getTime()> 0 && myED.getTime()-myDate.getTime()> 0){ document.write(myHTML); } ーーーーーーーーーーーーーーー <body> <div id="●●"> <script type="text/javascript" src="js/pr.js"></script> </div> </body>
- shin_11
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
myHTML=("<a href='hoge.html'><img src='●●.jpg'></a>"); とすればいいんじゃないですか。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
他のページへリンクさせるには<a>タグを使用してください。 http://www.htmq.com/html/a.shtml
関連するQ&A
- 指定日まで画像カウントダウン表示一桁の残り日数を「01」のようにしたい
指定日まで画像カウントダウン表示一桁の残り日数を「01」のようにしたい。当日以降は「00」で停止させたい ある指定日時までの画像カウントダウン表示を以下のようにjavascriptで作成して、残り日数の数字を imageファイルで表示しているのですが、残りが一ケタになったときに「02」「01」のようにする、 また、当日が来たら「00」で止まるようにしたいのですが方法がわかりません。 javascriptで上記のような仕様にすることは可能なのでしょうか。 よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <script language="javascript"><!-- dir = "img/"; date1 = new Date(); date2 = new Date(2010, 11, 30); // YYYY, MM - 1, DD d = (date2.getTime() - date1.getTime()) / (24 * 60 * 60 * 1000); d = Math.abs(Math.ceil(d)); s = d.toString(); for (i = 0; i < s.length; i++) { document.write("<IMG SRC=\"" + dir + s.charAt(i) + ".gif\">"); } //--></script> </head> <body> <script src="js/date.js"></script>日 </body> </html>
- ベストアンサー
- JavaScript
- javascriptで文字を移動後、プルダウン表示させたい。
(1)移動処理 http://www.openspc2.org/JavaScript/Ajax/Effect/Rico/002/index.html (2)上から内容を表示 http://www.openspc2.org/JavaScript/Ajax/Effect/script.aculo.us/004/index.html (1)→(2)の処理の順番動かそうと思い、javascriptを組んでみたのですが、動きません。 new Rico.Effect.Position("movilisez", 400,300, 100, 20);を コメントアウトすると、(2)の処理は動いてくれますが、 コメントを外すと動きません。 原因を教えていただけますでしょうか？ 環境は以下です。 OS:VISTAHomepremium ブラウザ:IE7 --------------------- function toPoint() { new Rico.Effect.Position("movilisez", 400,300, 100, 20); execEffect(); } function execEffect() { document.getElementById("contents").style.visibility = "visible" new Effect.BlindDown($("contents")); } --------------------- --------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="Style_Index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="scripts/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="scripts/rico.js"></script> <script type="text/javascript" src="scripts/BlindDown.js"></script> <title>TestPage</title> </head> <body> <div align="center"> <p></p><div id="Hedder" align="center"><table width="800px" cellspacing="0"> <tr> <td colspan="2" rowspan="2" align="left"><img src="" alt="" name="movilisez" width="200" height="80" id="movilisez" onclick="toPoint()" /></td> </tr> </table></div> <div id="contents"> <div id="menu" align="center"> メニュー </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで処理している間画像を表示したい。
JavaScriptで処理をしている間、画像を表示したいのですが、 上手く表示されません。 以下、HTMLファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="sample_csv.js"></script> </head> <body> <form name="form1"> <input type="button" value="取込" onclick="testWait()"/> </form> <p id="test"></p> </body> </html> 以下JSファイル function testWait() { var imgWait = document.createElement('img'); imgWait.setAttribute("src","data/waiting.gif"); document.getElementById("test").appendChild(imgWait); //alert("test"); sleep_busy(5000); document.getElementById("test").innerHTML = ""; } function sleep_busy(wait) { var start = (new Date()).getTime(); while (true) { if ((new Date()).getTime() >= start + wait * 1) break; } } jsファイルのコメントしてあるアラート文を有効にすると きちんと表示されます。 どうしてalert文を有効にした場合と、コメントにした場合で 結果が違ってきてしまうのでしょうか。 上手く表示する、良い方法ありますでしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptでイベントまでのカウントを作りたい。
教えてください。JavaScript初心者です。 JavaScriptでイベントまでのカウントを作りたいのですが、 日にちを画像でだして、指定した日がきたら、画像で差し替えるようにしたいのですが、どうすればいいのでしょうか？ ※現在は指定した日がきたら、「おめでとう」の文字がでるようにしてます。 書いたタグは下記になります。 アドバイスをお願いします。 <script language="JavaScript"><!-- var now = new Date(); var point = new Date(2009,8-1,25); var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) ); if(countdown > 0) { document.write('countdown '); } else { document.write('おめでとう！'); } // --></script>
- 締切済み
- JavaScript
- 外部JavaScriptの書き方
外部JavaScriptの書き方 <script language="JavaScript" src="data.js"></script> 上記data.jsから、他サーバーの外部javascriptを読み出すには 以下のよな書き方で正しいでしょうか？ document.open(); document.write('<script language="JavaScript" src="http://hoge.com/data.js"></script>'); document.close();
- ベストアンサー
- JavaScript
- javascriptでの大文字小文字の区別
前に質問をし、大文字と小文字の区別があることはわかりました。そこで、日にちを出すために <script language="javascript"> <!-- mydate=new Date(); ye=mydate.getFullYear()+"年"; mo=mydate.getMonth()+1+"月"; da=mydate.getDate()+"日"; day=mydate.getDay(); day2=new Array(7); day2[0]="日";day2[1]="月";day2[2]="火"; day2[3]="水";day2[4]="木";day2[5]="金"; day2[6]="土"; document.write("<font style='font-size : 16px; color : #666666'>"); document.write("本日は"+ye+mo+da+"("+day2[day]+") "); document.write("です</font>"); //--> </script> とすることはわかったのですが、一番初めの<script language="javascript">は物によって<SCRIPT LANGUAGE="JavaScript">や<SCRIPT language="Javascript">となっていたり、年数などのyeはYeとなっていたりします。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の書き方
C言語をすこしやって、つい最近JavaScriptを始めました。 new Date().getYear() ↑のような書き方はどうして「.（ドット）」が入るんですか？このような書き方はC言語の構造体内の変数を操作するときと似てる気がしますが、JavaScriptはどういう構造になっているんでしょうか？ myDate = new Date(); myYear = myDate.getYear(); document.write(myYear); と document.write( new Date().getYear() ); は、 おなじ表示結果になりますよね。ドットで区切ってかく理由が分かりません。教えてください！
- ベストアンサー
- JavaScript
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- 画像カウントダウン当時以降を0日に表示したい
javascriptにて画像でカウントダウン表示しようとしています。 下記の質問を参考にしましたが、その当日を過ぎると、カウントアップしてしまいます。 03・02・01・00・01・02・・・ ↑ 当日 指定日まで画像カウントダウン表示一桁の残り日数を「01」のようにしたい http://okwave.jp/qa/q5901649.html 下記の記述で誤っているところあれば教えて頂きたいのですがわかりますでしょうか？ <SCRIPT LANGUAGE="JavaScript"> <!-- dir = "number_sss2012/"; date1 = new Date(); date2 = new Date(2012, 8, 19); // YYYY, MM - 1, DD d = (date2.getTime() - date1.getTime()) / (24 * 60 * 60 * 1000); d = Math.abs(Math.ceil(d)); s = d.toString(); for (i = 0; i < s.length; i++) { if ( d < 0 ) { s = "00"; } else { s = d.toString(); if ( d < 10 ) s = "0"+s; } document.write("<IMG SRC=\"" + dir + s.charAt(i) + ".png\">"); } // --> </SCRIPT>
- ベストアンサー
- JavaScript
お礼
<a>タグを仕様する事は、わかってるんですけど、 入れ込む場所がわからなかったもので・・・。 urlありがとうございます。 参考にさせていただきます。