文法チェックで減点されないようにするには

[新着] Webテンプレートを仮オープンしました



0   名前: ギンペイ : 2007/01/10(水) 12:40  ID:tLc48s3C
2枚の画像を[background]として[hover]のタイミングで入れ替えるといったボタンを作ってみたのですが、どうも納得がいきません、<a href=""></a>の要素が空なので不自然な感じがします、”文法チェック”では当然(?)減点されてしまいます。
このようなボタン(2枚の画像をhoverで入れ替える)の作りかたは違う方法で作成するのでしょうか。
どなたかアドバイスがいただければありがたいのですが、
宜しくお願い板します。




<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<STYLE TYPE="text/css">

<!--
* { margin: 0; padding: 0; }
body {
background-color:#383838;
margin: 30px 30px ;
}

#navi
{
width:120px;
height:30px;
background-color:#1f1f1f;
}


.navicontact a
{
display:block;
height:28px;
width:82px;
margin: 0px 20px;
background:url("http://www.nizm.co.jp/gif/barcontact1.gif") no-repeat;
}

.navicontact a:hover
{
background:url("http://www.nizm.co.jp/gif/barcontact2.gif") no-repeat;
}

-->
</style>
<body>

<div id="navi">

<p class="navicontact"><a href="test.html"></a>
</p>


</div>
</body>
</html>















1   名前: カヅサツ ◆ThCi95HEzw : 2007/01/10(水) 12:40  [URL]  ID:O5hEMlpW
透過画像を作って(仮に spacer.gif とします) 、alt属性に適切なリンクテキストを指定すれば良いかと。

.navicontact a{
	display:block;
	margin: 0px 20px;
	background:url("http://www.nizm.co.jp/gif/barcontact1.gif") no-repeat;
}
.navicontact a,
.navicontact img{
	height:28px;
	width:82px;
}


<p class="navicontact"><a href="test.html"><img src="./spacer.gif" alt="テストページ"></a>



ただ、私ならJavaScriptでやります。

2   名前: ギンペイ : 2007/01/10(水) 12:40  ID:OerUsUem
カヅサツ さん

御回答ありがとうございます。

この画像は現在私のサイトでJavaScriptで動かしているのですが、
CSSの勉強をはじめましたら、面白くなり”何でもCSSで挑戦”モードにはいっているのです。

いつも適切なアドバイスありがとうございます。

一覧へ戻る