ようこそ Guest さん
ログイン
ログインID

パスワード:


パスワード紛失
管理人愛用ソフト

本格的なサイト制作にはやはり DreamweaverとFireworksは必需品です。 むしろこの2つのソフトだけでサイト制作はまったく問題ありません。
管理人もこの2つだけで制作しています。
まぁ値段も値段ですが、それだけの価値は十二分にあります。 本格的なサイトを作る方、
Webデザイナーを目指したい方には必須のソフトと言えます。

フラッシュを作りたい方には、やはり業界標準ソフトのAdobe Flash。
お値段は張りますがとにかく高機能です。
ただ、本を買わないと実際は難しいでしょう・・・。

DreamweverやFireworksが初めての方は無理せず本を買いましょう。そのほうが結果的に早いので得です^^;

アースマラソン応援バナー
トップ (メニュー)  >  すぐに使えるJavaScript  >  javascriptを使った手動スライドショー

javascriptを使った手動スライドショー

と言っても画像は手動でスライドさせます。勝手にスライドされるものよりも使い勝手は良いと思う。

綺麗な写真を大きく見せたい場合にかなり有効です。見た目もまずまずかと

サンプル

設置法

次のファイルをダウンロードして解凍してください。

js.zip(60KB)

解凍したら「js」というフォルダができると思います。その中のphotoというフォルダに写真なんかの画像を入れておきます。サイズの目安は横が600px〜800pxぐらいがちょうどいんじゃないかと。あんま大きすぎてもね・・・。
「greybox」フォルダはjavascriptなんかのファイルが入っているので、そっとしておきましょう・・・。
んでは画像を表示させるhtmlファイルに必要な記述をしましょう。

簡単に言うと、今解凍したものの中にjavascriptのファイルがあるので、htmlファイルにjavaのファイルはここにあるよと教えてあげる必要があります。

ではまず、htmlファイルのhead内に以下の記述をします。

ここで大事なのがファイルのパスです。src="js/greybox/AJS.js" となってるところに注目してください。
これはいわゆる相対パスです。htmlファイルと同じディレクトリ(階層)にある場合の記述ですので、このまんま使うのであれば、htmlファイルと同じフォルダに先ほどのjsフォルダを入れる必要があります。

今度はbody内の記述です。

まずリンクに対してスライドショーを設定するので、(クリックでスライドショーが始まるので)、aタグを使って以下の記述をしてくんさい。

これでスライドショーという文字をクリックするとスライドショーが始まります。

ここで仕上げ〜。以下の記述を今のリンクの下辺りにでも書いてください。どこでもたぶん問題ないです。

画像のパスは相対パスで書きます。 js/greybox/AJS.jsファイルから見た相対パスです。デフォルトのままだと、階層を1つ上がりますので、 ../photo/〜.jpgとなるはずです。表示されない場合はたいがい相対パスの記述ミスです。 ../../などを試してみましょう。 絶対パスでも指定できますが、アップしてからじゃないと当然表示されません。絶対パスの場合はhttp〜からはじまって最後は.jpgで終わるはずです。

これで完了〜!あとはアップしてリンクをクリックすればおk!

うまくいかない場合はこのサイトのソースを見てちょ!
表示されない原因はどこかのパスの記述が間違っているはず!

ただこのサイト、euc-jpていう文字コードで書いてるからInternetExplorerで表示させちゃうと日本語部分が文字バケします・・・。
まぁ日本語部分は見なくてもいんだけど、気になる場合、FireFoxでソースを表示させるとちゃんと全部表示されます。参考までに・・・。

そんで結局おまえなに言ってんの??って人には無理かもしれません・・・。今さらだけど(汗

そんなに難しくないのでやってみる価値はあると思う。

以上、javaを知らずにjavaを使う!でした〜っ!!

プリンタ用画面
投票数:154 平均点:5.26

カテゴリートップ
すぐに使えるJavaScript
次
javascriptとCSS(スタイルシート)を利用した タブメニューの作り方
Copyright (c) ケンズキューブ All Rights Reserved.