リンク要素をマウスオーバー時に画像表示するのデモページ

テキスト表示

CSS Lecture

XHTML

<p><a href="http://www.css-lecture.com/" class="tooltip" title="CSSリファレンス、(X)HTML、Movable Type、その他Webサイト制作に関する役立つ情報を掲載します！">CSS Lecture</a></p>

CSS

#tooltip{
	position: absolute;
	border: 3px solid #333;
	background: #444;
	padding: 5px;
	color: #FFF;
	display:none;
}

画像表示　キャンプションなし

• 
• 
• 
• 

XHTML

<ul>
<li><a href="image/001.jpg" class="preview"><img src="image/001.jpg" alt="サンプル画像" width="150" /></a></li>
<li><a href="image/002.jpg" class="preview"><img src="image/002.jpg" alt="サンプル画像" width="150" /></a></li>
<li><a href="image/003.jpg" class="preview"><img src="image/003.jpg" alt="サンプル画像" width="150" /></a></li>
<li><a href="image/004.jpg" class="preview"><img src="image/004.jpg" alt="サンプル画像" width="150" /></a></li>
</ul>

CSS

#preview{
	position: absolute;
	border: 3px solid #333;
	background: #444;
	padding: 5px;
	display: none;
	color: #FFF;
	text-align: center;
}

画像表示　キャンプションあり

• 
• 
• 
• 

XHTML

<ul>
<li><a href="image/001.jpg" class="preview" title="サンプル画像 1"><img src="image/001.jpg" alt="サンプル画像" width="150" /></a></li>
<li><a href="image/002.jpg" class="preview" title="サンプル画像 2"><img src="image/002.jpg" alt="サンプル画像" width="150" /></a></li>
<li><a href="image/003.jpg" class="preview" title="サンプル画像 3"><img src="image/003.jpg" alt="サンプル画像" width="150" /></a></li>
<li><a href="image/004.jpg" class="preview" title="サンプル画像 4"><img src="image/004.jpg" alt="サンプル画像" width="150" /></a></li>
</ul>

CSS

#preview{
	position: absolute;
	border: 3px solid #333;
	background: #444;
	padding: 5px;
	display: none;
	color: #FFF;
	text-align: center;
}

URLプレビュー

CSS Lecture (キャンプションなし)

CSS Lecture (キャンプションあり)

XHTML

<p><a href="http://www.css-lecture.com/" class="screenshot" rel="image/css-lecture.jpg">CSS Lecture</a> (キャンプションなし)</p>
<p><a href="http://www.css-lecture.com/" class="screenshot" rel="image/css-lecture.jpg" title="CSS Lecture">CSS Lecture</a> (キャンプションあり)</p>

CSS

#screenshot{
	position: absolute;
	border: 3px solid #333;
	background: #444;
	padding: 5px;
	display: none;
	color: #FFF;
    text-align: center;
}