![Amazon.co.jp: SANYO NEW eneloop 充電式ニッケル水素電池(単3形4個パック) [HR-3UTGA-4BP]: エレクトロニクス](https://cdn-ak-scissors.b.st-hatena.com/image/square/44131d33be8bb0372df7e551a0adcab7c2061c7d/height=288;version=1;width=512/https%3A%2F%2Fm.media-amazon.com%2Fimages%2FI%2F512ezUQVrCL._SL500_.jpg)
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" />
クリッカブルマップ(イメージマップ)は、細かいと作るのがめんどくさいですよね。 Dreamweaverのマップの「多角形ホットスポットツール」でちまちまやるのが大変。 そういうときはイラレでもできるのです ☆やる前の注意点 あまりパスが細かいと(特に地図)四角で処理されるようです 四角にならなくてもhtmlソースが膨大になりますからやらない方が。。 パスの単純化をしてからやりましょう あと当たり前ながら境界線で区切っていている場合なんかはライブペイント処理してから〜 詳しくはこちら(All about Illustrator CS2・注目の新機能 ライブトレースとライブペイント) まずIllustratorのイラストデータを開きます(作ります)。 そしてメニューバーの[ウィンドウ]から「属性」パレットを表示させておきます。 あとはパスを選択し、属性パレットの「イメージマップ:なし」になって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く