今、サークルのホームページを作っていて、
写真のページを作成しています。
今までの表示方法とは変えて作りたいと思っているのですが、やり方がわからないので困っています。
理想に近いページはこれです↓
http://seirei.ath.cx/youngtc/cgi-bin/album/album …
(URLが長くてすみません。)
サムネイル画像をクリックすると、同じ場所に写真が表示されます。
cgiを使っているようですが、cgiは詳しくはわかりません。
htmlならわかるのでフレームで作ろうとしたのですが、
同一ページで写真だけ変えて表示する方法がわかりません。
どなたかこんな感じにできる方法をご教授ください。
ちなみに、現在HPはソフト等使わずに作っています。
No.3ベストアンサー
- 回答日時:
javascriptを使用すればページ移動もなく理想なものが実現できます
■■HTMLの<head></head>内に以下を記述■■
<!-- ここから // -->
<script type="text/javascript">
<!--
function change(src,msg){
document.getElementById("pict").innerHTML = '<img src="' + src + '">';
document.getElementById("msg").innerHTML = msg;
}
// -->
</script>
<!-- ここまで / -->
■■以下は<body></body>内の任意の場所に記述■■
■理想ページの上部部分、各サムネイルの記述(実際は画像分用意)
<a onclick="change('△画像のURLパス△','▲コメント▲')" style="cursor:pointer">▽画像サムネイル▽</a>
△変更する部分
onclickの後にある下記の△と▲、▽部分です
■画像を表示したい箇所に以下を記述(1つだけ)
<span id="pict"></span>
△説明
このspanの中に画像が表示されます
最初から何か画像等を表示したい場合は上記<span>内に記述しても大丈夫です
■説明を表示したい箇所に以下を記述(1つだけ)
<span id="msg"></span>
△説明
このspanの中にコメントが表示されます
最初から何かコメント等を表示したい場合は上記<span>内に記述しても大丈夫です
■■記述例■■
<html>
<head>
<script type="text/javascript">
<!--
function change(src,msg){
document.getElementById("pict").innerHTML = '<img src="' + src + '">';
document.getElementById("msg").innerHTML = msg;
}
// -->
</script>
</head>
<body>
<div>
<a onclick="change('00.gif','全員の写真です')" style="cursor:pointer"><img src="00.gif"></a>
<a onclick="change('01.gif','○○君')" style="cursor:pointer"><img src="01.gif"></a>
<a onclick="change('02.gif','○○さん')" style="cursor:pointer"><img src="02.gif"></a>
</div>
<div><span id="pict">ここに写真が表示されるよ</span></div>
<div><span id="msg">ここにコメントが出るよ</span></div>
</body>
</html>
■■注意■■
・idをspan以外のタグに付けるのは可能ですが、重複して使わないこと
・change()内の画像パスとコメントは必ず「'」で囲まれていて、「,」で区切られている形にする
・change()内で区切り以外の「'」や「"」は使わないこと
■■最後に■■
記述内容は最小限で書いていますので、後はご自分でカスタマイズしてください
また、今回はとりあえず理想の内容を実現させるためのものなので、javascriptに関する説明は省いています
細かい内容まで知りたい場合は、javascript内で使われている単語を検索にかけるとかなり出てきますので、そちらで勉強するのをおすすめします
回答ありがとうございます。
まさにこれです!
javaも普段はコピペだけで、自分では全くわからないので、このようにスクリプトを書いてくださって助かりました!
とりあえず作ってみたらこの先自分でカスタマイズできそうなので、やってみたいと思います。
No.2
- 回答日時:
フレームを使って、target属性でリンク先を別フレームに表示するように指定すれば同じようなページは作れると思いますが…。
参考URLをご覧ください。
参考URL:http://www.asahi-net.or.jp/~ax2s-kmtn/ref/html/h …
この回答への補足
作ってみたページでは、まずフレームで上下に分け、下にはサムネイル、そしてそのサムネイル画像をクリックすると上のフレームに大きな写真がでるようになってます。
しかし、
<a href="IMGP2100.JPG" target="ue"><img src="IMGP2100.JPG"></a>
という記述で、写真そのものにリンクしているので、写真を真ん中に表示したりコメントをつけたりすることができません。
フレームを使った場合、1枚の写真につき、1つのhtmlファイルを作らないと、真ん中に表示したりコメントをつけたりできないのでしょうか?
No.1
- 回答日時:
cgiを使用しないとこういうページは無理です。
参考URLにこの album.cgi の入手および解説ページありますので参考にしてください。
cgiは、やってみると案外簡単ですよ
参考URL:http://park1.wakwak.com/~tya/soft/cgi/album_t.html
参考URLを見てみたのですが、理想の形の写真ページがありませんでした。(もしかしたら、リンク切れのページにあったのかも・・・?)
ちょっとこのページだけでは理解ができなかったので、もう少し他のcgi解説ページを探してみることにします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング CGIが実行可能なHP領域又はレンタルサーバーでおすすめの所を教えてください 現在ホームページ領域の 1 2023/01/01 11:47
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- CGI (フリーの)ツリー掲示版CGI、昔は多用させてもらいましたが・・今セキュリティ上どうでしょう? 2 2023/06/25 07:18
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
- 据え置き型ゲーム機 【PS4/PS5】マン・オブ・メダンの選択肢 1 2022/07/06 15:13
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Qoo10で注文をキャンセルしたら...
-
インターネット用語について教...
-
MP3のURLが知りたい
-
アフェリエイトって登録したサ...
-
ASPで取得した情報をscriptタグ...
-
アフィリエイトASP広告主向けの...
-
プログサイトでオススメなのは...
-
クエリーのことについて Google...
-
画像録画ソフト Apower RECの解...
-
有料サイトの開設方法
-
FC2 BLOG <AUDIO TAGを入れプ...
-
ホームページ
-
サーバーログイン情報とFTP接続...
-
自分のドメインが他者のサイト...
-
インターネットの環境をポケッ...
-
Slackの料金体系に詳しい方教え...
-
任意団体名でも開設できますか
-
あいみょんというワードが検索...
-
イントラネットを構築したい
-
FC2掲示板に広告を表示させる方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
509エラー
-
色々な画像を指定の場所に表示...
-
FC2ホームページ作成のことで教...
-
L字みたいな記号の表示
-
テーブルセル余白(例えば左側...
-
PDFファイルが破損していると表...
-
ピクチャーボックスの大きさに...
-
HTMLで、ホームページが作れる...
-
グーグルのアイコンを操作して...
-
borderの太さを1px以下に見せ...
-
画像と画像の間のスペースはど...
-
ワードプレス管理画面から、ヘ...
-
なぜ、ホームページが削除され...
-
iPhoneで HTMLファイルを閲覧
-
縦ボーダーの長さ変更方法
-
ExcelVBAで挿入画像の縦横サイ...
-
レスポンシブWeb 右側の表示が...
-
一行は何ピクセル?
-
ブログの画像を復元したい
-
ブログに画像を選択して、アッ...
おすすめ情報