ナビゲーション(3)

JavaScriptで画像置換

  • onmouseover属性はある要素にマウスカーソルが合わさった時に起動するスクリプトを指定する。マウスオーバーしたら発動しますということ。
  • onmouseout属性はそのカーソルが外れた時に起動するスクリプトを指定する。マウスカーソルが離れたら・・
  • 画像はphotoshopのガイドに沿ってスライス機能を使うと効率がよい。

 f:id:fujiwarashinichi:20140305194842j:plain

f:id:fujiwarashinichi:20140316015720p:plain

使い方

下記の意味は「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 ' ">

>>ナビ画像クリックで作成品へ

>>追記 2014/03/17 応用

f:id:fujiwarashinichi:20140316020005p:plain

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;
}