はてブのデザイン編集(css)で気づいたことのメモ

はまちや２さんの日記

はてブのデザイン編集(css)で気づいたことのメモ2006/01/31 [14:34]

ちょっと前に、はてなブックマークのデザイン編集機能で遊んだんだけど…
これ → はてなブックマーク - Hamachiya2のブックマーク

なんかまだtagリストまわりに問題点が残ってるけど、その時きづいたことをメモっときますね！

cssロールオーバー画像のプリロード
cssでクリッカブルマップもどき

・cssロールオーバー画像のプリロード

ふつうにcssでロールオーバーしただけだと、
やっぱりチラついちゃうので以下のようにしてプリロードしたよ。

footerとか


<div id="preLoad">

<img src="ロールオーバー時の画像1" width="1" height="1">

<img src="ロールオーバー時の画像2" width="1" height="1">

<img src="ロールオーバー時の画像3" width="1" height="1">

</div>

css


#preLoad {

 display: none;

 visibility: hidden;

}

imgタグで適当に読み込んで非表示にしてるだけだよ！
問題なさげじゃん！

・cssでクリッカブルマップもどき

mapタグは使わせてもらえなかったから、
mixiロゴ＆丸アイコンのメニュー画像のクリッカブルマップを
以下のような感じで実現してみたよ！

footerとか


<a href="リンク先" class="mixiLinks" id="mlMixi">

<img src="1px透過gif" width="200" height="60">

</a>



<a href="リンク先" class="mixiLinks" id="mlHome">

<img src="1px透過gif" width="25" height="32">

</a>

css


a.mixilinks {

 display: block;

 position: absolute;

}



a:hover.mixilinks {

 background-color: transparent;

}



a#mlMixi {

 top: 34px;

 left: 20px;

}



a#mlHome {

 top: 65px;

 left: 254px;

}