電脳世界の空間的平面設計

現在WEBサイト制作の学校に通い勉強しています。その覚書きです。

JavaScript マウスを乗せると画像が切り替わる

コード javascript

マウスを乗せるとメインの画像が切り替わる

オンハンドラーのonClickを使う

html内に書くだけで出来るという便利仕様

 

使い方の例

　<img src="oo" alt="oo" name="name">

　これ"うんちゃら"って名付けまーす
　<img src="oo" alt="oo" onMouseOver="name='〇〇img'">

　この画像にマウスが乗った時（onMouseOver）、"うんちゃらを'〇〇画像'にしてね"

 

これ基本です。

 

メインの画像のサイズは　５４０ｐｘ　×　３６０ｐｘ

その他の画像は　１００ｐｘ　×　６７ｐｘ

にしました。

その辺はGridpxとかで臨機応変に作ってみてください。

www.kenjisugimoto.com

ーーーーーーーーーーーーーーーーーーーーーーーーーー

HTML

<body>
<h1>カワセミフィーバー</h1>
<ul>
<li><img src="img/01_b.png" alt="" name="mainImage"></li>
<li><img src="img/01_s.png" alt="" onMouseOver="mainImage.src='img/01_b.png'"></li>
<li><img src="img/02_s.png" alt="" onMouseOver="mainImage.src='img/02_b.png'"></li>
<li><img src="img/03_s.png" alt="" onMouseOver="mainImage.src='img/03_b.png'"></li>
<li><img src="img/04_s.png" alt="" onMouseOver="mainImage.src='img/04_b.png'"></li>
<li><img src="img/05_s.png" alt="" onMouseOver="mainImage.src='img/05_b.png'"></li>
</ul>

</body>

ーーーーーーーーーーーーーーーーーーーーーーーーーー

CSS

<style>
@charset "utf-8";

/* reset */
html,body,div,h1,p,ul,li,a {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
meiryo,
sans-serif;
}
ul {list-style: none;}
a {text-decoration: none;}
img {
border: 0;
vertical-align: bottom;
}
/* layout */
body {
background: #FFF;

}
h1{
width: 550px;
margin: 10px auto 10px;
padding: 10px 0;
}
ul{
overflow: hidden;
width: 560px;
margin: 0 auto;
background:#FFF;
}
li{
float: left;
margin: 5px 5px;
}
li:first-child {
padding: 5px;
box-shadow: 0 0 10px #666;
}
li:nth-child(2) {
padding-left: 5px;
}
li:last-child {
padding-right: 5px;
}

</style>

ーーーーーーーーーーーーーーーーーーーーーーーーーー

メインイメージにボックスシャドウも付けてみました。

他のやり方も有りますが僕はこんな感じで作ってみました。

質問などあればどうぞ。