• 締切済み

残像を残しながら別の画像に切り替えるJavaScriptで、画像ごとに違うリンクを入れたいです。

http://iswebmag.hp.infoseek.co.jp/sample141.html 画像を自動で切り替えるスクリプトを入れたいと思いこのHPにたどり着いたのですが、この場合画像ごとに違ったリンク先へリンクを貼り、画像が切り替わると同時にリンクも変わるようにするにはどうすればよいでしょうか？ どなたか知恵を貸していただけたらと思います。 よろしくお願いします。

みんなの回答

noname#84373
noname#84373
回答No.3

http://oshiete1.goo.ne.jp/qa4715215.html

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

方法はいろいろあるけど せっかくスクリプトがあるからそれを応用する形で説明しようかしら。 まず、このimgchangeのロジックは理解できているかしら？ ここで大切なのは imgframe.src=image[ii]; の部分よ。 これはidがimgframeで示されているタグのsrcを変更しているの。 <img id="imgframe" src=""> このsrcが変更されているのよ。 わかった？ つまりリンクを変えたいのなら <a id="aaa" href=""> を対象にしたいなら・・・ ね？ もうわかるでしょ？

xx_nicoco_xx
質問者

補足

すみません、プログラムを書くほどの知識と理解がないので、なんとなく言いたいことはわかるのですが、どのように書き足せばいいのかはわかりません(T_T) せっかくヒントを頂いて申し訳ありませんが、できればコピペして要所要所を書き換えればわかるように教えていただけませんか？

noname#78439
noname#78439
回答No.1

リンク先を配列で定義しといて、imgchange()の中で 設定しなおせばいいのでは？

xx_nicoco_xx
質問者

補足

すみません、コピペでできるものしかやったことがなくて、プログラム自体はどのように書けばいいのか理解出来ていません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptによる画像切り替えについてわからなくて困っています

    javascriptによる画像切り替えについてわからなくて困っています。 初心者ですので説明もわかりにくいかもしれませんが、ぜひご指導をお願いします。 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいのです。 「javascript ロールオーバー　切り替え　クリック　リンク」といったキーワードで検索したのですが、ロールオーバー切り替えはできるけれどリンク先に移動できなかったり、ボタン画像画像そのものが切り替わるものだったり、なかなか思ったとおりのサンプルを見つけることができません。 カスタマイズするだけの知識もないので、大変困っています。 このようなサンプルスクリプトを紹介しているところがあったら教えていただけないでしょうか？

  • JavaScriptで画像からリンクプラスアルファ

    http://www.printpac.co.jp/ こちらのページの 2段目のスライドしているナビゲーションのようにマウスオ-バーでnext,prevボタンが表示され、それをクリックすると次の画像が即座に表示され、なおかつ目的の画像からは個別のページへリンクする。というものが作りたいと思っています。 今現在はフェードインフェードアウト(画像表示の雰囲気がサンプルとは少し異なります)で画像を7枚順に表示されるようにするところまではＯＫです。 更に、最後の画像の（giifファイル）中の文字からクリックでリンクに飛ぶ。 そして、3秒周期の表示が待てない人にはnext,prevの矢印がマウスオーバーで出てきて、それをクリックすると次の画像がフェードインする。という風にしたいと思っています。 現在のコードです。 <script src="http://code.jquery.com/jquery.js"></script> <script language="JavaScript"><!-- $(function(){ myImageCnt = 7; // 画像の数 myImage = new Array( // 画像ファイル名の設定 "img/main/f01.jpg", "img/main/f02.jpg", "img/main/f03.jpg", "img/main/f04.jpg", "img/main/f05.jpg", "img/main/f06.jpg", "img/main/f07.jpg" ); myNowCnt = 0; // 現在表示している画像番号 function myChange(){ // 定期的に画像を更新する関数 if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら myNowCnt=0; // 最初の画像に戻す }else{ // 最後の画像まで表示していないのなら myNowCnt++; // 次の画像へ } setTimeout(function() { $("#myFormImg").fadeOut(2000, function() { $(this).attr("src", myImage[myNowCnt]); $(this).fadeIn(1000, function() { myChange(); }); }); }, 3000); // 3秒周期 } myChange(); }); // --></script> <img src="img/main/f01.jpg" width="900" height="300" id="myFormImg"> <script language="JavaScript"><!-- myChange(); // --></script> サンプルのページでは"CSS"と"画像にMap"作ってリンク飛ばして、スライダーの動きはｊｓファイルで 制御しているようでしたのでこの"Ｍａｐ"を参考にひとまず最後に来るはずの画像を最初に持ってきて画像ファイルにＭａｐ作ってリンク飛ばして対応してるのですが、かなり苦し紛れ状態です・・・ 何をどのように記述すれば目的の物が出来るでしょうか？ よろしくお願いいたします。

  • リンクで画像を置き換えたい

    初心者ですが、よろしくお願いします。 たとえば 001.jpg 002.jpg 003.jpg という３つの画像ファイルがある場合に、 ---------------------------------- <html> <body> ～省略～ <a href = "#" onclick = "change_img(1)">画像1</a> <a href = "#" onclick = "change_img(2)">画像2</a> <a href = "#" onclick = "change_img(3)">画像3</a> <img src = "XXX.JPG> </body> </html> ---------------------------------- のような感じで画像１，２，３のリンクをクリックすることで、 ページ切り替えるのではなく、 XXX.JPGの部分のみ切り替えるscriptを考えているのですが、 ご教授願いないでしょうか？ 要望としては、切替候補の複数の画像は ページをロードしたときに最初に全て読み込んでおいて、 リンククリック時の画像の切替をスピーディにしたいと考えています。 サンプルの上記例にそくしたサンプルのコードなどを 回答いただけると助かります。 よろしくお願いいたします。

  • JavaScript　リンク付き画像ギャラリー

    初めまして。 francfrancのNEW ITEMSのところにあるJavaScriptについて http://shop.bals.co.jp/shop/c/c10/ こういうギャラリー（商品画像を並べてリンクで飛べる）をサイトに つくりたいのですがどうか教えていただけたらと思います。 サンプルなどあれば教えてください。よろしくお願いします。

  • リンク集にバナー画像を登録したいが・・・

    こんばんは。 現在フリー素材のサイト様から自動リンク集を借りてリンク集を作成しているのですが、バナー画像の登録の仕方がよくわからないのです・・・ リンク先にはそのページのＵＲＬを入れればいいまではわかるのですが、バナーの所も「http://・・・」で始まっていて、登録の仕方がよくわからないのです。 リンク先のサイトさんは画像が置いてあるだけで、アドレスがついているわけではないし・・・ きっとＨＰ作成には基本的な知識だろうとは思うのですが、わからないので教えてください。 お願いしますm(__)m

  • Javascriptでランダムに画像を表示させ、さらにリンクさせる

    当方、ホームページを作成していまして、 画像をランダムに表示させることはできたのですが、 さらにその画像をクリックにて違うページにリンクさせたいと考えております。 いろいろ検索してみたのですが、明確な回答が見つからなかったもので、、、 どなたかご回答いただけると、大変助かります。 どうぞよろしくお願いいたします。 現時点で、以下の様になっています。 （4枚の画像をランダム表示させ、リンク先は同じ場所を考えています） <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="0.gif"; ranimg[1]="1.gif"; ranimg[2]="2.gif"; ranimg[3]="3.gif"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>

  • JavaScriptで呼び出したテキストリンクを画像にするには

    Java Scriptで呼び出したテキストリンクを、画像に替えたいのですがうまくいきません。人がつくったScriptの改造なので、今ひとつわかりにくくて困っています。 ソースは function callJavascript(str) { var obj = parent.document.getElementById('maryleTVLink'); obj.innerHTML = "<a href='http://localhost:8888/cb/cframe_play.php?user=tbsv1&idx=" +str+ "' onclick=＼"return GB_myShow('MaryleTV', this.href)＼">大きく見る</a>" ; } です。 作りとしては、callJavascriptを読み込んでいる画像（Flash）をクリックすると、テキストリンクが表示される、というものです。 「大きく見る」の部分を画像のボタンにしたいのですが、 どうしたら良いか教えてください。

  • 画像リンクについて

    画像からリンクをはる場合にポインターが画像の上にきた時にその画像を変えるようにしたいのですが教えて頂けますか？ 現在私はHPを作っているのでHP関係の本を読みながら作っているのですがその事が載っていなくて悩んでいます。

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

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

  • 別ファイルの更新を画像で知らせる方法

    HPのメインページから各コンテンツへリンクを貼っていますが、そのリンク先のファイルを更新したら自動的に／一定期間だけ「up!」などの画像を表示させたいのですが、何か良い方法はありませんか？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する