「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
jQueryでロールオーバー！プリロード対応版 (1/3)
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある（画像クリックでサンプルページを表示します） ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像（img要素）の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白（すき間）を防ぐためです。コメントを
これはスゴイ！JavaScriptで画像をうにゃうにゃさせる「Liquid Image FX」
twitter facebook hatena google pocket これは驚きです。 画像を効果的な動きをつけることが出来ます。 via：JavaScript Liquid Image FX sponsors 使用方法 ファイル取ってきます。 Liquid <script type="text/javascript" src="Liquid.js"></script> <script> onload = function(){ var lq = Liquid({ src:"画像パス", target:document.body, direction:"bottom", //動きtop,bottom,left,right onload:function(){ setTimeout(function(){ lq.pause(); setTimeout(function(){ lq.pl
[JS]複数のdiv要素を省スペースに表示するスクリプト -Virtual Pagination
Dynamic Driveから、複数のdiv要素をページネーションを使って、省スペースに表示するスクリプトを紹介します。 Virtual Pagination デモでは、5通りのページネーションを使用して、複数のdiv要素を省スペースに表示させています。 ページネーションには、前後の送り、先頭・最後尾、数字、タイトルに対応しており、現在位置も表示できます。 スクリプトのオフ時には、div要素がそのまま配置されるため、情報の閲覧に差し支えはないと思います。 スクリプトはjQueryやPrototypeなどの他のスクリプトを必要せず、単独で動作します。 対応ブラウザは、IE5+, Fx1+, Op7+となっており、Safari 3.2.1(win)でも動作しました。
コンテンツをスライド表示するjavascript「glider.js」
タブやアコーディオンなどを使用することで限れられたスペースを活用することができます。 このような手法の一つにcarouselというものがあります。 glider.jsではcarouselを作成することができます。 sponsors 使用方法 Glider.jsからZipファイルをダウンロードし、全てをheadに書き込みます。 <link rel="stylesheet" href="http://yourdomain/glider.css" type="text/css" media="screen"> <script src="http://yourdomain/prototype.js" type="text/javascript"></script> <script src="http://yourdomain/effects.js" type="text/javascript"><
デコレーションテーブル.js - JavaScript ライブラリー - HTML5.JP
デコレーションテーブル.jsは、class属性に値を追加するだけで、テーブルの通常行の背景色をストライプ状にし、各行をクリッカブルにするライトウェイトなライブラリーです。他のJavaScriptライブラリに依存せず、単独で動作します。 テーブルをデコレーションするJavaScriptライブラリは海外物も含めて数多くありますので、このライブラリは特に目新しさはなく機能も少ないのですが、よろしければ是非ご利用ください。 ダウンロード Release Date Size (byte) Download 使い方 deco_table_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そしてHTMLのhead要素内に、次のJavaScriptコードを記述してください。 <script type="text/javascript" src="../ht
[JS]iframeを使用したツールチップのスクリプト -IfrmToolTip.js
IfrmToolTip.jsは、ツールチップで表示されるデータをiframeを使用して呼び出すスクリプトです。 IFRAME based Javascript Tooltip 使い方は、上記サイトの「IfrmToolTip.js」を外部ファイルとして指定します。 ツールチップの表示には通常表示の他に、アニメーションと透過があります。
2004-12-18 – Melog
一昨日のJavascriptで外部ドキュメントを参照する手法で考えたことを、実際に作ってみた。自分がこのスクリプトでどういう機能を想定していたか、大体掴んでいただけるかと。 …とはいっても、ただの間に… Read more
jQueryでスムーススクロールを作る - arekore
というタイトルにある事を仕事でやろうかと思っていたのです。 同一ページ内ならスムーズに移動するのですが、別ページにアンカーリンクを指定すると全く動かないという事が分かったので色々とネットで調べてみました。 最初なにがいけないのか全く分からなかったので焦りました・・・。 やっと見つけたBlogの記事によると、スムーススクロールを動かすinterface.jsの何かが邪魔をしているそうです。 別ページにアンカーリンクを指定するって他のサイトではあまりやらないのだろうか？ $(function(){ $('.page-top a').click(function(){ $('#top').ScrollTo(700, 'easeout'); return false; }); }) 上記のような記述だと、指定したクラスに対しての設定なので特に問題はないんですが、以下のように記述すると別ウインドウ
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
yuga.js 0.4.2 - 優雅なWeb制作のためのJS｜CSS HappyLife
通常のロールオーバー 動作テスト サンプルのソース <p> <img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </p> 説明 img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える [New]グループ化されたロールオーバー 動作テスト テキスト。 サンプルのソース <p> <a href="./hoge.shtml" class="btngroup"> テキスト。<img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </a> </p> 説明 img要素の親要素にclass="btngroup"があり、img要素にclass="btn"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。 現在のページ
これは便利! JavaScriptの勉強はこのコンテンツで - Eloquent JavaScript | エンタープライズ | マイコミジャーナル
Eloquent JavaScript Eloquent JavaScriptというタイトルのもとでJavaScriptに関する情報が公開されている。同コンテンツの作成はMarijn Haverbeke氏の手によるもの。プログラミングの簡単な紹介からJavaScriptを使ったプログラミングの勘どころが丁寧にまとまっている。JavaScriptの仕様を解説するスタイルではなく、実際に必要になる処理や間違いやすい部分について取り上げながら説明がおこなわれている。JavaScriptを使ったプログラミングを実施するすべてのデベロッパに一読をお薦めしたいコンテンツだ。Eloquent JavaScriptの目次は次のとおり。 Introduction Basic JavaScript: values, variables, and control flow Functions Data stru
FirefoxでURL折り返しJavaScript
Firefoxで長いURLなんかを折り返してくれるJavaScript 前から気になってたけど、たいした理由もなく後回しにしてた （見て見ぬふりをしてた） ことを 今日 なぜか やる気が起きたので、やっつけちゃいました。それは、Firefox で 長いURL や 連続した半角文字列を 折り返してくれない バグに 立ち向かうことでした。 どういう現象かというと・・・ こ～んな感じ。文字列が Block を突き破って、はみ出してます。これ、IE では起きない現象なんですよね。 小粋空間 さん ： Firefox・Netscapeで連続した半角文字を折り返す を参考に 「通常のJavaScritpと同様に設定するカスタマイズ」 のほうで やってみました。 outsider reflex さん ： Firefoxで長いURIを折り返す から、url_breaker_plus.user.js をダウ
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
/画像・HTMLポップアップ表示
公式サイト ライブラリを使ったデモ ライセンス:MITライセンス prototype.js/script.aculo.usを使った同一ページ内ダイアログ作成ライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryサンプル集 | DesignWalker
Ext JS ツールチップの内容を外部ファイルに記述する | Ajaxの覚え書き＠じゅえ
988 + JavaScript Libraries : skuare.net
http://youmos.com/news/shadedborder
LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」:phpspot開発日誌 - Webデザイン・デザイナーの制作に役立つネタまとめ