解決済
ホームページに掲載する写真
ホームページに掲載している写真を、クリックすると新しいウィンドウで表示する時に写真の大きさに合わせてウィンドウの枠を表示させたいのですが、どうすればよいでしょうか？ちなみにソフトはホームページビルダー１１です。
宜しくお願いします。
回答(4)
4.
ああ、なるほど、いわゆるサムネイルですよね。
そうじゃないかと思っていましたけど、質問では、別の写真とはなってなかったのでそうしていました。
内容的には、ほぼ同じですが、
以下のようにスクリプトを変更下さい。
<script type="text/javascript"><!--
function openImage(img) {
var aImage = new Image();
if("string" == typeof img){
aImage.src =img;
aImage.name=img;
} else {
aImage.src =img.src;
aImage.name=img.alt;
}
var url=aImage.src;
var alt=aImage.name;
var name=aImage.name;
if(/*@cc_on!@*/false){
name="Image";
}
var w=aImage.width;
var h=aImage.height;
var newWin=window.open(url, name, "resizable=yes,width=" + w + ",height=" + h );
//newWin.document.title=name;//read only
newWin.document.open();
newWin.document.write('<html><head><title>' + name + '<\/title><\/head>');
newWin.document.write('<body>');
newWin.document.write('<img src="'+ url + '" alt="' + alt + '"\/>');
newWin.document.write('<\/body><\/html>');
newWin.document.close();
newWin.document.body.style.margin="0";
newWin.focus();
}
//-->
</script>
onclick="openImage(this)"でも、
onclick="openImage('./Image.jpg')"
のようにファイル名でも使えるようになります。
画像のファイル名は、同じフォルダにある時は
Image.jpg とか
./Image.jpg とか
します。
配下のフォルダにある時は
image/Image.jpg とか
./image/Image.jpg とかします。
～のようなフルパスでも良いです。
また、別のアイコンのようなものをつかうのではなくて
単に縮尺だけを変えているような場合は、
例えば、
<img width="50%" …
のようにすれば50％幅で表示されます、
この場合は、
onclick="openImage(this)"
で良いです。
長々と本当にありがとうございました！
1.
ソースを表示するモードにして
<head>～</head>の間に
<script type="text/javascript"><!--
function openImage(img) {
var url=img.src;
var alt=img.alt;
var name=alt;//img.src ?
var w=img.width;
var h=img.height;
var newWin=window.open(url, name, "resizable=yes,width=" + w + ",height=" + h );
//newWin.document.title=name;//read only
newWin.document.open();
newWin.document.write('<html><head><title>' + name + '<\/title><\/head>');
newWin.document.write('<body>');
newWin.document.write('<img src="'+ url + '" alt="' + alt + '"\/>');
newWin.document.write('<\/body><\/html>');
newWin.document.close();
newWin.document.body.style.margin="0";
newWin.focus();
}
//-->
</script>
てな感じでスクリプトを書いておく。画像の方は
<img src="./image.jpg" alt="説明">
のようになっているのを
<img src="./image.jpg" alt="説明" onclick="openImage(this)">
のようにonclick 以下の部分を追加する
遅くなりましたが、ありがとうございます。
しかい、全く理解できません。
せっかく説明していただいたのに・・・。
ホームページビルダー以外でネット上でダウンロードでき、作成出来るソフトはあるのでしょうか？
ホームページビルダーに問い合わせたところ不可能みたいす。
「ソースを表示するモードにして」というのは作成ソフトでですよね？
2.
によると、ソースの表示ができるとなってますね。
もしくは普通のエディタでも最終出力のＨＴＭＬファイルを開けばソースの表示・編集ができます。(文字コードに気をつけないといけないですけど)
ＷＥＢページ（ＨＴＭＬファイル）の編集ソフト結構色々あるはずです、
ベクター：
何かを検索してみてはどうでしょうか？
私はホームページビルダーのようなイメージ編集系よりエディタサポート系（表示はブラウザで確認するから別にいい）のものが好みなので・
ありがとうございます。
早速試してみます。
ＩＢＭに問い合わせたところホームページビルダーは出来ないみたいです。
いくらソールを打ち込んでも保存する時に勝手に、どこでもモードor標準モードに変換されてしまうみたいです(涙)
それでウィンドウが固定されてしまうみたいです。
感謝です。
3.
それはそのままで、消さなくていいのです。
ＨＴＭＬページの最低限必要な(http-equivの行以外は別に必要ないけど)ものなので。
回答１でも書いているように、その<HEAD>から</HEAD>の間に回答１の<script>～</script>までを挿入下さい。
例えば、</head>と</TITLE>の間に。
画像を入れ込むと、ソースの方では、
<img src="./image.jpg" alt="説明">
のようなものが挿入されるはずですから、
回答１の説明のように追加してください。
ありがとうございます。
一応出来たのですが・・・。
説明不足でした。
たとえばページ１に50×50(1)の小さい画像があります。
それをクリックすると227×306(2)の画像にリンクする形で飛び、その画像を227×306の大きさのウィンドウに直接なるようにしたいのですが・・・。
(1)と(2)の画像は違います。
今回教えていただいたやり方だと、(1)の画像をページに載せ、その画像をクリックすると(1)の画像が左上に表示されます。
説明がわかりづらいかもしれませんが、宜しくお願い致します。
コメント(7)
不可能…
ソースの直接編集はできないという意味かな。
昔は、できたと思ったけど・
最悪、エディタでできるだろうに、どんだけ能力のないサポートなんだ？
メーカーソフトサポートだからしょうがないのかな・
早々のお返事ありがとうございます。１
ホームページビルダーで、ソースを直接編集できるのですが、まず新規ページを作成するときに「どこでも配置モードor標準モード」を選ばないと行けません。
どこでも配置モードを選ぶと
何も作業を行っていない状態でHTMLソースを開くと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm">
<TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>
が表示されてしまいます。
消しても保存をすると自動的にまた加えられてしまいます。
早々のお返事ありがとうございます。２
標準モードを選ぶと
何も作業を行っていない状態でHTMLソースを開くと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>
が表示されてしまいます。
これも消しても保存をすると自動的にまた加えられてしまいます。
どうなんでしょう？
３回答の説明が解りづらかった思いますのでページを作ってみました。
http://www.geocities.jp/arimatsuchu/test
の水色(1-1)の画像をクリックすると、もちろんその画像の大きさにに合わせた画像(1-2)が左上に表示されます。
http://www.geocities.jp/arimatsuchu/test2
のピンクの画像(2-1)をクリックすると、もちろんその画像の大きさにに合わせた画像(2-2)が左上に表示されます。
(1-1)をクリックした時に、(2-2)の画像で大きさも(2-2)の画像の大きさのウィンドウで左上に表示させたいのですがどうしたら良いでしょうか？
すいませんが宜しくお願い致します。
仰りたいことは理解していると思います。
どりあえず、実行ができるようになったと聞いて、我がことのように嬉しく思います。
あと、もう少しですね。
解決を書く時に間違えて送信しちゃいました(汗)
ありがとうございます！
やっと出来ました！！！
本当うに感謝です！！！
ありがとうございました☆
また何かありましたら宜しくお願い致します。
長々と本当にありがとうございました。
うまくいってよかったです
