JavaScriptを使用して画像を変え、リンクを表示する方法について

このQ&Aのポイント
  • JavaScriptを使用して、指定した時間後に画像を変更し、その画像にリンクを表示する方法について教えてください。
  • 具体的な例として、以下のサンプルコードを参考にしていますが、このコードを改造して別ウィンドウではなく、同じページにリンク先を表示させたいです。
  • JavaScriptにあまり詳しくない初心者ですので、理論的な説明よりも具体的なコードの変更方法を教えていただけると助かります。
回答を見る
  • ベストアンサー

一定時に画像を変え、その画像にリンクを貼るというスクリプトを改造したいのですが

こんにちわ。javascriptはほとんどわかりません。既成のものをHTMLにうめこんだり、スクリプトのHTMLタグ部分を変えたりできる程度です。 今回やりたいのは、数分後に画像を変え、その画像にリンクを貼るというものですが、サンプルであったjavascriptは別ウインドウにリンクを出すというものです。これを別ウインドウではなく、そのままのページにリンク先を表示させるには、どう変えたら良いでしょうか? http://bunjin.com/java/chang_banner2.html こちらのjavascriptです。 先述したように、初心者です。理論で教えていただいてもわからないので、できれば具体的に教えていただけると大変助かります。あつかましくて申し訳ありませんが、どなたかお助け下さい。よろしくお願いします。

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

  • ベストアンサー
  • tacoslot
  • ベストアンサー率80% (4/5)
回答No.1

質問者様が見つけてこられたサンプルのJavascriptを、少しだけ書き換えると出来るかもです。 こんな感じでしょうか。 --------------- <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var item = 0; function change_IMG() { item += 1; if (item > 3) item = 0; if (document.img.complete) { if (item == 0) { document.img.src = "yahoo.jpg"; } if (item == 1) { document.img.src = "msn.jpg"; } if (item == 2) { document.img.src = "google.jpg"; } if (item == 3) { document.img.src = "infoseek.jpg"; } } changeLINK(); setTimeout("change_IMG()",5000); } function changeLINK() { if (item == 0) { document.all['myLINK'].href = "http://ヤフー"; } if (item == 1) { document.all['myLINK'].href = "http://エムエスエヌ"; } if (item == 2) { document.all['myLINK'].href = "http://グーグル"; } if (item == 3) { document.all['myLINK'].href = "http://インフォシーク"; } } //--> </SCRIPT> </HEAD> <BODY onLoad="change_IMG();"> <a id="myLINK" href="http://ヤフー"> <img src="yahoo.jpg" NAME="img" border="0"> </A> </BODY> </HTML> --------------- setTimeout("change_IMG()",5000); ↑この部分は、5秒後に change_IMG() を実行するということです。 1秒 = 1000 なので、もし、1分経過するたびに画像とリンク先を変更したいのであれば、 5000 を 60000 に書き換えます。

harima001
質問者

お礼

tacoslot様、ありがとうございました。 できました! しかもご親切に書き換えていただいて… 大感謝です。 openwindowのところをなんとかすれば…と思ったのですが私の能力を超えていました。 本当に助かります。 ありがとうございました。

関連するQ&A

  • 覚えるのはJavaスクリプトでいいんでしょうか?(カンタンですか?)

    最近独学でHTMLとCSSを覚えて、はじめて自分のHPを公開しました。イラスト等描くのが好きなのですが、画像のスライドショーのページの作り方はわからなかったので、外部のサイトからサンプルをお借りして作りました。サンプルソースを見ると、「Javascript」という言葉が何度も出てきているし、「JAVAスクリプトを使えばゲーム的なものを作りやすいようだ・・」という風に漠然と理解したので、javaスクリプトを覚えようと思うんですが、 他にもプログラムって色々あるじゃないですか?HTMLとCSSを覚えたら、次に覚えるべきなのは何でしょうか? 具体的にやりたい事⇒ランダムで別のページに飛ばしたり、ダンジョンRPG風、またはシナリオ分岐を作ったりして、ゲームっぽいものを作ってみたいです。あとは、画像のスライドショーなどを自分で工夫して(ソースを)書けるようになりたいです。

  • どのリンクが表示されているかのスクリプトを作るには?

    こんばんわ。 http://www.umechando.com/javascript/index.html様の左側にあるメニュー部分なんですが、リンクをクリックするとそのリンク部分の左側に、赤い矢印の画像が表示されます。 これは、スクリプトで処理されているようなんですが、どのような構造になっているのでしょうか? ヒントでもサンプルでもいいので、よろしくお願いします。

  • jQueryで画像にリンクを張りたい

    HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。

  • Javaスクリプトを外部ファイルにしたい。

    こんにちは。 ブログで、サイズ指定したサブウインドウを開くJavaスクリプトを、以前の記事に書いてたんですが何度かテンプレートを変えてるうちにHTMLに入れたJavaスクリプトがなくなってることに気づきました。 そこで、 1、スクリプトを外部ファイルに書くにはどうしたらいいのでしょうか?(タグ、拡張子等) 2、その際、リンクする側はどういったタグを書けばいいのでしょうか? 3、タブブラウズ?でもこれは使える技なのでしょうか? 一応HTMLの勉強は少しはしてます。たくさん出尽くしてる質問かもしれませんが、色々調べましたが思うように探し出せませんでした。 よろしくお願いいたします。

  • 基準の日時を設定して一定時間で画像を入れ替えるスクリプト

    JavaScriptで一定時間ごとに画像を入れ替えるスクリプトはよくサンプルを見掛けるのですが、これに基準時刻を設けたサンプルをご存知ないでしょうか? たとえば、10枚の画像(01.jpg~10.jpg)を18分毎に入れ替えます。 しかし、仮に2007年9月1日の午前1時~1時18分は02.jpgが表示されなければならないとすると、そのような基準の日時を設定しなくてはならないと思います。 このようなスクリプトをご存知でしたらぜひ教えてください。

  • スクリプトのリンク元

    スクリプトを実行したリンク元のチェックで困っております。 SSIやimgタグで呼び出すカウンタを作っているのですが、その際にHTTP_REFERERを使うと、その呼び出しHTMLのURLではなく、その呼び出しHTMLのリンク元が表示されてしまいます。SSI、imgタグで呼び出したHTMLのURLを知ることが出来るでしょうか? つまりは、http://www.***.com/~user/index.shtmlからhttp://www.***.com/~user/chk.phpをSSIで実行したとします。その際にindex.shtmlのリンク元のURLではなく、http://www.***.com/~user/index.shtmlというSSIでスクリプトを実行したURLが知りたいのであります。 リンク元とは、yahooから検索でindex.shtmlに来た場合、http://www.yahoo.co.jp/と表示されるものです。 暇なときに回答くださいm(_ _)m 補足聞きたい方もお願いします。

    • 締切済み
    • PHP
  • リンクする画像とテキストをくっつけるには?

    ブログでHTMLタグを使いたいのですがまだよく分かりません。 テキストをクリックしたらリンクするためのHTMLタグは次の通りですよね。 <a href="リンク先URL">表示するテキスト</a> 画像(写真)をクリックしたらリンクするためのHTMLタグは次のようになりますよね。 <A Href="リンク先URL"><img src="画像のアドレス"><A>  私は現在、テキストと画像の両方を同じサイトにリンクさせるのに、上の二つのタグを使っているのですが、本文に表示されると二つが離れてしまいます。よく、画像とテキストが一体化しているのを見るのですが、そうするにはどうしたらいいのでしょうか?ご教授願えませんか?

  • リンクと画像に触れると数カ所の画像が替わる

    わかりづらいかもしれませんので、例をあげながら質問いたします。 アルファベットのリンク画像にマウスが触れると、 同じ場所に読みであるカタカナの画像を表示させるためには、 オンマウスのタグを入れてあげればいいんですよね。 ところがもう一つ、別の場所(テーブル)に写真画像も入れ替えて表示させたいのです。 アルファベットのリンク画像がいくつかリストになっていて、 触れると同じ場所に読みの画像が入れ替わって教えてくれると同時に、 別のテーブルに1ケ所だけ写真サイズの画像のスペースがあり、 そこにリストに合わせた写真画像を入れてあげたいのですが。 オンマウスオーバーとオンマウスアウトを2個ずつ入れてあげることになりますが、 連動で数カ所の複数の画像を表示、非表示で入れ替えるのは可能なのでしょうか。 何度組み合わせても、ひとつしか替わらないのです。 別のテーブルにある画像を表示させるのにはHTMLで、 同じ場所にある画像を変化させるのにはリンク画像に触れるJavascriptを使いました。 オンマウスオーバーとオンマウスアウトの記述を 2つ並べて記述するのが間違ってるんだと思うのですが。 連動で同じ箇所と別の箇所に複数の画像を表示させてリストごとに替わる記述法があれば、ぜひ教えてください。 また、リンクに対するオンマウスではなく、 画像に対するオンマウスっていうのはあるんでしょうか。 知識不足で、しかも長文になり申し訳ありません。 お忙しいところ恐縮ですが、よろしくお願いいたします。

  • リンク画像に触れると文字

    ブログに、アイコンをクリックしたら小窓(新しいウインドウ)を出すようにしています。そのアイコン(リンク)に触れると説明文が出るようにするには、どこのタグにどのように入れたらいいのでしょうか? とりあえず、 <SCRIPT language=JavaScript><!-- function subWin1(){ window.open("小窓の中に表示したいアドレス","window2","resizable=no,menubar=no,directories=no,status=yes,location=no,scrollbars=yes,toolbar=yes,width=横幅,height=高さ,left=左からの距離,top=上からの距離"); } --> </SCRIPT> <A href="javascript:subWin1();"><IMG src="画像でリンクを貼るときはココに画像のURL" width="幅" height="高さ" border="0"></A> ↑こういう設定をしています。

  • 画像内リンクについて

    ホームページの操作方法を説明する、 クリッカブルを作成しています。 HTMLにホームページのキャプチャ画像を貼り、 実際のホームページのように、 画像のリンク文字部分をクリックすると、 指定したリンク先に飛ばすといったものを作っているのですが、 画像内の特定の座標をクリックしたとき、 同じ画像内の別の座標に飛ばすということは出来ますでしょうか。 方法はタグでも何でもいいですが、 社内ネットワーク内だけで公開するものなので、 ローカル環境で動くもので、ご提案いただけるものがありましたら ご教示ください。

専門家に質問してみよう