こんにちは!写真をスキャンで読み、フォトショップで加工し、
WEB用に保存(JPG)しFecthでライコス無料ホームページにアップしました。
ここまではなんとかでき、タグを<img src="++++++">として、表示することまではうまくいきました。
●ただ、イメージの周りに隙間が空いちゃうんです。
これを隙間なくウィンドウ内に収めるにはどうすればいいんですか?
これをトップページにし、このイメージ自体にリンクを設定して
ワンクリックしてメニューページに跳ぶようにするつもりです。
●また、ウィンドウの右下の四角を、閲覧者が引っ張って大きさを調整するときにこのイメージ以上に大きくしても余白がつかないようにしたいんです。
●今作成中のこのHPにたどりついた時の、閲覧者が見れる大きさがイメージぴったりの大きさにできればそうしたいです。ちなみに720*519ピクセルです。
質問内容をうまくかけなかったかもしれません。
わからなかったら捕足下さい。
どなたか、教えていただければ幸いです。お願いします☆
No.2
- 回答日時:
あと、<HEAD>~</HEAD>の中に
<script language="JavaScript">
<!--
resizeTo(720,510);
//-->
</script>
で窓の大きさ指定です。
この回答への補足
ありがとうございます。若干横長く見えてしまいますが、
しょうがないのでしょうか?()のなかの数字の単位ってピクセルなんでしょうか?
●説明が足りなかった部分があります。
HPをみるときにもし画面上で2センチに見えたら
右下の引っ張るバーを動かそうが、最大化しようが、
ずっと2センチのまま維持したいのです。
このやり方は御存じでしょうか?お願いします!
No.3
- 回答日時:
(1)隙間なくウィンドウ内に収める
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
で、隙間がなくなります。
------------------------------------
leftmargin="0" 左マージン0 (IE用)
topmargin="0" 上部マージン0(IE用)
marginwidth="0" マージン幅0(NN用)
marginheight="0" マージン高0(NN用)
------------------------------------
を<BODY>タグに追加してください。
(2)(3)については、yuicaさんの仰る通りかと。
この回答への補足
すみません、発見したのですが、no.1のyuikaさんのタグと組み合わせることによって隙間なくやることができるみたいです。
ありがとうございます!
No.4
- 回答日時:
(3)ウィンドウサイズを指定する。
ちょっと調べてみましたら、ウィンドウサイズの指定方法が見つかりましたので、参考にしてみてください。
『最初に開くページのサイズ指定方法』
<HEAD>内に下記内容を加える。
--------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeWindow(){
window.resizeTo(幅,高);
}
//-->
</SCRIPT>
--------------------------------
<BODY>タグの中に、
onLoad="resizeWindow()"を付け加える。
--------------------------------
<BODY onLoad="resizeWindow()">
--------------------------------
これで、一旦ページが開いたら、直後にサイズを変更し
望みのウインドウサイズにできるようです。
ありがとうございます!JavaScriptとはこういうものなんですね。
しかし、まだ、解決されていない問題が。
●フォトショップの『画像解像度』で表示されたピクセル*ピクセルで
入れたはずなのに若干横長く表示されてしまいます。
●ウィンドウをちいさくすると画面までもが小さくなってしまいます。
ウィンドウをいじくってもなかのイメージの文字やイラストの大きさは
維持されてほしいのですが。どうか、教えて下さい!
No.5
- 回答日時:
窓を小さくすると小さくなってしまうのは、(1)で画像の大きさを私が100%のパーセント表示でご紹介したからです。
ごめんなさい。開く時に窓の大きさを指定するなどの下記のestocさんがご紹介のJAVAスクリプトやを使うのを前提に、
背景に画像を1枚載せる方法をご紹介しますね。
<head>~</head>の中に
<style type="text/css"><!--
body { background-repeat:no-repeat;}
--></style>
<body background="画像の名前" width=画像の横サイズ height=たてのサイズ>
背景画像がページの中央に一枚だけ表示されます。
</body>
</html>
ありがとうございます!!もうひとつ、疑問があるのですが、
ウィンドウの右下のボタンを引っ張るとウィンドウを大きくできますよね?
イメージ以上にウィンドウを大きくしてしまうと右と下に隙間が開いてしまうんです。これを見せたくないのですが、どうすればいいんですか?
ウィンドウがイメージ以上に大きくなったらイメージの周りに灰色?
っぽくなるような感じがいいんですが。
No.6
- 回答日時:
こんにちは。
ばばば、と書いてしまったので、もっとシェイプアップできるはずなんですが、JavaScriptで書いてしまう、という方法で実現してみました。
今、環境がMacなので、Winの動作保証できないんですが、IEとNN4.xで動作します。
動作の流れとしては、
(1)ウィンドウサイズの取得
(2)画像より大きければ、画像をウィンドウサイズに合わせて拡大
(3)画像より小さければ、画像のサイズは初期値
(4)リサイズしたら、ページをリロードし、(1)~(3)の動作を実行
という感じです。
ただし、このスクリプトだとNNの場合ウィンドウサイズにあわせるとスクロールバーがでてしまうので、ウィンドウサイズから3マイナスしてます。
<html>
<head>
<title>test</title>
<script language="javascript">
function getWinsizeW(){
if(document.layers) return window.innerWidth;
if(document.all) return document.body.clientWidth;
return -1;}
function getWinsizeH(){
if(document.layers) return window.innerHeight;
if(document.all) return document.body.clientHeight;
return -1;}
function imgWrite(){
iw = 720;
ih = 519;
if(document.layers){w = getWinsizeW()-3;h = getWinsizeH()-3;}
if(document.all){w = getWinsizeW();h = getWinsizeH();}
if(w>iw||h>ih) document.write('<a href=""><img src="goo.gif" width='+w+' height='+h+' border=0></\a>');
if(w<=iw || h<=ih) document.write('<a href=""><img src="goo.gif" width=720 height=519 border=0></\a>');
}
var flag
flag=!(document.layers&&parseFloat(navigator.appVersion)<4.5&&document.height>window.innerHeight)
window.onresize = new Function("if(flag){location.reload()}else{flag=true}")
</script>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<script language="javascript">
<!--
imgWrite();
// -->
</script>
</body>
</html>
で上手くいくかと思います。
リンク先は任意で『test.html』にしているので、そこは変えて下さい。
また、ウィンドウリサイズ対応のスクリプトは、mugiさんのページ(http://mugi.ca.tc)にあるスクリプトを参考にしました。
ありがとうございます!
恥ずかしながらコピペで試したのですが、
ブラウザがIE5だからなのか、よくわかりませんが、
思ったような効果ではありませんでした。
JAVAスクリプトはまだわからないので…どうすればいいのか
よくわかりません。
どこら辺が具体的に思っていた通りではなかったかと言うと、
●ウィンドウをいろんな形にすると、それに合わせてイメージも
縦長になったり横長に変形してしまう。
●ウィンドウをいじるたびにたまに縦に同じイメージが地続きになっている。
う~ん、無理なのかな。
どうすりゃ?んんん。
もしかして、下記の回答者の方ののタグと組み合わせるってこと
ではないですよね?
今は。ss_sionさんが教えて下さったタグのみで
やってみています。
No.7
- 回答日時:
まわりに空きができるときに、真ん中に表示したいというお話でしたら、
<html>
<head>
<style type="text/css"><!--
body { background-repeat:no-repeat;
background-position:50%; }
--></style>
<body background="写真画像の名前" bgcolor=cccccc>
背景画像がページの中央に一枚だけ表示されます。
</body>
</html>
ありがとうございます!!
こんな感じが今のところはベストですね。
なんだか、簡単でしたね。
でも、気になるのはJavascriptが動いているのか?っていうことです。
また、分からないことがあればおしえてください☆
そのときはもっとうまく質問できるようにしたいです。
ありがとうございました☆
No.9ベストアンサー
- 回答日時:
こんにちは。
返事遅くなりました。No.6で回答したss_sionです。
私、難しく考えてしまっていたようで(^^;
以下ではどうでしょう??
一応、画像にリンク張る、というのが目的の一つだという前提です。
<HTML>
<HEAD>
<TITLE>test</TITLE>
<script language="javascript">
function winResize(){
iw = 720;
ih = 519;
if(document.layers) {
w1 = window.outerWidth;
w2 = window.innerWidth;
h1 = window.outerHeight;
h2 = window.innerHeight;
w = w1-w2+iw;
h = h1-h2+ih;}
if(document.all) {
w=iw+4;
h=ih+85;}
window.resizeTo(w,h);
}
</script>
</HEAD>
<BODY bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="winResize();" SCROLL="no">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<TR>
<TD align="center" valign="middle"><a href=""><img src="goo.gif" width=720 height=519 border=0></a></TD>
</TR>
</TABLE>
</BODY>
</HTML>
ウィンドウの自動リサイズを前提で組んでみました。
ただ、NetscapeとIEではスクリプトが対応していたり、していなかったり、といろいろあって、あくまで、擬似的な感じになっています。
まずは、お試しください・・・。
おおおおおおっ!!
これぞ、当初、私がやりたかったやり方です!
今日は久々にいい日だなぁ、って思ってしまいました。
後は、このスクリプトを自分なりに理解しないといけませんね。
頑張ります。今回、丁寧に教えて下さって、ありがとうございました☆
解決方法が見つかったのでこれにて質問を締め切らせていただきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
一つのリンクに複数のURLを指定
-
リンク先を2つ表示させる
-
HTMLで条件によって表示・非表示
-
URLの♯(ハッシュマーク)の代...
-
javascriptの保存と呼び出し
-
ブラウザの右上にあるボタンを...
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
社内で利用するWebサイトを立ち...
-
HTMLページが勝手にダウンロー...
-
iPadの標準ブラウザでローカルH...
-
htmlの中にexcelが埋め込むには...
-
java_run.batがダウンロードで...
-
htmlファイルの表示が真っ白
-
Webサイトから、txtファイルを...
-
SSIでインクルードしたファイル...
-
<a href=…></a>で表示されない。
-
googleドライブで、PDFファイル...
-
Excelファイルをダウンロ...
-
css ,videotタグ。ホームページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一つのリンクに複数のURLを指定
-
ブラウザの右上にあるボタンを...
-
ページ切り替え時に音を鳴らし...
-
タイトルバーを非表示にできま...
-
リンク先を2つ表示させる
-
リンク先のURLが毎日変わる場合...
-
ウィンドウサイズ固定
-
window.confirmのタイトル
-
一つのリンクで、複数のウィン...
-
行番号を指定したリンク
-
リロードさせるたびに画像を変...
-
リンク先のテキストボックスへ...
-
ハイパーリンクをクリックして...
-
春夏秋冬の季節によって、画像...
-
ロジックの組み方について
-
既存サイトのjQueryのバージョ...
-
ポップアップ小窓を開いた時に...
-
HPを作りましたが、WEB上で開い...
-
HPで浮き出るウィンドウの作り方
-
htmlから<a>でpdf表示時にpdf資...
おすすめ情報