画像置換（5）

課題 JavaScript




☆★データーでの確認★☆

ライブラリを利用

  • navの画像置換（yuga.js を導入）


ソースコード【 Javascript[ yuga.js ] 】

ソースコード【 Javascript[ jQuery.js ] 】




ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習課題【天然温泉】</title>

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

<script src="js/jquery.js"></script>

<script src="js/yuga.js"></script>

</head>
<body>

<div id="container">

<h1>練習課題：天然温泉</h1>

<h2><img src="images/01.gif" alt="天然温泉"></h2>

<div id="nav">

<ul>
<li><a href="#"><img src="images/btn1.gif" alt="料金" class="btn"></a></li>
<li><a href="#"><img src="images/btn2.gif" alt="施設案内" class="btn"></a></li>
<li><a href="#"><img src="images/btn3.gif" alt="お食事処" class="btn"></a></li>
<li><a href="#"><img src="images/btn4.gif" alt="アクセス" class="btn"></a></li>
<li><a href="#"><img src="images/btn5.gif" alt="写真集" class="btn"></a></li>
</ul>

</div><!-- / nav -->

</div><!-- / container -->

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";


/* ====================reset
 */

html,body,div,h1,h2,h3,h4,h5,h6,p,blockqupte,pre,address,ul,ol,li,dl,dt,dd,table,th,td,form,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 PGothic",
      sans-serif;
    }

img {
    border: 0;
    }

ul,ol,li {
     ist-style-type: none;
    }


/* =====================body
 */
body {
    text-align: center;
    background-color: #FFC;
    }

/* ====================container
 */
#container {
    margin: 30px 20px 0 20px;
    }

h1,h2 {
    width: 800px;
    }


/* ======================nav
 */
#nav {
    margin-top: 25px;
    width: 800px;
     }

li {
    float: left;
    }


ブラウザで表示