CSS-only Image Annotation
スタイルシートだけで画像に注釈をつけようというのを見つけたので、
早速やってみる練習。マウスオーバーで注釈が出るのだ。
<18時に追記>
ちなみに今はFirefox とI.E.でしか確認できないけど、
I.E.では表示されませんでしたよまったく。
家に戻ったら他のブラウザでも確認してみよっかな。
</18時に追記>
ネタ元はコチラ→Annotating images with CSS
色んなバリエーションで注釈を出してて、もっとカッコイイのもあったけど、
一番シンプルなのをやってみた。
注意事項や自分なりのアレンジも含めて追記しとく。
まずは注釈の背景を透過させるために、
透過度55%で白の画像を作りアップロードする。
次にスタイルシートに以下を追加した。
※色、サイズなどは任意に変更すること
※usagi,inu,などのID を作り、表示させたい位置とサイズを指定した
そして画像表示部分のhtml は以下のように。
（ID は任意で変更する。このエントリの場合を書いとく。）
以上。
けっこうめんどくさかったｗ
どんな時に使うかなーと考えると、やっぱりネタ元のようにみんなで写ってる記念写真みたいなのとか、パーティーでのひとコマ、あとはなんだ、機械のパーツを注釈にしたり。
意外と使い道少なかったわなorz
早速やってみる練習。マウスオーバーで注釈が出るのだ。
<18時に追記>
ちなみに今はFirefox とI.E.でしか確認できないけど、
I.E.では表示されませんでしたよまったく。
家に戻ったら他のブラウザでも確認してみよっかな。
</18時に追記>
- うさぎ
- いぬ
- ねこ
- パンダ
- ねずみ
色んなバリエーションで注釈を出してて、もっとカッコイイのもあったけど、
一番シンプルなのをやってみた。
注意事項や自分なりのアレンジも含めて追記しとく。
まずは注釈の背景を透過させるために、
透過度55%で白の画像を作りアップロードする。
次にスタイルシートに以下を追加した。
/****blogpetテスト専用***/
#blogpet {
display: block;
position: relative;
width: 400px;
height: 74px;
margin: 0;
padding: 0; }
#blogpet ul { margin: 0; padding: 0; }
#blogpet li {
visibility: hidden;
list-style-type: none;
position: absolute;
display: block;
margin: 0;
padding: 0;
font-family: sans-serif;
font-weight: bold;
color: #000;
height: 16px;
line-height: 16px;
text-align: center;
background: url(透過度55%画像のパス);
border: 1px solid black;
text-decoration: none;
overflow: hidden; }
#blogpet:hover li { visibility: visible; }
#usagi { left: -5px; top: 10px; width: 60px; }
#inu { left: 80px; top: 48px; width: 50px; }
#neko { left: 170px; top: 28px; width: 50px; }
#panda { left: 260px; top: 48px; width: 60px; }
#nezumi { left: 330px; top: 28px; width: 60px; }
※usagi,inu,などのID を作り、表示させたい位置とサイズを指定した
そして画像表示部分のhtml は以下のように。
（ID は任意で変更する。このエントリの場合を書いとく。）
<div id="blogpet"> <img src="画像のパス"> <ul> <li id="usagi">うさぎ</li> <li id="inu">いぬ</li> <li id="neko">ねこ</li> <li id="panda">パンダ</li> <li id="nezumi">ねずみ</li> </ul> </div>
けっこうめんどくさかったｗ
どんな時に使うかなーと考えると、やっぱりネタ元のようにみんなで写ってる記念写真みたいなのとか、パーティーでのひとコマ、あとはなんだ、機械のパーツを注釈にしたり。
意外と使い道少なかったわなorz
