解決済み

キャプション付きの複数画像を複数ランダムに表示

  • 困ってます
  • 質問No.8556769
  • 閲覧数233
  • ありがとう数12
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 83% (57/68)

タイトルの通りなのですが、キャプションなしは検索して分かったのですが、キャプション付きだと分かりません。どなたかお教えください。

参考にしたプログラムは、以下の通りです。

<HTML>
<HEAD>
<TITLE></TITLE>
<script language="javascript">
<!--//
var arrImage = new Array(
"img/img0.jpg",
"img/img1.jpg",
"img/img2.jpg",
"img/img3.jpg",
"img/img4.jpg");
var arrLink = new Array(
"01.html",
"02.html",
"03.html",
"04.html",
"05.html");

var arrFlag = new Array(999,999,999);
function Show(){
document.imgNumber1.src = arrImage[StartRandom(0)];
document.links[0].href = arrLink[nTemp];
document.imgNumber2.src = arrImage[StartRandom(1)];
document.links[1].href = arrLink[nTemp];
document.imgNumber3.src = arrImage[StartRandom(2)];
document.links[2].href = arrLink[nTemp];
}
var nTemp, nLoop;
function StartRandom(nIndex){

nLoop = 0;
nTemp = Math.round(Math.random()*(arrImage.length-1));

if (nIndex != 0){
for (nLoop = 0; nLoop < nIndex ; nLoop++){
if (nTemp == arrFlag[nLoop]){
StartRandom(nIndex);
}
}
}
arrFlag[nIndex] = nTemp;
return nTemp;
}
//-->
</script>
</HEAD>
<BODY onLoad="Show()">

<a href="01.html"><IMG name="imgNumber1" src="img/img1.jpg" width="170"

height="170" border="0"></a>
<a href="02.html"><IMG name="imgNumber2" src="img/img2.jpg" width="170"

height="170" border="0"></a>
<a href="03.html"><IMG name="imgNumber3" src="img/img3.jpg" width="170"

height="170" border="0"></a>

</BODY>
</HTML>

<BODY>から</BODY>のプログラムでなぜ表示できるかもよくわかっていません。(これについてはおいおい学ぶとして、できればとっかかりのヒントをお願いします)

あと、スクリプトが利かない場合の表示は、<NOSCRIPT>~</NOSCRIPT>で間に変わりのものを書けばいいのでしょうか。

すいませんが、よろしくお願いします。

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

  • 回答No.4

ベストアンサー率 45% (5062/11035)

>複数表示させるにはどうすればいいのでしょうか。
 単にスタイルシートだけの問題になりますから(^^)・・HTMLもjavascriptもほとんど手を加える必要がない。そもそも、そうすべき事はわかりますよね。
1) javascript部分の変更
 外部スタイルシートにしたほうが良い
var css = new Array(
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/1.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/2.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/3.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/4.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/5.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/6.css">'
);

スタイルシート 6タイプ
[1.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:list-item;}
div.section div.nav ol li+li+li{display:none;}
div.section{background-color:fuchsia;}
div.section div.nav{border-color:red;}


[2.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:list-item;}
div.section div.nav ol li+li{display:none;}
div.section div.nav ol li+li+li{display:list-item;}
div.section div.nav ol li+li+li+li{display:none;}
div.section{background-color:silver;}
div.section div.nav{border-color:gray;}

[3.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:list-item;}
div.section div.nav ol li+li{display:none;}
div.section div.nav ol li+li+li+li{display:list-item;}
div.section{background-color:aqua;}
div.section div.nav{border-color:blue;}

[4.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li{display:list-item;}
div.section div.nav ol li+li+li+li+li{display:list-item;}
div.section{background-color:yellow;}
div.section div.nav{border-color:orange;}

[5.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li{display:list-item;}
div.section div.nav ol li+li+li{display:none;}
div.section div.nav ol li+li+li+li{display:list-item;}
div.section{background-color:lime;}
div.section div.nav{border-color:green;}

[6.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li+li{display:list-item;}
div.section div.nav{border-color:silver;}

注意)
 まず、HTMLやスタイルシートをきちんと身につけましょう。
 デザインや動作なんて、よっぽど酷くさえなければ、ユーザーはコンテンツの充実だけで訪問してくる。
『どうすれば自分のウェブサイトが独自性、価値、または魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。( https://support.google.com/webmasters/answer/35769?hl=ja#3 )』
 はデザインじゃない、内要素のものなのですよ。
お礼コメント
de_viant

お礼率 83% (57/68)

ありがとうございます。
参考になりました。
投稿日時 - 2014-04-20 21:55:23
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全3件)

  • 回答No.3

ベストアンサー率 45% (5062/11035)

Lynxでの表示結果忘れてましたね。
 検索エンジンには、すべてリンクが見えているということです。
補足コメント
de_viant

お礼率 83% (57/68)

回答ありがとうございます。
いろんな方法があるんですね。

教えていただいたサンプルでは、複数の画像からランダムに1点表示みたいなのですが、複数表示させるにはどうすればいいのでしょうか。
申し訳ありませんが、お教えください。
よろしくお願いします。
投稿日時 - 2014-04-17 23:17:51
  • 回答No.2

ベストアンサー率 45% (5062/11035)

HTMLと同じ場所にCSSというフォルダーを作り下記4つのスタイルシートをいれておく
[1.css]
@charset "Shift_JIS";
div.section div.nav ol li+li{display:none;}

[2.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li{display:list-item;}
div.section div.nav ol li+li+li{display:none;}

[3.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li+li{display:list-item;}
div.section div.nav ol li+li+li+li{display:none;}

[4.css]
@charset "Shift_JIS";
div.section div.nav ol li{display:none;}
div.section div.nav ol li+li+li+li{display:list-item;}

たったこれだけです。

 肝心な事は、スクリプトやスタイルシートのためにHTMLは書かない!!
 スクリプトやスタイルシートの説明サイト/書籍は、目的がスクリプトやスタイルシートの説明のためですが、現実には、HTMLがあって、それを「スクリプトでどう動作させるか」「スタイルシートでどう表現するか」になります。
 そうしないと、使い物になりません。

 これを応用すると、リストだろうが、セクションだろうが、単純なメッセージだろうが背景画像だろうが・・ランダムに変更できる。
  • 回答No.1

ベストアンサー率 45% (5062/11035)

そんな回りくどい事しないでも。
★ナビゲーション的な要素だと思いますが、そんなものjavascript経由で提供したらダメです。
【引用】____________ここから
技術に関するガイドライン
 Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[ウェブマスター向けガイドライン(品質に関するガイドライン) - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )]より

★スタイルシートにしろ、javascriptにしろ、それらが利用できないユーザーエージェントのことも考慮すべき。

★HTMLをきちんと作成することが大前提です。
 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )」


[サンプル]
★Another HTML-lint gateway( http://cetus.sakura.ne.jp/htmllint/htmllint.html )
 のHTML4.01strictです。
★添付はLynx(すなわち検索エンジン)が理解している様子
★印刷時はすべて印刷されます。(印刷プレビューで確認する)
★HTMLは簡潔で、(検索エンジンを含めて)誰にでも内容が理解できるのでメンテナンスも楽
 class名は、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
★スマホから幅広ディスプレイまで対応(ウィンドウ幅やCtrl + +/-でフォントサイズを変えてみる。)

※タブは_に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<meta http-equiv="Content-Script-Type" content="text/javascript">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style media="screen" type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
a img{border:none;}
div.header,div.section,div.footer{width:80%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section div.nav{
text-align:center;
border:ridge red 4px;
width:300px;
margin:0 auto;
}
div.section div.nav ol,div.section div.nav ol li{
list-style:none;
margin:0;padding:0;
}

body{background-color:gray;}
div.header,div.section,div.footer{background-color:white;}
-->
_</style>
<!-- ここからがランダム表示のためのスタイルシート読み込み -->
<script type="text/javascript">
<!--
function getRand(){
return Math.round(Math.random()*(css.length-1));
}
var css = new Array(
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/1.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/2.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/3.css">',
'<link rel="stylesheet" type="text/css" media="screen" href="CSS/4.css">'
);
rand = getRand();
document.write(css[rand]);
-->
</script>
<!-- ここまでがランダム表示 -->
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="nav"><!-- ナビゲーションだよ -->
___<h2>おすすめ商品</h3>
___<ol>
____<li><a href="01.html">掃除機</a>
_____<p><a href="01.html"><img src="img/bqc100.jpg" width="170" height="170" alt="掃除機"></a></p>
_____<p>今月のお勧めは、掃除機の新製品です。</p>
____</li>
____<li><a href="01.html">扇風機(黒)</a>
_____<p><a href="02.html"><img src="img/fun101.jpg" width="170" height="170" alt="扇風機1"></a></p>
_____<p>新色(黒)のシックな扇風機</p>
____</li>
____<li><a href="01.html">扇風機(青)</a>
_____<p><a href="03.html"><img src="img/fun102.jpg" width="170" height="170" alt="扇風機2"></a></p>
_____<p>涼しさのただよう新色、青色の扇風機</p>
____</li>
____<li><a href="01.html">扇風機</a>
_____<p><a href="04.html"><img src="img/fun103.jpg" width="170" height="170" alt="扇風機3"></a></p>
_____<p>定番のシルバー色の扇風機</p>
____</li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
このQ&Aのテーマ

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ