簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
戻るボタンとonloadイベント - Pixel Pedals of Tomakomai
ブラウザの戻るボタン(history.back)で戻った時にonloadイベントが走るかどうかは、ブラウザによって違うようです。 まず、IEですが、戻るボタンのときもonloadイベントが走ります。よって、なんにも心配要らないです。 次に、Firefoxではbfcacheと言う機能があり、以下の事情になってます。 ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません。 (中略) ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。 Using Firefox 1.5 caching と言うことで、Firefoxのことを考えるのなら、onpa
Hover Slide Effect with jQuery | Codrops
Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover […] Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images wi
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社
ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。） 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6～8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で
jQuery勉強メモ：画像や文字の透明度を利用したロールオーバーをプラグイン化してみた
昨日のプラグインの記述方法を利用して、 自分がよく使う機能をプラグイン化してみた。 今回のは、以前にも紹介した、透明度を利用したロールオーバー。 時々利用するのでプラグインの記述方法で書き直してみた。 透明度を利用するロールオーバー 作ったプラグインのデフォルトの状態は、 以前に紹介したロールオーバーの逆、 ロールオーバー時に透明になっていき、 マウスが離れたときは、もとに戻る仕様にしています。 ■JavaScript (function($) { $(function() { $.hamFunction.opacityRollOver({ /*適応させる部分の変更*/ fnClass:'.over', /*デフォルトの透明度指定*/ opacityDef:1.0, /*フェードの時間指定*/ fadeTime:200, /*マウスオーバー時の透明度の指定*/ opacityOn:0.6,
kojilow Blog | ナビゲーションをフェードで切り替え
画像でのナビゲーションをフェードで切り替えるのに以前はプラグインとか使っていたけど、最近は自分で作るので備忘録としてメモ。 まずナビゲーション部分のHTML。 <!– navi –> <ul id="navi"> <li class="navi01"><a href="#"><img src="/sample/fadenavi/imgs/navi-01.gif" width="120" height="30" alt="Navigation1" /></a></li> <li class="navi02"><a href="#"><img src="/sample/fadenavi/imgs/navi-02.gif" width="120" height="30" alt="Navigation2" /></a></li> <li class="navi03"><a href="#"><i
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript - KAZUMiX memo
#ff0000">2009年6月3日更新:ブラウザの「戻る」でフェード状態が残らないように修正。またリンクになっていなくてもフェードの対象にするようにした。 マウスカーソルが画像の上に重なったとき、その画像ファイル名の最後が _rollout となっている場合、その _rollout 画像を _rollover にフェードさせるJavaScriptです。 クロスフェードするロールオーバー処理 動作サンプル サンプルのロールオーバー用の画像は次のようなファイル名になっています。 menu01_rollout.png 最初のメニューの標準画像 menu01_rollover.png 最初のメニューのロールオーバー画像 menu02_rollout.png 2番目のメニューの標準画像 menu02_rollover.png 2番目のメニューのロールオーバー画像 menu03_rollout.pn
Dan Wellman » Plugin Update: hoverfade-1.0.2
I recently updated my hoverFade jQuery plugin after using the plugin in a couple of projects and work and needing extra functionality. I’ve been waiting for the jQuery plugin site to come back up again (which it now has) after being locked down following major spam attacks. I also wanted to wait until I had chance to put some proper examples together following comments in the original plugin relea
透過pngをロールオーバーさせる | A Day in the Life
August 31, 2008 この2〜3日、透過pngを大量に使うデザインのコーディングを行っていましたが、その中で困ったのがIE6で透過pngがロールオーバーしてくれないこと。 様々なライブラリを試したけれどもやっぱりロールオーバーしません。ところが唯一ロールオーバーに対応していたのがユンサンが配布しているiepngfix.jsのバージョン1.4。マウスオーバーさせたいオブジェクトとロールオーバー画像を引数にしてhover関数をコールすると言う使い方をします。 僕の場合はjQueryを使うケースが多いので、外部JSに以下のように書き出して使ってます。 $(function() { var lo_nav1 = document.getElementById('lo_nav1'); IEPNGFIX.hover(lo_nav1, 'btn_hoge_on.png'); }); ちなみに通常
クリッカブルマップに付してロールオーバーは使えますか？ - メニュー(ABOUTなど)を画像に打ち込み、クリッカブルマップを作成... - Yahoo!知恵袋
クリッカブルマップに使用している画像全体を差し替えるという方法しかないかな…と思います。別なところから画像を重ねるという手もありますが、かえって面倒ですね。 －－－－－－－－－－－－ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <title>test</title> <style type="text/css"> <!-- img { border-width: 0; } --> </style> <script type="text/jav
onmouseで画像の切り替えについて
こんにちは。画像切り替えについて質問があります。 内容は画像をランダムで読み込んで更に マウスが重なるとその画像がちょびっと暗くなったり明るくなったりしたいです。 ソースは・・・・ html側 <script type="text/javascript">document.write(randomImage1());</script>を任意の場所に埋め込んで 外部JSファイル function randomImage1() { var imageList = [ '1.jpg', '2.jpg', '3.jpg']; var n = Math.floor(Math.random() * imageList.length); return '<img src="' + imageList[n] + '" alt="">'; } ていう感じに書いております。 どこをどういじればいいかわからず困
『ロールオーバー今昔物語』サポートページ
鷹野雅弘（スイッチ） 2009年7月17日に開催したCSS Nite in OSAKA, Vol.17のフォローです。 Webは「クリックされてナンボ」。そこがクリッカブルであることが伝わらなければ、意味がありません。 クリッカブルであることを表現するひとつの手段として王道のロールオーバー効果も、DreamweaverやFireworksが自動的にはき出すJavaScriptを使ったものから、画像置換を使ったもの、そして、jQueryを使ったもの、さらにCSSのみで透明度を変更するものなど、その実装は変遷を遂げてきています。 これまでの流れをざっくり復習しながら、作り手/使い手両方がハッピーなロールオーバーはどこに向かうのかを一緒に考えましょう。 ロールオーバーの意味と意義 ロールオーバー（マウスオーバー）とは？ マウスポインタが重なったときに、次のいずれかのような変化を起こすこと 文字
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
Daniel Nolan - Home
Image Rollover Code This script is a standards compliant means of adding mouse rollover code to images in a document without the hassle of coding in extra parameters to each image in your document. This code is standards compliant and should not invalidate your document. Sample Usage To begin with you need to load the javascript into a page in the head section of your page. If you place the code
テレパス・ラボ : 画像のロールオーバー
リンク用途などにおいて画像のロールオーバーはかなり頻繁に利用されていますが、それを実現するとなるとコードが煩雑になってしまうことが多いようです。 例）Dreamweaverの場合 <a href="index.html" onMouseOver="MM_swapImage('sample','','sample_on.gif',1)" onMouseOut="MM_swapImgRestore()"> <img src="sample.gif" alt="サンプル" name="sample" id="sample" /> </a> "sample"という文字が何度も出てきてしまっているため、画像名が変わったらこれらすべて変更する必要があります。 これを、シンプルに実現できるようにしてみましょう。 今回もjquery.jsを利用してみます。 function initRollOverIma
ブログでもだいたい使えるHTMLタグ リファレンス - イベントパンドラ：マウスを重ねると説明が表示される
簡単なJavaScrip を使って、ウェブサイト内の文字などにマウスポインタが重なったときに説明などの文章をを表示させる（表示を変化させる）ことができます。 <ul style="float:left;widht:120px;margin:0 10px 0 0;padding-left:20px;"> <li><a href="JavaScript:void(0)" onMouseOver="VitaOn('A')" onMouseOut="VitaOut()"> ビタミンA</a> <li><a href="JavaScript:void(0)" onMouseOver="VitaOn('B1')" onMouseOut="VitaOut()"> ビタミンB1</a> <li><a href="JavaScript:void(0)" onMouseOver="VitaOn('B
JavaScript でロールオーバー
[ロールオーバー｜CSS HappyLife](http://css-happylife.com/log/javascript/000157.shtml) と言う記事を発見したので試してみました。 – [サンプルページ](https://bowz.info/wp-content/uploads/2008/03/smart-rollover/index.html) リンク先の記事で、ロールオーバー前の画像名は `*_on.gif` に、ロールオーバー後の画像名は `*_off.gif` にすべしと書いてあるのですが、Fireworks で画像を作る時にスライス名を指定しにくいので、 – `*_.gif` – `*_o.gif` とかのファイル名で動作する様に書き換えてみました。ファイル名の末尾をアンダーバーにするのは好みの分かれる所かと思いますが、こう言ったファイル名を付ける人は少ないかな？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで画像ロールオーバー（フェード版） | helog - Webに悩む人のネタ帳
CSS Sprites Generator Tool | Toptal®
Using <area> & "style=pointer:cursor;"