マンガでよめる痔のこと・薬のこと

現在、HTMLにてJAVASCRIPTを用いた写真観覧サイトをつくっています。
最初は 写真一枚ごとにhtmlをつくり、a hrefにて数字の連番にリンクさせ、クリックするとiframeのtarget指定しているフレームに写真HTMLが表示されるようにしていましたが、写真が数百枚となると、置き換えを使用してもHTML編集作業がつらく、JAVASCRIPTを探しました。
画像クリックで同フォルダ内にある連番の画像を数字の順番通りに、画像をクリックすると進むモノを発見し、使用したところ動作も軽く大変便利なのですが、進んだ画像はスクリプト内で進むのでブラウザバックが利かず、一度進むと戻れない状態です。画像の下に 進む 戻る のボタンを使ったビュアースクリプトも使ったのですが、やはり画像クリックで進んでほしいです。
使用したスクリプトは

<!--
num = 4; //任意の数字
nme = "" // 画像のディレクトリとファイル名の数字と拡張子より前の部分
exp = "jpg" // 拡張子
cnt = 1;
function changeImage() {
cnt++;
cnt %= num;
document.img.src = nme + cnt + "." + exp;
}
//-->

bodyには

<a href="JavaScript:changeImage()">
<IMG src="<!-- ファイル名-->"name="img" border="0"><BR>
画像クリックで進む

と記述しています。

このスクリプトの文言を本の画像を戻すスクリプトを参考にいじっても変化がなく、質問するにいたりました。よろしくお願いします。

質問者からの補足コメント

  • ご回答ありがとうございます。教えていただいた方法で記述したところ、たしかに別名URLとしてブラウザバックはできるのですが、クリックしても画像が変わりません。同じ画像(初期表示の画像)のまま別名URLとなります。再三の質問となり申し訳ないのですが、画像がクリックで変わるたび、一枚一枚ブラウザバックが入る方法をご存知ないでしょうか? 申し訳ありません。

      補足日時:2015/08/22 13:54

このQ&Aに関連する最新のQ&A

A 回答 (2件)

URLのハッシュ部分を変更することで、画像を切り替える方式のサンプル



<script>
(function(_){
_ ; var gallery = { index: 0, max: 4, prefix: 'sample', ext: 'jpg' };
_ ; gallery.getNextHash = function() {var n = (this.index + 1) % this.max; return '#img' + n};
_ ; gallery.displayHash = function(hash) {
_ , _ ; var n = 0;
_ , _ ; if (hash){ var m = /#img(\d+)/.exec(hash); if (m) n = parseInt(m[1]) }
_ , _ ; this.index = n;
_ , _ ; document.querySelector('img.gallery').src = this.prefix + (n+1) + '.' + this.ext;
_ ; };
_ ; var loader = function(ev){gallery.displayHash(window.location.hash)};
_ ; window.addEventListener('DOMContentLoaded', loader, false);
_ ; window.addEventListener('hashchange', loader, false);
_ ; function readAnchorCommand(ev) {
_ , _ ; var climb = function(elem,name){var e=elem; while(e && e.tagName!=name) e=e.parentNode; return e};
_ , _ ; var anchor = climb(ev.target, 'A'); if (!anchor) return null;
_ , _ ; var cmd = anchor.getAttribute('href'); if (!cmd) return null;
_ , _ ; return cmd;
_ ; }
_ ; window.addEventListener('click',function(ev){
_ , _ ; if (readAnchorCommand(ev) != '#nextimg') return;
_ , _ ; ev.preventDefault();
_ , _ ; window.location.hash = gallery.getNextHash();
_ ; },false);
})();
</script>
<a href=#nextimg><img src=sample1.jpg class=gallery></a>
    • good
    • 0

ブラウザバックをしたいなら、専用APIを使うのが筋です


https://developer.mozilla.org/ja/docs/Web/API/Hi …

ですが使いこなすのが面倒くさい API なので、
動作が少々重くなりますが、もっと簡単な方法を提案します。

<script>
function changeImage() {
var fileName = クリックで表示させる画像ファイル名;
window.location.search = "src=" + fileName; // 異なるURLでページを移す(ブラウザバック可能)
}
window.onload = function(){ // ページを移した後で実行される
_ if (location.search) { // 画像クリックでページが移った場合
_ _ var m = /src=([\w\.]+)/.exec(location.search); // URL から表示する画像ファイル名を得る
_ _ var fileName = decodeURIComponent(m[1]); // 保険
_ _ document.img.src = fileName; // 画像を変更
_ }
}
</script>
<a href="#" onclick="changeImage()"><img src=初期表示.jpg name=img></a>
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング