ロールオーバーのボタンがくっつく。
onmouseoveとonmouseoutでホバーのときに画像が変わる。
img src="フォルダ名/画像名.jpg" alt="画像の説明" width="幅" height="高さ" onmouseover="this.src='フォルダ名/画像名._o.jpg'" onmouseout="this.src='フォルダ名/画像名.jpg'"
画像を保存するときにホバーのときのものには、画像名の後に_oをつけて拡張子は.jpgで保存する。
*<!DOCTYPE HTML>
<html lang="ja">
<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-Style-Type" content="javascript">
<title>ロールオーバーの練習ボタンがくっつく</title>
<style type="text/css">
<!--
*[HTML] {
margin:0;
padding:0;
}
img {
border: none;
}
ul {
list-style-type: none;
margin: 100px 0 0 100px;
}
li {
line-height: 0;
}
ul li a {
text-decoration: none;
padding: 10px;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" /></head>
<body>
<ul>
<li><a href="#"><img src="images/01.jpg" alt="HOME" width="150" height="40"onmouseover="this.src='images/01_o.jpg'" onmouseout="this.src='images/01.jpg'"></a></li>
<li><a href="#"><img src="images/02.jpg" alt="Illustrator" width="150" height="40" onmouseover="this.src='images/02_o.jpg'" onmouseout="this.src='images/02.jpg'"></a></li>
<li><a href="#"><img src="images/03.jpg" alt="photoshop" width="150" height="40" onmouseover="this.src='images/03_o.jpg'" onmouseout="this.src='images/03.jpg'"></a></li>
<li><a href="#"><img src="images/04.jpg" alt="HTML+CSS" width="150" height="40" onmouseover="this.src='images/04_o.jpg'" onmouseout="this.src='images/04.jpg'"></a></li>
<li><a href="#"><img src="images/05.jpg" alt="Dreamwaver" width="150" height="40" onmouseover="this.src='images/05_o.jpg'" onmouseout="this.src='images/05.jpg'"></a></li>
</ul>
</div></body>
</html>ここに画像が出ます↓
