クリッカブルマップでロールオーバー
クリッカブルマップの画像をエリア設定している部分だけロールオーバー表示したいな。。。なんて思わなくてもいいことをやってしまったので思いで程度にメモ。但し、四角形のエリア限定。 [例] 不動産・住宅 物件検索 – 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が使えない。何かいい方法がないか調べてみたけど、あまりそ
マウスオーバー時にクールに画像を切り替える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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
