web制作の初心者です。車のＨＰの制作を頼まれました。

今、知り合いにＨＰの制作を頼まれてるんですが…
それがすごく厄介なのです…
私は芸大出身なんでイラレ、フォトショでスライスツールを使ってＨＰを作る。簡単なＨＴＭＬくらいはわかるんですがその友達が求めてるＨＰは

http://www.carbest-suzuki.com/cgi-bin/carbest-su …

マウスを画像の上に置くと大きい画像が切り替わるみたいな事がしたいです！！
こういうＨＰ作るには何を勉強したらいいのですか？
フレームの中のソースをいじって画像などを張り替えたらイイだけですか？
よろしくお願いします。

No.5 ベストアンサー 回答者： fab76 回答日時： 2006/09/21 16:59

>ＪＡＶＡの事を詳しく教えてくれる参考サイト…

ではなくJava言語とJavaScriptは全くの別物です、"JavaScript"で検索すればたくさんありますよ。

とりあえず自分のブックマークからですが

［入門編］
・JavaScript入門
http://www.pori2.net/js/

［リファレンス系］
・一撃必殺JavaScript日本語リファレンス
http://www.openspc2.org/JavaScript/
・とほほのJavaScriptリファレンス
http://www.tohoho-web.com/js/index.htm

［フリーサンプル・Tips系］
・JavaScript Samples フリーサンプル - eWeb
http://javascript.eweb-design.com/index.html
・JavaScript Tips collection
http://www.din.or.jp/~hagi3/JavaScript/JSTips/De …

などです、あとは書籍を参考に自分で書くのが早道です。ただブラウザごとの対応がまちまちだったりするのでちょっとした知識は必要です。
何事も多用すればユーザーに嫌われます、スパイス程度がスマートです。

● 少数の画像の扱いであれば＃3のリンク先（フルーツ紹介）のサンプルスクリプト［23～44行目］を少し変えればいいと思います、とても簡潔で簡単です。

・［30～32行］がスワップの本体、［27と33～34行］は画像を5秒で元に戻す関数です。

・［38～41行］は初期画像の表示用。
・イベントトリガー（ブラウザ上で何をしたら）と関数の呼び出しは［157～194行］に出現するonmouseover="SwapImage('./img/xxx.jpg')"

・出力部は［198行］name="image"と名前が付いたセルです。

● 画像が多ければ配列に格納したほうがスマートです。配列については上記のリンクから
・JavaScript入門［配列］
http://www.pori2.net/js/kihon/13.html

画像の扱いについては
・オンマウスで画像を入れ替える
http://javascript.eweb-design.com/0811_mci.html
の先頭数行が意味が近いです（目的違い）

No.6 回答者： ICHI-yan 回答日時： 2006/09/23 01:10

マウスをのせると、乗せた場所が変わることをロールオーバーといいます。

マウスをのせると、違う場所が変わることをリモートロールオーバーと言います。ちょっと検索して見てください。山の様にファイル名と、画像を張り替えればいいだけのものが、出てくると思います。

JavaSpriptが大半でしょうが、Cssでも出来ます。今、とりあえずはJavaSpriptでこぴぺで対処なさって、Cssも勉強されれば、今後のデザインに幅が出ると思います。

参考ＵＲＬはイギリスの狂人的？Cssサイトです。左側のDemos - Photo galleries の項目を順番に見学されることをお薦めします。写真でリモートロールオーバーのいろいろなパターンを見学できますし、ソースもついてますので、今すぐの理解は難しいでしょうがご参考に。日本語のサイトでも、Cssでリモートロールオーバーを扱っているところもあります。いろいろいじって遊んでみる、試してみる。勉強なんて、硬く考えないで楽しみながら自由な発想で組み合わせてみてください。

参考URL：http://www.cssplay.co.uk/menu/index.html

No.4 回答者： fab76 回答日時： 2006/09/21 09:55

ごめんなさい訂正です（何書いてんだ俺）

・(誤)
function openimgs(VAL)

・(正)
function IMGCHANGE2(VAL)です
http://cartown.jp/common/imgchange2.js

※ ECU-jpなのでメモ帳だとコメントが化けます

/* ---- IMGCHANGE2のスクリプト部分 ---- */

function IMGCHANGE2(VAL){
if(VAL){
var AR = new Array();
//画像サイズ、幅、高さを","で区切って配列に格納する
AR=VAL.split(",");
if((AR[0]!="upload/nophoto.jpg")&&(AR[0]!="upload/nophoto2.gif")&&(AR[0]!="../upload/nophoto.jpg")&&(AR[0]!="../upload/nophoto2.gif")){
//画像のファイル名
document.images["VIEW"].src=AR[0];
//画像の幅
document.images["VIEW"].width=AR[1];
//画像の高さ
document.images["VIEW"].height=AR[2];
}
}
}

この回答へのお礼

ありがとうございます。とにかくＪＡＶＡの勉強をしないとだめですね…
リンクのサイトみたいにＪＡＶＡの事を詳しく教えてくれる参考サイトを教えてくれませんか？厚かましくてすみません…

お礼日時：2006/09/21 15:36

No.3 回答者： fab76 回答日時： 2006/09/20 22:05

このリンク先だとphp連携しているデータベース内の画像

（→ データが膨大、かつ頻繁に更新されるので都合がいいのと、そうせざるえない。多分こういった業者が利用するサービスのようなものだと感じますが）
をこのサイト内のHTML上でJavaScriptの"スワップイメージ"として入れ替えています。
function openimgs(VAL){～}の～の部分がスクリプトです。

表示部分に関しては
http://java.misty.ne.jp/swap.html
と同じ仕組みです、扱う画像が小数なら配列に格納してやればいいだけです。このページのソースをよく見てください。

膨大な場合はデータベースと連携させた方が考えとしてはまともです。この場合どこかのサーバーのサービスを利用するなどを検討したほうが早いと思います。

No.2 回答者： exists 回答日時： 2006/09/20 12:18

こんにちは、

htmlを作る時には、画像を作ってスライスして行くやり方とは別に、htmlのソースから作っていくやり方もあります。
提示されたホームページには、
.cgi とか、.php 等がURLの中に見つけられると思います。
サーバサイドスクリプトと呼ばれるものを使っています。
phpというスクリプトは、htmlに埋め込む事もできる。
簡単なスクリプトとよく言われます。phpをキーワードに調べると、情報はたくさんあります。

それぞれ、urlにクエスチョンマークや&のマークがたくさん書いてあります。
画像を大きくするというよりは、簡単に写真を入れ替えたりするために使っているようですね。

>フレームの中のソースをいじって画像などを張り替えたらイイだけですか

それで済む事は、それで済ませよう。

画像の切り替えだけだったら、JavaScript　や　DHTMLなどをキーワードに調べてみてはいかがでしょう。

　

No.1 回答者： times3 回答日時： 2006/09/20 10:56

＞フレームの中のソースをいじって画像などを張り替えたらイイだけですか？

　個人のＨＰなら、それもいいでしょう(^^;

入れ替え漏れが無いよーに注意してくださいね(^^;

　商業なら、参考にするのはいいですが、ソフトを使って１から作り上げましょう、Adobe社のDreamweaberがあると楽ですよ。