「あわせて読みたい」などをポップアップというのか？そんなのにしてみた

何気に覗いたブログに「あわせておしらセ！」というのを見掛けて
どういったニュースが表示されるのか、よくわからないまま設置してみたところ
同じような画像が３つになり、設置場所に困ったというか邪魔くさくなったというか･･･。

それで、以前書いたドロップダウンメニューなどを参考にして
マウスオーバーで表示されるようにしようと挑戦してみたところ、一応は出来た。
マウスを置く前の幅が画像の幅になっていたのが気になりはしたが
そんな細かい事は気にしない事にした。

<div class="test">
<table>
    <tr><td>
        <a href="http://〜">あわせて読みたい<br>
        <img src="http://〜.jpg"></a>
    </td></tr>
    <tr><td>
        <a href="http://〜">あわせておしらセ！<br>
        <img src="http://〜.jpg"></a>
    </td></tr>
    <tr><td>
        <a href="http://〜">なかのひと<br>
        <img src="http://〜.jpg"></a>
    </td></tr>
</table>
</div>

しかし、先ほど何気に弄くっていたら偶然解決した。
最初の画像のサイズを0にして、hoverのところに表示させるサイズを書いたら
ちゃんと文字列の幅になった。
tdの幅の数値は、文字列が入る幅なら適当でいい感じだった。

スタイルシートの部分はこんな感じ↓に書いた

div.test td {
    height: 20px;
    width: 150px;
}
div.test a {
    position: absolute;
    overflow: hidden;
    height: 12px;
    font-size: 9pt;
    letter-spacing: 2px;
}
div.test a:hover,
div.test a:hover img {
    overflow: visible;
    z-index: 10;
    display: block;
}
div.test img {
    position: absolute;
    top: -50px;
    left: -175px;
    border: 5px outset #707070;
    display: none;
}

IE6での確認のみ。
無駄が多い気もするが、結果オーライで。

※2月27日　変更
画像サイズを0にしていたが、display:noneに
hoverでdisplay:blockに変更した。
これなら画像のサイズがバラバラでもOKのようだ。
外国人のサンプルでdisplayを使ってたのはこういう事だったのか？

※4月3日　変更
imgのpositionをabsoluteに。