ＨＰ作成にあたり ＨＴＭＬで困っています

質問

ＨＰ作成にあたり
技術者様、または経験者様などに
ご助言頂きたく投稿しました。

自分は自作の絵を展示するＨＰの調整中でして、
現状は、絵の小窓をクリックすると
リンク先の別ウインドウでページが開くのですが、
毎回毎回、別ウインドウで開封してしまい、
閲覧者に毎回見た絵の数だけ閉じるボタンを
押させてしまうという、厄介なサイトになってしまっています。

そこで以下に質問を箇条書きにしました。
対応して頂ける範囲内で結構なのでご助言頂ければ幸いです。

(1)絵のウインドウを一つ開いたらその後は
　同じウインドウで表示させたいのですが、どの様に調整すべきでしょうか？しかも、絵のウインドウは個々にサイズの違いがあります。

(2)最初は<SCRIPT language="JavaScript">を文頭に置いて作成していたのですが、
遅くなってしまうイメージがあったので下記にある<a href=# 　で始まる文章に切り替えましたが(フリーの素材で見つけました)、何が違うのでしょうか？

(3)　(2)の項を踏まえJavaScriptを使用した方が良いのでしょうか？

現状、組み込んでいるＨＴＭＬは以下の通りです。
<a href=# onclick="mywin=window.open('リンク先の別ウインドウの指定アドレス','','width=415,height=400');">
<img src="絵の小窓の指定アドレス>
</a>　

どうかお助けください。。

回答No.2

shu0308 · ベストアンサー

別窓で開くのではないのですが。
参考URLのやり方だったら結構希望に適した形になるんじゃないですかね。

JavaScriptを使ったやり方です。

参考URL：

http://allabout.co.jp/internet/hpcreate/closeup/CU20081002A/

お礼

ご返答 遅くなり申し訳ありません。

参考ＵＲＬの内容、
まさに自分が求める内容で助かりました。

ありがとうございました！

回答No.3

tenderfeel

(1)
JavaScriptの方で画像を開くターゲットウィンドウを指定すれば、
同じ窓を使いまわすことができます。
window.openで開く場合、カッコの中で2番目に指定するのがウィンドウ名なのですが（2のサンプルソース参照）、ここに適当な名前を入れると
該当するウィンドウ名を持つ窓があればそちらで開き、なければ新しい窓を作成するという挙動になります。
（新しく窓を作らずに既存ウィンドウの新規タブで開く場合もあります）

(2)
タグの中に書くかscriptタグ（or外部ファイル）に書くかという違いで、やってる事は同じです。
「遅くなってしまう」というのはブラウザの性能に依存するので、
IE6だと何書いてももっさりするし、Chromeならそれを5～6倍は早く処理します。

タグ１つひとつに同じコードがいくつも並ぶより、１つの短い関数を使いまわす方がファイルサイズ的には軽くなりますよ。

function newwin(src,w,h){
window.open(url, "WindowName", "width="+w+",height="+h);
}

<a href="'リンク先の別ウインドウの指定アドレス'" onclick="newwin('リンク先の別ウインドウの指定アドレス',415,400);return false;"><img src="サムネイル画像とか"></a>

hrefにurl、onclickにreturn false;を入れておけばJavaScriptオフでもページを開くことができます。

(3)　
ポップアップウィンドウはアダルトサイトやブラクラでよく使われる手法ということもあって、生理的に嫌われる節があります。
JavaScriptを使用するなら、LightBoxなどのギャラリースクリプトがおすすめです。

お礼

ご返答が遅くなり申し訳ありません。

いろいろとご丁寧なご解答ありがとうございました。
ポップアップウインドウなど嫌われるケースもあるんですね。
全く知らなかったです。
今後もtenderfeel様の文章を読み直しながら勉強していきます。

ありがとうございました！

回答No.1

uriboar

リンク先を同じウインドウで開くか、別で開くかは、訪問者に任せたほうが親切です。
ブラウザの設定で、強制的に新しいウインドウを開かないようにしている方もいますし、セキュリティの関係上、JavaScriptを切っている方もいます。

なので、単純に
<a href="リンク先（フルサイズのイラスト）のアドレス"><img src="小さい絵のアドレス" alt="絵が表示できなかったとき代わりに表示される文字" /></a>
で良いと思います。
なお、フルサイズのイラストのページにも
<ul>
<li><a href="・・・">次の絵へ</a></li>
<li><a href="・・・">前の絵へ</a></li>
<li><a href="・・・">一覧に戻る</a></li>
</ul>
のような感じで、ナビゲーション用のリンクを用意しておくとより親切ですね。

お礼

ご返答遅くなり申し訳ありません。

構造は意外と簡単に出来るのですね。
さらに人それぞれで見る環境の違いという問題もあるんですね。

ご丁寧なご返答ありがとうございました！