クリッカブルマップでロールオーバー
クリッカブルマップの画像をエリア設定している部分だけロールオーバー表示したいな。。。なんて思わなくてもいいことをやってしまったので思いで程度にメモ。但し、四角形のエリア限定。 [例] 不動産・住宅 物件検索 – BIGLOBE住まい ぶっちゃけクリッカブルマップをロールオーバーなんて馬鹿だと思うので、普通はCSSのpositionプロパティでAタグなんかをブロック表示で設置すればいいと思います。 だけど、どうしてもマップじゃないと駄目な理由がある場合は参考にしてください。jQueryを駆使してかなり強引にやってるので誰得な感じですけど。 まずは通常時とロールオーバー時の2枚の画像を用意します。今回例として使うのは下の二つ。ロールオーバー時の画像ファイル名は拡張子の前に_overを付け加えたものとします。 で、次にクリッカブルマップを設置します。こんな感じで、idを振ったdivでimgとma
jQueryのロールオーバーで共通のHTMLを使ってアクティブページを実現
2009年11月16日 javascript側で現在表示されているアクティブページが指定できるjQueryのロールオーバープラグイン。 2011.5.21追記 新しく作ったjQueryロールオーバープラグインはこちら CSSでロールオーバーさせたほうが、何かと便利なんだけど・・・。 現在のページはどうやって指定するの？ CSSでロールオーバーを実装する際は、bodyにページ固有のidを振っておけば、ナビゲーション部分のHTMLを全ページ共通のものにしておいて、CSS側で今いるページのナビ画像だけ変更できた。でも、javascriptでロールオーバーを実装する際、今いるアクティブなページには、最初からロールオーバー状態の画像を使いたいなーと思っても、HTML側の画像のパスを、ロールオーバー後のものにするしかない。 つまり、共通のHTMLが使えない。何かいい方法がないか調べてみたけど、あまりそ
alphafilter.jsが透過pngのロールオーバーに対応
alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />
マウスオーバー時にクールに画像を切り替えるjQueryサンプル:phpspot開発日誌
Sliding Boxes and Captions with jQuery | Build Internet! マウスオーバー時にクールに画像を切り替えるjQueryサンプル。 マウスオーバーで滑らかにキャプションが現れたり、画面を切り替えたりできるサンプルのデモとダウンロードが出来ます。 デモページ CSSをでレイヤーを重ね合わせて、上の要素をアニメーションさせてるだけのようですが、なかなかこれがクールですね。 $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'220px'},{queue:fals
Image Rollover Borders That Do Not Change Layout
It’s a fact of CSS life that the ‘border’ of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cause a layout shift. It’s one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. (qu
CSSで実現するスマートなロールオーバー
CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css
JavaScriptでロールオーバー - 徒書
考えたこと 画像ごとに無名関数を定義してイベントハンドラとして登録するのは手間がかかりそう。 mouseover/mouseoutのたびにreplaceするのも手間がかかりそう。 イベントハンドラ登録の方法は揃えたい。 _on画像を先読みしておきたい。 で自分でも書いてみた (function() { if (!document.getElementsByTagName) return; var addEvent, switchImage, init; addEvent = function(obj, type, func) { if (obj.addEventListener) { obj.addEventListener(type, func, false); } else if (obj.attachEvent) { obj.attachEvent('on' + type, func
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
