「あれこれポップアップ」のためのサンプル文書。内容は特に無関係です。リンクアンカーや、点線の下線の表示されてる箇所や、リンクバナーや、引用部分などなどにマウスポインタをかざして、1 秒ほどじっとしてみてくださいな。 なお、Mozilla 他の Gecko 系ブラウザ、 Safari 等の AppleWebKit 系ブラウザ、 WinIE の 6 あたりのブラウザでないときっと動作しません。そして JavaScript と CSS が有効でないと動作しないのであしからず。 ポップアップスタイル選択: リッチスタイル スタンダードスタイル サンプル 1 : よくある日記テキスト Apple が WaSP の偉いさんと契約したらしー。 MacMinuteが、Appleは同社のサイトデザインを新しくするため、Webの標準化を推し進める上で重要な役割を担ってきたWeb Standards Proje
ここでは、JavaScript による汎用ライブラリとして公開されている overLib について記述します。 この記事は OverLib 3.51 を元に書きました。2006/04/07 時点では OverLib 4.21 がリリースされているようです。 基本的な使い方には違いはないようですが、細かいところで差異があるかもしれません。 概要 ツールチップを表示させるだけなら、標準の HTML 属性である title を使えば表示させられるのですが、overLib はツールチップ内に HTML が記述できたり、幅・表示時間・キャプション等、設定できる項目が多数にわたる便利な汎用スクリプトになっています。 ダウンロード overLIB : http://www.bosrup.com/web/overlib/ 使用方法 ダウンロードしてきた overlib.js をページに組み込むには、まずペ
24 Tooltipp-Scripts | Dr. Web Weblog Tooltipps, also Mini-PopUps, beharrscht jeder halbwegs moderne Browser. JavaScriptツールチップライブラリ24個。 カーソルを合わせた際などにヒントとしてポップアップしてサイトの使い勝手を向上させることの出来るツールチップライブラリが多数紹介されています。 Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus jTip – A jQuery Tool Tip AJAX-enabled Help-Balloons Tooltipps mit CSS und Javascript qTip BoxOver SuperNotes DHTML
wg:Bubble Tooltips Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ。 次のような吹き出し方式のツールチップテキストを作成できます。 次のようなJavascriptコードを書いておき、 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> アンカー<a>タグのt
Abbott Handerson Thayer (1849 - 1921) was an American artist, naturalist and teacher. He is best known for his 'angel' paintings, some of which use his children as models. Display anything Tipped can display anything from simple snippets of text to custom designed tooltips. With build in Ajax support and a powerful Javascript API, Tipped covers pretty much every usecase when it comes to tooltips.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <script type="text/javascript"> <!-- //元画像 var imgSrc = ''; //サンプル画像 arrI = new array("view1.gif","view2.gif","view3.gif"); //サンプル文章 arrS = new array( "情報技術におけるネットワークを学習するために、必須と思われる項目、又は付随する項目をまとめた「ネットワーク総合辞書」です。", "HPを初めて作る方向けに構成されています。まず何から始めればいいの?難しい専門用語ばかりだけど、どういう意味?こんなときはどうすればいいの?ってときに、このページを開いてください
[an error occurred while processing this directive] JavaScriptサンプル集>アーカイブ <HEAD> <SCRIPT type="text/javascript" language="JavaScript"> <!-- var mes=new Array(); mes[0]='デフォルト文字(空文字でもOK)'; mes[1]='1を表示'; mes[2]='2を表示'; mes[3]='3を表示'; function onmes(num) { var message=mes[num]; if (document.all){ info.innerHTML=message; } if (document.getElementById){ document.getElementById('info').innerHTML=messag
1-1 クロスブラウザとは 「クロスブラウザを制する」は、 JavaScriptのクロスブラウザテクニックを紹介していくシリーズだ。 テクニックの解説に入る前にクロスブラウザスクリプトの概略と現況を眺めてみたい。 クロスブラウザを実現するための汎用関数と実例サンプル。コピー&ペーストでとりあえず動かしてみよう。大半のサンプルが Win n4 n6 moz e4 e5 e6, Mac n4 n6 moz e4.5 e5 , Linux n4 n6 moz の環境で動きます。 showLAYER() 表示属性set(表示) 出す hideLAYER() 表示属性set(非表示) 消す 出す/消す moveLAYER() レイヤ−移動 クリックで移動 マウスを追って移動 moveByLAYER() レイヤ−移動(対現在地) 現在位置を起点として移動する
【リスト】<BODY onload="myGetBrowser()"> <script language="JavaScript"><!-- myID = "myCursor"; // DIVタグで付けたID myX = 8; // カーソル先端から少しずらす(X座標) myY = 16; // カーソル先端から少しずらす(Y座標) function myGetBrowser(){ // ブラウザを判断する myOP = (navigator.userAgent.indexOf("Opera",0) != -1)?1:0; //OP myN6 = document.getElementById; // N6 or IE myIE = document.all; // IE myN4 = document.layers; // N4 if (myOP){ // OP? document.on
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
onclickやマウスオーバなどで画像をクールに拡大縮小したい。 そんなあなたにおすすめなのが、『PopBox!』。画像をスムーズに拡大縮小する超クールなjavascriptだ。 『PopBox!』は、本当にかっこいい。スムーズに拡大縮小したり、リサイズまですることができる。 「Slide an image to reveal hidden text or graphics.」のところにはしびれた。。 画像を魅力的に見せるインターフェースとしてかなり使えるのではないだろうか。 画像をスムーズに拡大縮小する超クールなjavascript、チェックして使っていきたいですね。 誕生月だったので会社でお祝いしてもらいました。久々にケーキを食べておいしかったw。 デザイナーからプレゼントをもらいました。かっこいいコンセントです! やっぱりデザインされたものはいいな。
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ
LiveValidation - Validation as you type Lets face it, forms are boring, validation is a pain. It’s time to inject some life into them, make them fun again... JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」。 このライブラリを使ってできることは、examples にまとまっています。 数字、長さ、メールかどうかなど、値チェックに必要なものは殆どそろっているので簡単に実装できます。 コードは次のようにオブジェクト指向で非常にシンプル。 var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!" } );
他のライブラリや、自分のコードと共存させるときは、これらの名前と衝突しないように気をつける必要があります。同じ名前を使ってしまうと、コードがロードされた順番によって挙動が変わる、というようなわかりにくい問題が発生してしまう場合が出てきます。 オブジェクト、クラスの使われ方 ライブラリ内では、上記の名前空間は大きく分けて以下のような使われ形をしています。 その下に別のオブジェクトを入れるための親名前空間として使う Class.create()を使って Prototypeライブラリ風のクラスとして定義する Object.extend()を使って他のクラス、オブジェクトから継承されることを前提とする関数を集める コードを簡潔に記述する為に短い名前の関数として使う 特に、Object.extend()を使って継承を実現している箇所が多く、最終的にどのオブジェクト・クラスにどのメソッドが定義されてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く