javascriptでスマートなポップアップを表示できるライブラリ「ModalBox」 - Webtech Walker
Home Archive javascriptでスマートなポップアップを表示できるライブラリ「ModalBox」 javascriptでスマートなポップアップを表示できるライブラリ「ModalBox」 2007年07月06日 category:javascript Comment(0) Trackback(1) 最近ポップアップはあまり好印象ではないですよね。このライブラリを使えば、ポップアップがLightBox風のインターフェースで見た目も使いやすさも格段によくなります。 実際にサンプルをご覧下さい。 サンプル ダウンロードは下記サイトからどうぞ。 http://wildbit.com/demos/modalbox/ 使い方は簡単で、まずjavascriptとcssを読み込みます。このライブラリはprototype.jsとscript.aculous.jsを
JavaScriptでの画像プレビュー自由自在「PopBox」:phpspot開発日誌
PopBox! - Javascript Image Magnification PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page.JavaScriptでの画像プレビュー自由自在「PopBox」。 ページ内の画像をクリックするとページ内でそのまま、アニメーションしながら拡大。 PopBoxを使えば、そんな効果を実装することが可能です。 拡大だけではなく、比率の変更や、画像の移動、画像の縮小を行うことも出来ます。 凄く軽くて使いやすいです。もう、別ページで画像を拡大させるのは古い、と言われてしまうのかもしれませんね。
AJAXタブを作る際の13のユーザビリティガイドライン
先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。。。以後気をつけます。 さて、気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブメニュー」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! タブユーザビリティ、13のガイドライン Ajaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。 1. タブは同じ文脈内で一覧を作る代わりに使おう 異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
タブメニューなにか良いのないかなと思って探していたら、10 Javascript Ajax Tabsというエントリが後々使えそうなのでご紹介しておきます。 タブに関するまとめは以下で。 10 Javascript Ajax Tabs とりあえず10のJavaScriptAjaxタブメニューエントリはこちらから。 エントリの中でも、以下のメニューが面白かったですね。 口で説明するのは難しいですが、タブをクリックすると上下にスライドしながら違う文章を持ってきます。 以下からサンプル＆ダウンロード可能 タブメニューに関して 最近仕事のほうも忙しくなり、なかなか更新できないでいます。 そんなわけで、今回のようにタブを紹介するときにまとめて関連する記事を紹介する率も高くなってきました。 ピンポイント紹介ではなくなってきていますが、ご愛嬌と言う事でお願いします。 [JS]スムーズに切り替わるタブ型コン
MOONGIFT: JavaScriptでFlashのようなスライドショー「JS Slideshow」:オープンソースを毎日紹介
Flash製のスライドショーは、見栄えが映えるのは良いが、カスタマイズ性を含めてFlashに慣れていないと面倒に感じてしまう。 その点、JavaScriptベースは手軽にカスタマイズできるのが良い。とは言えFlashに比べるとリッチさが劣ってしまう…いや、そんな事はない。 今回紹介するオープンソース・ソフトウェアはJS Slideshow、JavaScriptでFlash並の表現を実現するスライドショーソフトウェアだ。 実際に触ってみると、分かるが写真の切り替えを含め品良く仕上がっている。現時点では左右のボタンで写真を切り替える機能しかないが、スライドショーなので最低限の機能はある。 そして写真を切り替える時に音が出るのが特徴だ。これは小さなFlashファイルを読み込んで実現しているようだ。他の機能はprototype.js、script.aculo.us、behaviour、soundm
Adobe Spryがすばらしい 5つの理由 - 無限責任社員の日記 ver.2
Ajaxのフレームワークは、Prototype.jsをはじめとして数多くあります。 私も、これまで「Protptype.js」「jQuery」「Motchkit」「Yahoo! UI Library(YUI)」と使ってみて、今は web creatorsの連載でもYUIを勧めています。 しかし、つい先日発売された「Adobe Creative Suite3（CS3）」が発売され、Dreamweaver CS3を触っているうちに、Adobe Spryがあまりにもすばらしい仕上がりになっていたので、思わず乗り換えてしまいました。 というわけで、これからは Spryにします宣言とともに、なにが良い点なのか、流行のブログタイトルで5の理由を挙げてみます。 1.重すぎない Spryはダウンロードファイルが 3.5MB程度、必要な.jsファイルや素材（Widget）は 700KB程度で収まります。Y
Video File Format Specification Version 9
Stories about our creative apps and services for everyone
JavaScript、FLASHのイメージギャラリーまとめ15個ほど*ホームページを作る人のネタ帳
今回は過去のホームページを作る人のネタ帳にて、まとめの一部として使われていたイメージギャラリーを主役にまとめました。 JavaScript系はブログでも使う事が出来たりしますので、お時間のあるときにでもお試しください。 （Flashに一点追加しました） CSSJavaScript Photo Sliderライブラリ。 滑らかなスライドを実装できます。CSSデザインである為、デザインのカスタマイズも可能。 ダウンロードページ 商用利用の場合は29ドルだけど、非営利の場合は無料で使える。 テキストが表示されているところもポップアップするので試してみると楽しいです。 ダウンロードページ 正確にはギャラリーではないですが、虫眼鏡による画像のビューア。 FLASHではないところがまた乙。重いのが難点か・・・。 ダウンロードページ こちらも虫眼鏡。地味に2つの機能がある。 クリックしながら右にドラッグ
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
私がWEB制作ネタを探している海外サイトベスト10
最近よく聞かれるのですが、一体Yamada氏のネタ元はどこですかと聞かれます。 ネタ師であるブロガーがネタ元を晒すのはどうかと思っていたのですが、有益である情報は晒すべきだと友人に言われてしまったのと、海外でまとめエントリにされていたので公開に乗り切ります。 より有益な情報を得る為に 友人いわく、公開してその上を目指せ、とか意味がわからないことを言われましたが、結局のところ海外の数々の有益な情報からピンポイントで発信するからこそ価値があるのであって、まとめサイトが有益なものであるとは限りません。 これらネタ元をつかって、より多くの方にピンポイントで面白い記事の発掘が出来るようになれば、それはそれで自分にかえって来るんだなぁと思います。 WEB制作者向け発掘サイト DZone - fresh links for developers デザイン、CSS等に関して有益なエントリが上ってくるシステ
RapidWeaver へようこそ
ブログや Web サイトをはじめてみようとお考えなら、RapidWeaver がピッタリです。使い慣れた Apple 社製アプリケーションのスタイルで Web サイトが作成できるだけでなく、iLife や .Mac、Mac OS X とシームレスに連携しています。 RapidWeaver は最先端の Web デザインアプリケーションです。ほんの短い作業時間でプロ級のルックスの Web サイトが作れます。 RapidWeaver が出力する XHTML 1.0 は W3C Markup Validator （Web ページが W3C 標準規格通りに記述されているかどうかをチェックする構文検証ツールです）で検証されています。RapidWeaver が出力する CSS は CSS レベル 1 とレベル 2 で、W3C CSS Validator （CSS が W3C 標準規格通りに記述され
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
» Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。
画像に鏡面効果を与えるreflection.js[to-R]
画像に鏡面効果を与えるreflection.js reulection.jsは画像に鏡面効果を与えるjsライブラリになります。 このライブラリを使用すれば、画像を加工することなく画像の下に鏡に反射したようなエフェクトが追加されます。 設置方法 ダウンロードしたreulection.jsをhead要素などで読み込みます。 <script tyle="text/javascript" src="./reflection.js"><script> エフェクトを追加したい画像のclass名にreflectを設置します。 <img src="[画像]" alt="" class="reflect" /> これだけで鏡面効果が与えられます。 サンプル 初期段階で画像が作るのが困難な場合や、背景が設定されている場合はこのライブラリを使えば効率的に作業ができるでしょう。 rheight20～80のクラス名
![画像に鏡面効果を与えるreflection.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
JavaScript無しのドロップダウンメニューを実行する純粋なCSS*ホームページを作る人のネタ帳
サンプルはこちら 現在結構話題になっていますが、これはすごいなと思ったので記事として残しておきます。 純粋なCSSによって実行させるドロップダウンメニューのサンプルが公開されています。 非常に勉強になりますね。 コードをコピペして超約してみたんですが、どうもあきらかな著作権違反ぽくなってしまったのでコピペはしません。 どうかリンク先でお確かめください。 Implementing drop-down menus in pure CSS (no JavaScript) （追加記事） コメントから参照 Browserによりサポートの仕方違いますよ Browser Supportを見たら分かるとおり、IE6ではJavascript使用して疑似クラスをごにょごにょしてます。 はてぶでも誤解している人が多いので、注釈お願いします。 すごいですねー。 JavaScriptを切ると見れないですねー。
MOONGIFT: » クールなWebベースポップアップウィンドウ「ModalBox」:オープンソースを毎日紹介
※ 画像は公式サイトデモより これはクール！ 思わず使い道を考えてしまった。Mac OSXではダイアログがウィンドウの上部から出てくる。あの表示が何となく好きという人も多いだろう。あれを実現するJavaScriptがこれだ。 今回紹介するオープンソース・ソフトウェアはModalBox、ウェブベースのポップアップ＆ウィザードだ。 簡単に言えば、ウィンドウの上から出てくるポップアップだ。表示していた画面はグレーアウトするので、そのダイアログだけに集中できる。Ajaxを使うことも、使わないこともできる。簡易的なものであれば使わずに手軽に利用できそうだ。 そして、ウィザード形式に操作を進めることもできる。例えば問い合わせフォームや、アンケート、友人へのメール等わざわざ画面を切り替えて操作するには及ばないようなものに使えそうだ。 表示のされ方がかなり格好よく、使い道も多そうだ。prototype.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Ajax 実践サンプル集
Yショッピング ネットでお買物
PHP & JavaScript Room
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker