• ベストアンサー

画像のランダム表示とリンク、alt属性について

はじめまして。 検索かけてみましたが、自分の納得が得られる回答が無かったため、質問させていただきました。 ページを更新するごとに画像とテキスト(その画像の作成者などを書きたい)をランダムで表示させ、なおかつ他へリンクし、画像にはALT属性、テキストにはTITLE属性を付けられるJavaScript、もしくは、CGIを探しています。 可能であれば、画像とテキストを別々の場所へリンクしたいと思います。 このようなJavaScript、またはCGIを知っている方、ご教授お願いします。

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

  • ベストアンサー
  • 665
  • ベストアンサー率72% (18/25)
回答No.2

例えば表示したい部分に以下のようなSCRIPT要素を記述してください。 <script type="text/javascript"> <!-- var imageList = [ ['画像のパス', 'alt属性の値', 'テキスト', 'title属性の値', 'リンク先のパス'], ['画像のパス', 'alt属性の値', 'テキスト', 'title属性の値', 'リンク先のパス'], ['画像のパス', 'alt属性の値', 'テキスト', 'title属性の値', 'リンク先のパス'], ['画像のパス', 'alt属性の値', 'テキスト', 'title属性の値', 'リンク先のパス'], ['画像のパス', 'alt属性の値', 'テキスト', 'title属性の値', 'リンク先のパス'] ]; var rndList = imageList[Math.floor(Math.random() * imageList.length)]; document.write('<p><a href="' + rndList[4] + '"><img src="' + rndList[0] + '" alt="' + rndList[1] + '"><\/a><\/p>'); document.write('<p title="' + rndList[3] + '">' + rndList[2] + '<\/p>'); //--> </script> 次に↓の部分に適切な値を当てはめてください。 ["画像のパス", "alt属性の値", "テキスト", "title属性の値", "リンク先のパス"] この部分は必要なだけ列挙して増やすことができます。 そして↓の部分は出力するHTMLの骨組みのようなものです。 必要があれば改造してください。 document.write('<p><a href="' + rndList[4] + '"><img src="' + rndList[0] + '" alt="' + rndList[1] + '"><\/a><\/p>'); document.write('<p title="' + rndList[3] + '">' + rndList[2] + '<\/p>'); もし列挙した値やHTMLの骨組みの文字列に「'」あるいは「</」の文字列を使いたい場合は、 それぞれ「\'」、「<\/」と記述してください。

hirono_22
質問者

お礼

お返事おくれてすみません。 ご回答ありがとうございます。 JavaScriptを試してみました。凄く良い感じです。 ですが、更新してみたら、全く何も表示されない場合があるのですが、これはなぜなんでしょうか?どのように改善するのが良いのでしょう? あと、document.writeから下のスクリプトの数字は何を表しているのか教えていただけると助かるのですが…。

その他の回答 (1)

  • kiyama_t
  • ベストアンサー率25% (19/74)
回答No.1

ちょっとお勉強が必要になりますが。 JavaScriptのことで例を知りたいときは、ココをあたってみると良いですよ。

参考URL:
http://www.usagi-js.com/index.htm
hirono_22
質問者

お礼

回答ありがとうございます。 う~ん、ちょっとBBS見てみましたが、なんだか厳しそうなところですね…。 自分が質問しても答えてくれるんでしょうか…。 とりあえず、いろいろ見てみることにします。

関連するQ&A

  • alt属性を付けるとは?

    ホーム・ページの作成にあたり、 管理者から、下記のように注意を受けました。 画像にはテキスト情報(alt属性)を必ずつけ、 テキスト情報(alt属性)の不要な画像には スペースを使用してください。 なにのことでしょうか? さっぱり分かりません。 当方の環境 Win98SE HPB 6.0 よろしくお願いします。

  • 更新する度にイラストとバナーを同時に、ランダムに表示するには

    http://www.tor.lislis.info/ ↑このサイトのように、イラストとバナーを同時に、ランダムに表示し、他サイトへのリンクを張り、画像にALT属性を付けるには、どのようなスクリプトを組めば良いのでしょうか?JavaScriptで可能なのでしょうか?それともCGIでやっているのでしょうか? このようなJavaScript、またはCGIを知っている方、ご教授お願いします。

  • ランダム表示画像にリンクマップを貼れますか?

    ページの上部に、ページが更新するたびに違う画像が 表示されるようにJavaScriptで記述をしているのですが、 その画像の数箇所に、別々のURLを貼りたいのです。 ランダム表示ではない通常の画像の場合、 それぞれの形に合わせてエリアを指定し、 リンクマップをすればいいと思うのですが、 ランダム表示をしている画像に対しては どうすれば良いのでしょうか? また、リンクを貼る部分をオンマウスオーバーするようにも したいのです。 このような事は可能なのでしょうか?

  • 画像リンクをランダムに4つ表示する

    このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか? どなたか回答をお願いします。

  • IMGのalt属性・title属性について?

    現在のプラウザのIE8やFirefoxなどでは、リンクの属性であるalt属性が ポップアップとして出ません。 ですので、alt属性・title属性の両方を明記することにしましたが、 この場合両方同じテキストでもSEO的に問題はないでしょうか? よろしくお願いします。

  • テキストにalt属性を持たせるには。

    画像にalt属性を持たせるには<img src="画像のパス" alt="コメント">でいいと思うのですが、テキストにリンクを設定した状態でそこにalt属性を持たせるということは可能でしょうか? もし可能なら どの部分にそのタグを挿入したらいいのでしょうか? <FONT size="-1"><A href="リンク先" target="_blank">1</A> (『1』という文字列にリンクを設定した場合。) 初心者の質問のためわかりにくい表現がございましたらすみません。 よろしくおねがいします。

  • 画像からランダムリンク

    Javascriptでランダムリンクをする場合、 <form> <input type=button onClick="jump()" value="ランダム"> </form> <script> url = new Array(); url[0] = "00.html"; url[1] = "01.html"; url[2] = "02.html"; function jump() { p = Math.round(Math.random() * (url.length - 1)); parent.top.document.location = url[p]; } </script> という記述を使うのは知っているんですが、 「ランダムリンク」というボタンではなく、 画像をクリックしてランダムリンクさせることは可能でしょうか? Javascriptでは無理な場合、 画像からランダムリンクを張る方法はありますか? CGI等でも構いませんので、お勧めがあれば教えてください。

  • リンクをランダムに変えたい

    画像ランダムスクリプトと同じような感じでリンクをランダムに変えることは可能でしょうか? つまりリンク先をいくつか用意しておいた上でページを表示するたびにテキスト上のリンク先を変化させたいのです。 ご教授よろしくお願い致します。

  • 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で、リロードするたびにランダムに画像を 表示するようにしている(画像は合計5枚)のですが、 ランダムに表示するように用意している画像の一枚一枚に 各画像バラバラのリンク先を設定することというのは可能なのでしょうか? また、可能であるのならその方法をお教え願えませんでしょうか。 よろしくお願い申し上げます。

専門家に質問してみよう