今、知り合いにHPの制作を頼まれてるんですが…
それがすごく厄介なのです…
私は芸大出身なんでイラレ、フォトショでスライスツールを使ってHPを作る。簡単なHTMLくらいはわかるんですがその友達が求めてるHPは
http://www.carbest-suzuki.com/cgi-bin/carbest-su …
マウスを画像の上に置くと大きい画像が切り替わるみたいな事がしたいです!!
こういうHP作るには何を勉強したらいいのですか?
フレームの中のソースをいじって画像などを張り替えたらイイだけですか?
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
>JAVAの事を詳しく教えてくれる参考サイト…
ではなく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
- 回答日時:
マウスをのせると、乗せた場所が変わることをロールオーバーといいます。
マウスをのせると、違う場所が変わることをリモートロールオーバーと言います。ちょっと検索して見てください。山の様にファイル名と、画像を張り替えればいいだけのものが、出てくると思います。
JavaSpriptが大半でしょうが、Cssでも出来ます。今、とりあえずはJavaSpriptでこぴぺで対処なさって、Cssも勉強されれば、今後のデザインに幅が出ると思います。
参考URLはイギリスの狂人的?Cssサイトです。左側のDemos - Photo galleries の項目を順番に見学されることをお薦めします。写真でリモートロールオーバーのいろいろなパターンを見学できますし、ソースもついてますので、今すぐの理解は難しいでしょうがご参考に。日本語のサイトでも、Cssでリモートロールオーバーを扱っているところもあります。いろいろいじって遊んでみる、試してみる。勉強なんて、硬く考えないで楽しみながら自由な発想で組み合わせてみてください。
参考URL:http://www.cssplay.co.uk/menu/index.html
No.4
- 回答日時:
ごめんなさい訂正です(何書いてんだ俺)
・(誤)
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];
}
}
}
ありがとうございます。とにかくJAVAの勉強をしないとだめですね…
リンクのサイトみたいにJAVAの事を詳しく教えてくれる参考サイトを教えてくれませんか?厚かましくてすみません…
No.3
- 回答日時:
このリンク先だとphp連携しているデータベース内の画像
(→ データが膨大、かつ頻繁に更新されるので都合がいいのと、そうせざるえない。多分こういった業者が利用するサービスのようなものだと感じますが)
をこのサイト内のHTML上でJavaScriptの"スワップイメージ"として入れ替えています。
function openimgs(VAL){~}の~の部分がスクリプトです。
表示部分に関しては
http://java.misty.ne.jp/swap.html
と同じ仕組みです、扱う画像が小数なら配列に格納してやればいいだけです。このページのソースをよく見てください。
膨大な場合はデータベースと連携させた方が考えとしてはまともです。この場合どこかのサーバーのサービスを利用するなどを検討したほうが早いと思います。
No.2
- 回答日時:
こんにちは、
htmlを作る時には、画像を作ってスライスして行くやり方とは別に、htmlのソースから作っていくやり方もあります。
提示されたホームページには、
.cgi とか、.php 等がURLの中に見つけられると思います。
サーバサイドスクリプトと呼ばれるものを使っています。
phpというスクリプトは、htmlに埋め込む事もできる。
簡単なスクリプトとよく言われます。phpをキーワードに調べると、情報はたくさんあります。
それぞれ、urlにクエスチョンマークや&のマークがたくさん書いてあります。
画像を大きくするというよりは、簡単に写真を入れ替えたりするために使っているようですね。
>フレームの中のソースをいじって画像などを張り替えたらイイだけですか
それで済む事は、それで済ませよう。
画像の切り替えだけだったら、JavaScript や DHTMLなどをキーワードに調べてみてはいかがでしょう。
No.1
- 回答日時:
>フレームの中のソースをいじって画像などを張り替えたらイイだけですか?
個人のHPなら、それもいいでしょう(^^;
入れ替え漏れが無いよーに注意してくださいね(^^;
商業なら、参考にするのはいいですが、ソフトを使って1から作り上げましょう、Adobe社のDreamweaberがあると楽ですよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
タイトルバーに画像を入れるHTM...
-
クリッカブルMAP領域が分かる様...
-
HPのリンクボタン。。。。
-
IMGタグでTIFF画像を表示
-
クリックしても、リンクに飛ば...
-
バナーのURLについて
-
HTMLだけで画像をクリックして...
-
HTMLタグで素材画像にリン...
-
スライドショーの上にロゴマー...
-
YAHOOオークションの出品説明に...
-
背景が透明なリンクボタンで、...
-
スマホで、画像をクリックする...
-
PDFの保存ボタンが表示されません
-
ロゴマークだけを抜き取って貼...
-
背景を透過加工したPNG画像を色...
-
htmlかcssで背景の白い枠をなく...
-
画像貼り付け、URLに飛べる軽い...
-
WORD 2010 透かし画像の濃さの調整
-
「縮小専用」で縮小した画像が...
-
background-sizeの背景で最小値...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
背景が透明なリンクボタンで、...
-
画像クリックでクリップボード...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
期間ごとに画像表示を切り替え...
-
スライドショーの上にロゴマー...
-
アルバムをめくるように、画像...
-
複数のボタンで1つのエリアに...
-
HTML上の画像を結合する方法が...
-
「DecareステートメントにPtrSa...
-
<A href= と<IMG srcの使い分け
-
CSSを使わずにマウスオーバーで...
おすすめ情報