クリッカブルマップでロールオーバー
クリッカブルマップの画像をエリア設定している部分だけロールオーバー表示したいな。。。なんて思わなくてもいいことをやってしまったので思いで程度にメモ。但し、四角形のエリア限定。 [例] 不動産・住宅 物件検索 – BIGLOBE住まい ぶっちゃけクリッカブルマップをロールオーバーなんて馬鹿だと思うので、普通はCSSのpositionプロパティでAタグなんかをブロック表示で設置すればいいと思います。 だけど、どうしてもマップじゃないと駄目な理由がある場合は参考にしてください。jQueryを駆使してかなり強引にやってるので誰得な感じですけど。 まずは通常時とロールオーバー時の2枚の画像を用意します。今回例として使うのは下の二つ。ロールオーバー時の画像ファイル名は拡張子の前に_overを付け加えたものとします。 で、次にクリッカブルマップを設置します。こんな感じで、idを振ったdivでimgとma
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="" />
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ページを開く
