画像置換（1）

JavaScript 授業



単純なJavaScript




ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像置換</title>

<link rel="stylesheet" href="css/style.css" media="screen,print">

</head>
<body>


<nav>
<ul>
<li><a href="#"><img src="images/btn01.gif" alt="HOME" width="160" height="50"
onMouseOver="this.src='images/btn01_o.gif'"
onMouseOut="this.src='images/btn01.gif'"></a></li>


<li><a href="#"><img src="images/btn02.gif" alt="HTML+CSS" width="160" height="50" 
onMouseOver="this.src='images/btn02_o.gif'" 
onMouseOut="this.src='images/btn02.gif'"></a></li>


<li><a href="#"><img src="images/btn03.gif" alt="JavaScript" width="160" height="50" 
onMouseOver="this.src='images/btn03_o.gif'" 
onMouseOut="this.src='images/btn03.gif'"></a></li>

<li><a href="#"><img src="images/btn04.gif" alt="ActionScript" width="160" height="50" 
onMouseOver="this.src='images/btn04_o.gif'" 
onMouseOut="this.src='images/btn04.gif'"></a></li>

<li><a href="#"><img src="images/btn05.gif" alt="PHP" width="160" height="50" 
onMouseOver="this.src='images/btn05_o.gif'" 
onMouseOut="this.src='images/btn05.gif'"></a></li>
</ul>
</nav>


</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";



/* reset */

html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,ul,ol,li,dl,dt,dd,table,th,td,from,fieldset {
    
		
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family:
      "ヒラギノ角ゴ Pro W3",
      "Hiragino Kaku Gothic Pro",
      "Hiragino Kaku Gothic Pro W3",
      "メイリオ",
      meiryo,
      Osaka,
      "ＭＳ Ｐゴシック",
      "MS PGhothic",
      sans-serif;
    }

ul,ol {
    list-style-type: none;
    }

a {
    text-decoration: none;
    }

img {
    border: 0;
    }



/* ====================nav
 */

nav {
    width: 800px;
    margin: 50px 0 0 50px;
    background-color: #FF0;
    }

ul {
    overflow: hidden;/* nav枠内に入れる */
    }


li{
    float: left;
    display: inline;
    }

ブラウザで表示