Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

ナビゲーションメニュー作成 - CSSなしで作成 -

JavaScript

CSSなしでナビゲーションメニューに画像を貼付けて作成する方法

f:id:suge1040:20140702220558p:plain

- ソース -

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ナビゲーション</title>
<linkrel="stylesheet"href="css/style.css">
</head>
<body>
<divid="nav">
<ul>
<li><ahref="#"><imgsrc="img/01.jpg"width="160"height="40"alt="ホーム"onmouseover="this.src='img/01_o.jpg'"onmouseout="this.src='img/01.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/02.jpg"width="160"height="40"alt="カフェフード"onmouseover="this.src='img/02_o.jpg'"onmouseout="this.src='img/02.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/03.jpg"width="160"height="40"alt="カフェドリンク"onmouseover="this.src='img/03_o.jpg'"onmouseout="this.src='img/03.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/04.jpg"width="160"height="40"alt="インフォメーション"onmouseover="this.src='img/04_o.jpg'"onmouseout="this.src='img/04.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/05.jpg"width="160"height="40"alt="お問い合わせ"onmouseover="this.src='img/05_o.jpg'"onmouseout="this.src='img/05.jpg'"></a></li>
</ul>
</div>
</body>
</html>

- CSS -
@charset "UTF-8";
body, div, ul, li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  overflow: hidden;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}

#nav {
  width: 800px;
  margin: 50px;
}
li {
  float: left;
}
※補足
onmouseover="this.src='画像'"　は、マウスをボタンの上に置いた時の画像設定
onmouseout="this.src='画像'"　は、マウスをボタンの上からはなれた時の画像設定
 
参考ページ
JavaScript Reference : onMouseOver
CSSは必要なし！onmouse属性を使った簡単なロールオーバーの作り方