• ベストアンサー

画像のランダム表示とリンク、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

専門家に質問してみよう