XHTML内に記述した画像置換

２つの画像をXHTML内に記述して画像を切り替えるやり方です。今日はノートを見ないで打てるようになるまでを目標に、もくもくとタグ打ちの練習をしました。次に何を打てば良いかが分かってくると早く打てました。


　　

  1. HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-type" content="text/javascript" />
<meta name="keywords" content="XHTMLによる画像置換 />
<meta name="description" content="XHTMLによる画像置換 />
<title>XHTMLによる画像置換</title>
<link href="base1.css" rel="stylesheet" type="text/css" />
</head>
<head>
<body>
<div id="case3">
<ul>
<li><a href="#"><img src="images/btn_home_o.gif" alt="HOME" /></a></li>
<li><a href="#"><img src="images/btn_topics.gif" alt="Topics" onmouseover="this.src='images/btn_topics_o.gif'" onmouseout="this.src='images/btn_topics.gif'" /></a></li>
<li><a href="#"><img src="images/btn_products.gif" alt="Products" onmouseover="this.src='images/btn_products_o.gif'" onmouseout="this.src='images/btn_products.gif'" /></a></li>
<li><a href="#"><img src="images/btn_aboutus.gif" alt="Products" onmouseover="this.src='images/btn_aboutus_o.gif'" onmouseout="this.src='images/btn_aboutus.gif'" /></a></li>
</ul>
</div>
</body>
</html>

  1. CSS
@charset "UTF-8";

/* リセット */
html, body, div, ul, li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
	sans-serif;
}
ul {
	list-style-type: none; 
}
a {
	text-decoration: none; 
}
img {
	border: 0;
}
/* 画像置換 */
#case3 {
	height: 40px;
	width: 480px;
	margin-top: 50px;
	margin-left: 50px;
}
#case3 li{
	height: 40px;
	width: 120px; 
	float: left;
	display:block;
}