ナビゲーション(3)
JavaScriptで画像置換
- onmouseover属性はある要素にマウスカーソルが合わさった時に起動するスクリプトを指定する。マウスオーバーしたら発動しますということ。
- onmouseout属性はそのカーソルが外れた時に起動するスクリプトを指定する。マウスカーソルが離れたら・・
- 画像はphotoshopのガイドに沿ってスライス機能を使うと効率がよい。
使い方
下記の意味は「onmouseover」したら「this srcであるimg src=画像A」を「画像B」に置き換える。そして「onmouseout」したら「this srcである画像B」を「画像A」に置き換えるという意味。
<li> <a href="#"> <img src="画像A" alt="" onmouseover="this.src='画像B'" onmouseout="this.src='画像A'"> </a> </li>
onmouseover=大括弧【this.src=小括弧(画像B)】の構造になっている事に注意。
大括弧は「"」、小括弧は「'」←キーボードの7の場所にあるシングルクォーテーション。
<img src="画像A" alt="" onmouseover="this.src= ' 画像B ' " onmouseout="this.src= ' 画像A ' ">
html
インラインでの記述
<!DOCTYPE html> <html lang="ja">
<head> <meta charset="utf-8"> <title>java sprictによる画像置換</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="nav"> <ul> <li><a href="#"><img src="java-nav_140305/home.png" alt="ホーム" onmouseover="this.src='java-nav_140305/home_o.png'" onmouseout="this.src='java-nav_140305/home.png'"></a></li> <li><a href="#"><img src="java-nav_140305/food.png" alt="カフェフード" onmouseover="this.src='java-nav_140305/food_o.png'" onmouseout="this.src='java-nav_140305/food.png'"></a></li> <li><a href="#"><img src="java-nav_140305/drink.png" alt="カフェドリンク" onmouseover="this.src='java-nav_140305/drink_o.png'" onmouseout="this.src='java-nav_140305/drink.png'"></a></li> <li><a href="#"><img src="java-nav_140305/info.png" alt="インフォメーション" onmouseover="this.src='java-nav_140305/info_o.png'" onmouseout="this.src='java-nav_140305/info.png'"></a></li> <li><a href="#"><img src="java-nav_140305/mail.png" alt="お問い合わせ" onmouseover="this.src='java-nav_140305/mail_o.png'" onmouseout="this.src='java-nav_140305/mail.png'"></a></li> </ul> </div> </body> </html>
css
@charset "utf-8";
html,body,div,ul,li,a{
margin:0;
padding:0;
line-height:0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
#nav{
width:800px;
height:40px;
margin:100px 0 0 70px;
}
img{
width:160px;
height:40px;
}
ul{
overflow:hidden;
}
li{
float:left;
}