crossline

▼JavaScriptで画像置換▼

font-size:12px;line-height: 150%;

 

 

 

 

JavaScriptを使って、下記のような小さなアイコンにマウスを持っていくと真ん中の大きい画像がかわる、というのを作っていきます

 

 

 

 

 

■まずはじめに、photoshopを使って真ん中に表示する用の画像を5枚(540×400),土台ろなる白い画像(ドロップシャドウつける)と、小さいサムネイル用の画像を5枚(100×74)を用意します

 

 

 

HTMLに以下のように記述します

 

f:id:ishuko:20140528021020p:plain

 

 

 

 

さらに、マウスをのせたとき、(onMouseover)とマウスを移動したとき(onMouseout)を記述

このとき、『” ”』で全体をかこって、『’ ’』で中を囲む。

 

 

f:id:ishuko:20140528021233p:plain

 

さいごに、マウスがホバーしたときにこのままだと矢印のままなので、手のマークにする▼

 

.thumnail img {
    cursor:  pointer

}

 

完成図↓

f:id:ishuko:20140528021751p:plain