サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
blog.wood-roots.com
DEMO エリアマップを使用したときにロールオーバーを簡単に実現するスクリプトです。 HTMLとCSSでは多角形のマスクができないため、画像そのものを置換えてロールオーバーを実現させています。 Canvasとか使えるようになったら更に簡単で効率のいい方法を考えてみたいです。 もととなる画像のファイル名に「_hover数字」をつけたものがロールーバー時に表示されます。数字はmapタグ内の上から書いてある順番(0からスタート)です。 たとえば、ベースとなる画像が「base.gif」という名前だったとしたら、areaの1行目が「base_hover0.gif」という名前になります。2行目は「base_hover1.gif」です。 <div id="image"> <img src="common/img/base.gif" usemap="#areamap" id="baseimg" />
DEMO スクロールバーをカスタマイズするjScrollPaneプラグインの使い方をまとめました。正確な使用法というよりは最低限使えるかたちにする設定方法です。 まずはHTMLのhead部分でjsとCSSを読み込みます。 ダウンロード先は以下になります。 jScrollPane.js jquery.mousewheel.js(サイト内のmousewheelからダウンロード。ホイールでスクロールさせるためのプラグインです) <link rel="stylesheet" href="common/css/jScrollPane.css" type="text/css" media="screen,tv,print" /> <script type="text/javascript" src="common/js/jquery.js"></script> <script type="text
このページを最初にブックマークしてみませんか?
『blog.wood-roots.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く