画像置換

復習

画像置換

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーション</title>
<style type="text/css">
<!--
* padding:0;
  margin:0;
	
nav{
　　width:800px;
    margin:0 auto;
}
ul{
　　list-style-type:none;
    overflow:hidden;
}
li{
  　float:left;
    display:inline;
}
li a {
　　width:160px;
    height:50px;
    display:block;
    text-decoration:none;
}
li #home a {
		background-color:#fff;
    background-image:url(sado00.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
li #home a:hover{
		background-image:url(sado00_o.gif);
}
li #sado1 a {
		background-color:#fff;
    background-image:url(sado.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
li #sado1 a:hover{
		background-image:url(sado_o.gif);
}
li #sado2 a {
		background-color:#fff;
    background-image:url(sado01.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
li #sado2 a:hover{
		background-image:url(sado01_o.gif);
}
li #sado3 a {
		background-color:#fff;
    background-image:url(sado02.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
li #sado3 a:hover{
		background-image:url(sado02_o.gif);
}
li #sado4 a {
		background-color:#fff;
    background-image:url(sado03.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
li #sado4 a:hover{
		background-image:url(sado03_o.gif);
}


-->
</style>
</head>

<body>

<nav>
<ul>

<li><a href="#"><img src="sado00.gif" width="160" hight="50" alt=""
  onMouseOver="this.src='sado00_o.gif'"
  onMouseOut="this.src='sado00.gif'"</a></li>

<li><a href="#"><img src="sado.gif" width="160" hight="50" alt=""
  onMouseOver="this.src='sado_o.gif'"
  onMouseOut="this.src='sado.gif'"</a></li>
  
<li><a href="#"><img src="sado01.gif" width="160" hight="50" alt=""
  onMouseOver="this.src='sado01_o.gif'"
  onMouseOut="this.src='sado01.gif'"</a></li>
  
<li><a href="#"><img src="sado02.gif" width="160" hight="50" alt=""
  onMouseOver="this.src='sado02_o.gif'"
  onMouseOut="this.src='sado02.gif'"</a></li>

<li><a href="#"><img src="sado03.gif" width="160" hight="50" alt=""
  onMouseOver="this.src='sado03_o.gif'"
  onMouseOut="this.src='sado03.gif'"</a></li>  

</ul>
</nav>
</body>
</html>

　ようこその部分がおかしくなってしまったけれど、もう一度作り直せばwebページに使えそうな気がしています。