背景に画像が出るリンク

CSSを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
a:hover.samp {

	background-image    : url("../img/smp.gif");
	width               : 150px;
	height              : 150px;
	background-position : 0% 0%;
}
-->
</style>
</head>
<body>
<p><a href="https://www.7key.jp/" class="samp">ここにマウスをのせて下さい</a></p>
</body>
</html>

表示サンプル

解説

「hover」にてマウスが重なった際の見栄えを指定することが出来ます。上記例ではマウスが重なった際の背景画像を変更しています。「width」と「height」は便宜上サンプル画像に合わせた値を指定しています。指定する画像、もしくはリンクの文字に合わせた幅と長さを指定して下さい。

リンクについての詳細は「リンクってなに?」を参照下さい。

リンクの設定の仕方は「リンクを作る」を参照下さい。