画像をクリックして元に戻すには

ホームページでよく見かけますが、写真等をクリックして別ページの大きな画像を表示させたあと、その画像をクリックすると前のページに戻るのをみかけます。
アンカーで元のファイル名を記述すればできますが、
特定のファイル名を指定することなく、
<INPUT TYPE="BUTTON" VALUE="前のページへ戻る" onClick="history.back();">
のようなものを、ボタンではなく画像をクリックしたときに機能するようにするには(img src=）で、どのように記述すればいいのでしょうか。
検索してみたのですが、なかなか見つけられませんのでよろしくお願いします。

次のような例を見つけましたが
このTABLEを使わないで直接画像のみで指定したいのですが。
<script language="javascript">
function onPh(img){
myImg.src = img
myTable1.style.display = "block"
myTable2.style.display = "none"
}
function offPh(){
myTable1.style.display = "none"
myTable2.style.display = "block"
}
</script>
－－－－－－－
<TABLE border="3" table id="myTable1" width="50%" height="50%" onclick="offPh()" style="display:none;">
<tr>
<td><img id="myImg" width="100%"></td>
</tr>
</TABLE>
<table border="0" id="myTable2" style="display:block;">
<tr>
<td><FONT color="#660066"><img src="hit3.jpg" width="80" height="60" onclick="onPh(this.src)"><br>

No.3 ベストアンサー 回答者： mahny 回答日時： 2007/02/06 23:16

#1です。

状況が上手く再現できないので予想なのですが…

<span>で"position: absolute;"を使っていますが、
このタグのレイヤーがクリックで戻したい<IMG>よりも
上位に来ていて、かつ被さっているということはないでしょうか。

もしそうならonClickイベント自体が発生していない可能性があります。
試しに、spanタグにonClick()を乗せるとどうでしょう。
もし、動作してしまうようスタイルに<span>と<IMG>のスタイルに"z-index"を追加して
明示的に<IMG>を上位に宣言してみると良いと思います。

参考URL：http://www.htmq.com/style/z-index.shtml

この回答へのお礼

<span>の中にonClick()を載せてみたらうまくゆきました。これでいってみようと思います
ありがとうございました。

お礼日時：2007/02/07 07:14

No.4 回答者： key-child 回答日時： 2007/02/06 23:56

span要素にposition・width・heightプロパティを設定してるのはなぜ？

（div要素でやるべきでは？）

【HTML 4.01仕様書（邦訳）】DIV要素とSPAN要素
http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401 …
【正しい知識を得たい人の為のCSS2リファレンス】positionプロパティ
http://hp.vector.co.jp/authors/VA022006/css/visu …
【正しい知識を得たい人の為のCSS2リファレンス】widthプロパティ
http://hp.vector.co.jp/authors/VA022006/css/visu …
【正しい知識を得たい人の為のCSS2リファレンス】heightプロパティ
http://hp.vector.co.jp/authors/VA022006/css/visu …

リンクがありますが一応
【Web標準普及プロジェクト】非置換インライン要素とwidth、heightプロパティ
http://www.mozilla.gr.jp/standards/webtips/webti …



後、一つ忠告です。
普通に、リンクで戻したい場所に戻してあげましょう。

javascriptが無効な環境では戻ることができませんし、
戻る先が必ずしもあなたが予期している場所とは限りません。
（検索結果でたどり着き、「前のページへ戻る」で検索結果に戻しても意味がありません）

この回答へのお礼

アドバイスありがとうございます。
スタイルシートの知識はあまりないのでサイトにあったソースを利用させてもらいました。
http://www.stylish-style.com/csstec/basic/g-phot …

spanとdivの使い分け等、参考になるいいサイトを教えていただきましたので、もっと勉強します。

たしかにこの「戻る」はjava環境にないと意味ないかもしれませんね。
ファイルが１００くらいあって異なる戻り先ファイル名をひとつずつ記述するのが大変なので汎用性のある"javascript:history.back()"を使っています。
複数ファイルのソースを一括して別々の異なる戻り先ファイル名を記述（あるいは修正）できるようなフリーソフトでもあればいいんですが…

お礼日時：2007/02/07 07:23

No.2 回答者： ishkkr 回答日時： 2007/02/06 22:27

別ページの画像を表示するタグにonClickイベントをくっつけて

<img src="○○" onClick="history.back();">

で大丈夫ですよ（＾＾）

この回答へのお礼

ありがとうございます。
#1の方にも書きましたが、いい方法があったら教えていただければありがたいです。

お礼日時：2007/02/06 22:51

No.1 回答者： mahny 回答日時： 2007/02/06 22:25

履歴をさかのぼっているのは

onClick="history.back();"
と書かれている部分だけです。

ですので、こんなカンジに書いてあげればOKです。
<IMG src="xxx" onClick="history.back();">

他のスクリプトは全く必要ありません。

参考URL：http://www.tohoho-web.com/js/index.htm

この回答へのお礼

さっそくありがとうございます。
実は、このページにはスタイルシートで
span.guard{
position:absolute;
width:100%;
height:100%;
background-image:url(spacer.gif);
}
を入れてあり、
画像表示(img src)の前に
<span class="guard"></span>
を入れてあるせいか、クリックしても戻らないのです。
これを削除したらできたのですが、残して使うことはチエがありますでしょうか。

お礼日時：2007/02/06 22:50