HP作成に於いての画像処理方法について

質問

こんにちは、僕はPC初心者ですがHPを作成しています。
次の事が出来ないので何方か教えて下さい。
　1：小さい画像をクリックすると大きな画像になり、
　　　隣の小さい画像をクリックするとそれが大きな画像になる。
　以前どこかのHPでこの方法で見たことあります。ぜひ、自分の
HPで実現したいと思っています。このやり方、又は無料ソフトのURL
を教えて下さい。尚、使っているソフトはHPビルダーV9です。
　　　　　　宜しくお願いします。

回答No.7

fake-tang · ベストアンサー

お疲れ様です。
もう一息ですね。

--------------------------------------------------------------

画像全般は、
「小さい画像を大きくする」
のではなく、
「大きな画像を小さくしたサンプルを提示しておき、onclickアクション
で、大きな画像を表示させる」
のです。
このコミュニティでも度々質問を見かけますが、
「240x320pixelの携帯用待ち受け画面を1024x768pixelのデスクトップの
壁紙にしたら、全体的にモザイクがかかったようになってしまった」
という状況と同じようなもので、基本的に小さな画像を大きく引き
伸ばすと、モザイクがかかったようになったり、ピンボケになったり
します。
大きい画像をグラフィックエディタや「縮小専用」などで縮小して、
小さい画像を作成してください。

＜例1＞の場合、
<img src="（小さい画像へのパス）" style="width:80px（後略
ではなく、
<img src="（大きい画像へのパス）" style="width:80px（後略
になります。

style="width:80px;height:80px;"
で、大きい画像を小さく見せておき、
onclick="javascript:this.style.width='160px';this.style.height='160px';"
で、小さく見えていた画像を引き伸ばしています。

＜例3＞の場合、No.3にも書いたとおり、
<IMG src="（小さい画像へのパス）" onclick="javascript:pic.src='（大きい画像へのパス）';">
<IMG src="（最初に表示しておく画像へのパス）" id="pic">
です。

この場合の「大きい画像を小さくして作っておいた小さい画像」と、
「大きい画像」は、別のものです。
No_3625.zip で、s.jpg と l.jpg は、別のものとして作成してあり
ますよね。

--------------------------------------------------------------

onmouseover
は、onclick と onmouseover を書き換えているだけですから、例1～3
までができるようになれば、No.3＜蛇足2＞の回答でできるはずです。

--------------------------------------------------------------

引き続き ガンバレー（´・ω・｀）ノシ

お礼

こんにちは、素早い回答と適切な指導有り難うございました。
例1に於いて画質の向上は指導どうり「大きな画像を小さくしたサンプルを提示しておき、onclickアクションで、大きな画像を表示させる」
事で完璧になりました。onmouseoverも完全に出来るようになりました。例1だけで2つの画像を並べて大小切り替える出来るので、例3もやれば出来ると思っていますが必要がないのではないかと思っています。
　尚、HPビルダーが自動的にHTMLを変更されるのも訂正できるように
なりました。今日、アップしたHPをインターネットで確認しましたが、
完璧でした。本当にいろいろと親切に指導して頂き有り難う
ございました。　
　また、PCについて投稿する事あると思いますが、
そのときは宜しくお願いします。　山田

回答No.6

fake-tang

説明書も作ってみました。（1MBくらいあります）
http://hey.chu.jp/up/source3/No_3656.zip
解凍すると、【説明書（｀・ω・´）】フォルダが出てきますので、中にある
【説明書（｀・ω・´）ガンガレ.htm】をダブルクリックして開いてください。

きついことを言いますと、タグの仕組みを理解せずに動的な効果を
求めるというのは、1+1を理解せずに因数分解を解こうとしているような
ものと思ってください。
まずHTMLを学んでから、Javascriptに手を出すべきです。
・・・・・この動作はタグじゃないんですよ。Javascriptなんですよ。

でもとても努力の跡が見えてしまうので、見捨てられないヘタレな私が
ここに。
そして、この説明書でもできなかったらどうしようかと、かなり戦々恐々と
しておりますよ。・゜・（つД｀）・゜・。

ついでに、日ごろお世話になっているリファレンスサイトをご紹介。
http://www.htmq.com/index.htm

ガンガレ（｀・ω・´）ノシ

お礼

こんにちは、素早い回答と親切な指導有り難うございました。
確かにHTMLについても1＋1も出来ない超超初心者です。
でも、いろいろ指導して頂き少し解かるところも出て来ました。
　例1、2、3共再チャレンジしました。今まではHPビルダーの
素材集から挿入していたが、今度はデジカメ画像を使い2つを対比する事で「（画像へのパス）」が大体解かったという事もあり、例1については初めて成功しました。ただ、小対大を3にしたら大きい画像は
モザイク画像になり、2倍にしても今いちだった。
課題は多いが、画質改善と onmouseoverと例3は何とか出来るように
なりたい。宜しくお願いします。

回答No.5

fake-tang

追記します。

test.htm のソースを見るときは、ビルダーではなく、メモ帳などの
テキストエディタで開いてください。

※ ビルダーだと、ソフトが勝手に整形してしまうことがあるので。

そして、出していただいた＜例3＞の、間違った部分の修正。
<BR><IMG src="nat00161.jpg" width="80" height="60" border="0" onclick="javascript:pic.src='2.jpg'"><BR>
<IMG src="nat00161.jpg" id="pic">

※ 画像をビルダーで挿入した際にビルダーが出力する、
file:///C:/Documents and Settings/USER/Application （以下略）
は、ビルダーのための一時的なパスなので、メモ帳などで編集
するときには、画像への相対パスで記述してください。

お礼

こんにちは、素早い回答と親切な指導有り難うございました。
例1、例3共再チャレンジしましたが前回と同じ結果になりました。
HTMLソースを使った画像変更は僕には無理だと思うようになりました。
　メモ帳などのテキストエディタで開く事も出来なかった。
又、ソフト3625zipを実行しましたが例1・例２・例3の赤色・青色の
□をクリックすると大きくなるだけで、画像をどうやってHPに挿入するかどう使ったら良いか判りません。どこかに説明ありますか？
　せめて、3625で出来るようになりたいと思います。
　　　　　　　　　　　　　　宜しくお願いします。

回答No.4

fake-tang

・・・・・・・・・・・ナゼソウナル（゜Д゜）

なんだか泣けてきたので、フリーのうぷろだをお借りして、動作確認
済みのソースと、画像を圧縮したファイルをおいておきます・・・・・・・・・・
http://hey.chu.jp/up/source3/No_3625.zip

解凍して出てきた test.htm を実行し、ブラウザで確認してみてください。

>例1ではクリックすると大きくはなっているが画像が
>出る部分に×が入り、両方とも画像が出ません。
画像へのパスが間違っています。

とりあえず、出していただいたIMGタグを見て、目が点になったと申し上げて
おきます・・・・・・・・・

＜タグ内の簡単な説明＞
src
　画像へのパスです。
　htmファイルと同じディレクトリ（フォルダ）に存在する場合はsrc="ooo.jpg"と
　なり、その下に image ディレクトリを作ってその仲に画像を入れた場合は、
　src="image/ooo.jpg"となります。
　上の階層に画像がある場合は、src="../ooo.jpg"となります。

style
　画像の縦横サイズや縁取りの有無、フォントサイズや色など。
　style="width:120px" で、画像の横サイズは120pxになります。
　style="height:60px" で、画像の縦サイズは60pxになります。
　二つを続けて style="width:120px;height:60px;"と書くことも可能です。

onclick
　クリックしたときの動作を指定します。
　onclick="javascript:this.style.width='300px';"で、「クリックしたら」「この」
　「style」の「width」を「300pxにしろ」と命令することになります。

回答No.3

fake-tang

またしても長文になりました orz

------------------------------------------------------------------

<IMG src="nat00161.jpg" width="80" height="60" border="0" ）" onclick="pic.src='" file:///C:/Documents and　Settings/USER/Application Data/IBM/Homepage Builder Version 9/tmp/nat00162.jpg" ';">

　まず、【border="0" ）"】 の、【 ）"】を削除してください。タグのエラーになります。

　" file:///C:/Documents and　Settings/USER/Application Data/IBM/Homepage Builder Version 9/tmp/nat00162.jpg"
　二つついている、【"】と、空白を削除してください。
　Javascriptエラーになります。

------------------------------------------------------------------

<IMG src="nat00161.jpg" width="80" height="60" border="0" id="pic">

　width="80" height="60" を削除してください。
　width と height の記述で、サイズが決められてしまうので、大きい画像も width
　と height で指定されたサイズでしか表示されなくなります。

例文では、どのIMGタグにも width="（画像の幅）" height="（画像の高さ）"は
入っていませんよね。

------------------------------------------------------------------

　あと、ちょっと書き忘れ。正しくは、
＜例1＞
<img src="（画像へのパス）" style="width:80px;height:80px;" onclick="javascript:this.style.width='160px';this.style.height='160px';">

＜例2＞
<img src="（小さい画像へのパス）" onclick="javascript:this.src='（大きい画像へのパス）';">

＜例3＞
<img src="（小さい画像へのパス）" onclick="javascript:pic.src='(大きい画像へのパス)';">
<img src="（最初に表示しておく画像へのパス）" id="pic">

　IEは勝手に補完するので書き忘れていました。
　HPBのプレビュー機能や他のブラウザだと、動作しなかったかもしれません。
　ごめんなさい。

------------------------------------------------------------------

>小さい画像を表示させたい場所
　質問者様が、画像を表示させたいと思っている場所です。
　ページ編集画面で画像を表示させたい居場所にカーソルを移動させ、その
　状態でページソースタブをクリックしてみてください。
　（Ｘ年前に買ったHPB6の動作ですが、同じだと思います）

------------------------------------------------------------------

ということで、コピー＆ペーストしやすいように、仮に小さい画像をs.jpg、大きい
画像をl.jpgとして、書いてみました。

＜例1＞
<img src="l.jpg" style="width:80px;height:80px;" onclick="javascript:this.style.width='160px';this.style.height='160px';">

＜例2＞
<img src="s.jpg" onclick="javascript:this.src='l.jpg';">

＜例3＞
<IMG src="s.jpg" onclick="javascript:pic.src='l.jpg';">
<IMG src="s.jpg" id="pic">

これを、<body>～</body>間の、お好きな場所に設置してください。

------------------------------------------------------------------

＜蛇足＞
また、画像にカーソルが載ったときにカーソルの形を指にしてやるとわかりやすい
かなーと。

＜例1＞の場合のみ、style を書き換える。
style="width:80px;height:80px;cursor:pointer;"

＜例2＞と＜例3＞の場合、style を指定してやる。
style="cursor:pointer;"
<img src="s.jpg" onclick="javascript:this.src='l.jpg';" style="cursor:pointer;">
ってかんじで。

------------------------------------------------------------------

＜蛇足2＞
onclick を onmouseover にすると、マウスが小さい画像に載ったときにアクションを
起こすことができます。

<img src="s.jpg" onmouseover="javascript:this.src='l.jpg';">

さらに、onmouseout 命令で、マウスがどいたときにアクションを起こすようにすると、
元の画像に戻すこともできます。
<img src="s.jpg" onmouseover="javascript:this.src='l.jpg';" onmouseout="javascript:this.src='s.jpg'">

------------------------------------------------------------------

たぶん、これでいけると思います。
ガンバレー（´・ω・｀）ノシ

お礼

こんにちは、素早い回答有り難うございました。
場所の特定は何となく解かるようになりました。
　再トライしましたが、次の結果になりました。
例1ではクリックすると大きくはなっているが画像が
出る部分に×が入り、両方とも画像が出ません。
例3では最初に置いた大小のままで変化が出ません。
　下記に例1と例3のHTMLソースを貼り付けて置きますので
問題点が判ったら教えて下さい。宜しくお願いします。
　<BR><IMG src="nat00161.jpg" width="80" height="60" border="0" id="pic" <IMG onclick="javascript:pic.src=2.jpg ';">'file:///C:/Documents and Settings/USER/Application Data/IBM/Homepage Builder Version 9/tmp/nat0016
<BR>
<IMG src="style=" width:320px;height:240px;" style="width:80px;height:60px;" onclick="javascript:this.style.width='320px';this.style.height='240px';">

回答No.2

fake-tang

No.1です。すごい長文になりました。頑張ってください。

>HTMLの最後の行に（中略）挿入しましたが、
えーと。
もしかして</html>の後に貼り付けましたか?
<body>～</body>の、画像を表示させた居場所に貼り付けてください。

それとも、「ページ編集」の一番下?
HTMLタグは、ホームページビルダーのページ編集に貼り付けても、ブラウザで
見れば、そのままの文字列が表示されるだけだと思います。

どのレベルの初心者さんなのかわからなかったので、先の回答になりましたが、
JavascriptはもちろんHTMLを読めない、超初心者さんということで対応させて
いただきます。

まずは、ホームページビルダーを「ソース編集（ページソース）」にしてください。

＜HTMLタグ例１＞
<img src="（画像へのパス）" style="width:80px;height:80px;" onclick="this.style.width='160px';this.style.height='160px';">
の場合、（画像へのパス）を、 大きく表示させたい画像へのパス に書き換え、
小さい画像を表示させたい場所に貼り付けてください。
この場合、大きく表示させたい画像を style="width:80px;height:80px;" で小さく
（この場合は80px × 80px）表示させ、 onclick="this.style.width='160px';this.style.height='160px';"
で、クリックしたときに大きく（この場合は160px × 160px）で表示させるように命令
しています。
この80pxや160pxは、任意で可変です。width:20px;height:120pxなど、お好きに
変更してください。

＜HTMLタグ例2＞
<img src="（小さい画像へのパス）" onclick="this.src='（大きい画像へのパス）';">
の場合、あらかじめ 小さい画像 と、大きい画像 を用意します。
最初に小さい画像を表示させ、onclick="this.src='（大きい画像へのパス）';" で、
クリックすると大きな画像に変わるように命令しています。

＜HTMLタグ例3＞
<img src="（小さい画像へのパス）" onclick="pic.src='（大きい画像へのパス）';">
<img src="（最初に表示しておく画像へのパス）" id="pic">
の場合、あらかじめ小さい画像と大きい画像を用意し、
<img src="（小さい画像へのパス）" onclick="pic.src='（大きい画像へのパス）';">
を、小さい画像を表示したいところに貼り付けます。
そして、
<img src="（最初に表示しておく画像へのパス）" id="pic">
を、大きい画像を表示したいところに貼り付けます。
さらにこの場合は、
<img src="（小さい画像へのパス）" onclick="pic.src='（大きい画像へのパス）';"><br>
<img src="（小さい画像2へのパス）" onclick="pic.src='（大きい画像2へのパス）';"><br>
<img src="（小さい画像3へのパス）" onclick="pic.src='（大きい画像3へのパス）';">
<img src="（最初に表示しておく画像へのパス）" id="pic">
とすれば、小さい画像 をクリックしたとき、
<img src="（最初に表示しておく画像へのパス）" id="pic">
は 大きい画像 へと変わり、小さい画像2 をクリックすると、大きい画像2 に変わります。

＜まとめ＞
記述する場所は、ソース編集（ページソースでしたっけ?）で、<body>～</body>の
間の、お好きな場所です。
また、（小さい画像へのパス）（大きい画像へのパス）は、決め打ちを避けた表現
になりますので、用意した画像がそれぞれ s.jpg l.jpg であるのなら、例１のHTMLタグは、
<img src="s.jpg" style="width:80px;height:80px;" onclick="this.style.width='160px';this.style.height='160px';">
例2のHTMLタグは
<img src="s.jpg" onclick="this.src='l.jpg';">
のようになります。

※ 動作確認はIEのみです。ネスケやFireFoxでは確認していません。

お礼

こんにちは、素早い回答有り難うございました。
超超初心者の僕は、苦闘しながらやってみたが全て失敗
でした。例1では画像に変化なし。例2では小さい画像が
消え、大きい画像では右半分がカットされてしまった。
例3では２個共小さな画像になり変化は無かった。
　尚、次の事が解からず、結果的には無視してやってしまった
ので当然かも知れない。
1：回答例1にある「小さい画像を表示させたい場所に貼り付けてくだ　　さい」で「表示させたい場所」が特定出来ない。
2：回答終わりの方で s.jpg l.jpg の使いかたが解からない。
　例3でやったHTMLのソースを貼り付けて置きますので、もし
問題点が解かったら教えて下さい。
<IMG src="nat00161.jpg" width="80" height="60" border="0" ）" onclick="pic.src='" file:///C:/Documents and　Settings/USER/Application Data/IBM/Homepage Builder Version 9/tmp/nat00162.jpg" ';">
<IMG src="nat00161.jpg" width="80" height="60" border="0" id="pic">
尚、画像はHPビルダーにある素材集から挿入しました。
　　以上宜しくお願いします。

回答No.1

fake-tang

Javascriptで。
特別なソフトは必要ありません。

<img src="（画像へのパス）" style="width:80px;height:80px;" onclick="this.style.width='160px';this.style.height='160px';">
とか
<img src="（小さい画像へのパス）" onclick="this.src='（大きい画像へのパス）';">
とか
<img src="（小さい画像へのパス）" onclick="pic.src='（大きい画像へのパス）';">
<img src="（最初に表示しておく画像へのパス）" id="pic">
とかを、HTMLの好きなところに記述してください。

※ 動作確認はIE6のみです。

お礼

素早い回答有り難うございました。
早速HTMLの最後の行に<img src="（画像へのパス）" style="width:80px;height:80px;" onclick="this.style.width='160px';this.style.height='160px';">
と<img src="（小さい画像へのパス）" onclick="this.src='（大きい画像へのパス）';">を別々にコピー貼り付けで挿入しましたが、画像に
変化出ませんでした。どうしたら良いですか？宜しくお願いします。